제수기 - 제발 수업내용을 기억해라 / 단순 수업정리 시리즈Event
웹페이지상의 모든 사용자액션, 네트워크 통신간의 처리과정, 백그라운드 작업과정의 모든 것을 이벤트로 관리
이벤트 주도 프로그래밍(Event Driven Programming)에서는
1. 이벤트 발생 시
2. 이벤트 객체를 생성
3. 이벤트 핸들러함수를 호출해서 이후 처리를 하게 된다.
뭐가 이벤트인지 어떻게 알 수 있을까?
w3s에 잘 정리가 돼있다.
이벤트핸들러 등록
inline event 속성
inline-envent 속성의 이벤트객체명은 event 변경불가 (e) 이 부분
event 속성(property)
프로퍼티 이벤트 핸들러 방식은 하나의 핸들러 등록만 가능하다.
하나 더 만들었지만 그냥 덮어 씌워짐
addEventListner 속성
여러개 핸들러 등록 가능
이벤트 발생 객체
target이 발생하는 곳이다.
target만 가져와서 value 바꿀 수 있다.
클릭하면 버튼 없애버리기
이벤트 구분
메모리에 있는 게 다 적재됐을 때 호출된다.
커서 들어갔을 때 나왔을 때
유효성 검사
두번째 비밀번호 쓰고 블러 이벤트가 발생하면 두 비밀번호가 같은지 비교하고 alert를 띄울 수 있다.
💥에러
html에 id 값을 잘못썼다. 해결
form submit 이벤트를 통한 유효성 검사
- 제출버튼 클릭
submit이벤트 발생submit핸들러 호출
- 사용자 입력값에 대한 유효성검사
- 유효하지않은 값이 하나라도 있다면,
return false또는event.preventDefalut()호출 처리
- 제출
/^.{4,}$/.test정규식 사용 : 시작하고 아무글자나 4자리 이상!/^.{4,}$/.test: 4글자 이상이 아니라면💥에러
정규식 중에 온점 빠졌다. 해결.
결과
이벤트 전파
Event Propagation
bubbling
자식요소의 발생한 이벤트는 부모요소로 전파된다.
버블3를 클릭했더니 부모인 버블2에도 영향을 주고, 부모인 버블1, 그 위에 부모, 그 위에 부모한테까지 클릭 이벤트를 전달한다. 이게 바로 '버블링'의 성질.
이걸 이용하면 핸들러 작업을 조금 더 수월하게 할 수 있다.
이벤트 처리 위임
뭘 클릭하든 다 위임이 된다. 여기서 이제 구분만 해주면 된다.
이벤트속성을 넣고 어디서부터 시작됐는지 확인할 수 있게 한다.
이제 태그별 분기처리가 가능하다. 클릭한대로 콘솔로그가 찍히도록 할 수 있다. 버블1만 적용을 했고, 그래도 전달이 되니까 모두 핸들러 관리가 가능해진다.
임의로 이벤트 발생시키기
- 이벤트메소드호출
click 메소드 사용해서
버블3에 클릭이벤트를 발생시켜보자. 이벤트발생 버튼을 누르면 버블3를 누른 것 같은 효과를 주자.
- 이벤트 객체 생성해서 전달
속성제어가 수월하다. 버블3야 이 이벤트를 받아라.$bubble3.dispatchEvent(event);
{bubbles: true}: 버블링 허용
키 이벤트
keydouwn(키보드눌렀을때) - keypress - keyup(키보드땠을때) 순으로 발생
html
<form action="">
<div>
<textarea name="memo" id="memo"></textarea>
</div>
<div><input type="submit" value="제출"></div>
</form>엄청 자세히 확인할 수 있다.
keyup만 해서 보자.
방금 누른 키값 확인
3가지 방법이 있다.
if에 값을 넣어서 alert나 뭔가 발생하게 할 수 있다.
글자수제한
html
30글자 중에 0글자를 입력했습니다 이걸 실시간으로 보이게 해주자. 뭘 누르면 그걸 카운트 하는 거.
키보드 업으로 해야 반영을 잘 할 수 있따.
textContent 사용해서 value.length를 대입해주자.
30글자가 넘어가면 빨간색으로 보이게 하는 방법은?
삼항연산자로 바꿔서 써보자.
참이면 red 아니면 블랙
하지만 이제 글자수 넘어가면 제출 안되게 해라. 등의 조건을 첨부하기에는 if가 낫다. 하지만 우리는 다른 방법을 써보자.
html에 이렇게 name 넣어주고
js에서 html에 써놓은 name="memoFrm" 가져와서 이렇게 해줄 수 있다.
