Javascript

[Javascript] DOM - event

shb 2022. 3. 11. 12:27

- 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 과 완전히 분업 가능해진다!