- event : ~~할때
- event listener : 위 event 때에 동작하는 함수
* 특정 element에 event listener 를 추가 하는 방법
element.addEventListener("이벤트", 함수)
element.on이벤트 = 함수
* 특정 element에 event listener 를 삭제 하는 방법
element.removeEventListener("이벤트", 함수)
element.on이벤트 = undefined
- Listener로 동작하는 함수는 이벤트 발생 때마다 동작(호출)되는데
- 이때 발생된 이벤트 정보가 담긴 event 객체를 매개변수로 받을수 있다.
event.type : 이벤트 타입
event.target : 이벤트가 발생한 객체
DOM 모든 이벤트
https://www.w3schools.com/jsref/dom_obj_event.asp
DOM event 객체
https://www.w3schools.com/jsref/obj_event.asp
※ 크롬 개발자 도구에서 EventListener 확인 가능
* window object 에 event handler 추가
※ 문서 로딩 후에 JS 코드를 통해 이벤트들을 걸어주는 경우가 있다.
이때는 window 의 onload 나 document 의 onload 혹은 body 의 onload 에 작성하자
--> HTML 과 JS 과 완전히 분업 가능해진다!
'Javascript' 카테고리의 다른 글
[Javascript] DOM - element (0) | 2022.03.11 |
---|---|
[Javascript] DOM - node (0) | 2022.03.11 |
[Javascript] DOM (Document Object Model) - get (0) | 2022.03.11 |
[Javascript] Browser Object Model (브라우저 객체 모델) (0) | 2022.03.11 |
[Javascript] Form 검증 (0) | 2022.03.10 |