[자바스크립트] 이벤트리스너

1. 설명

- 이벤트가 발생했을 때 처리를 담당하는 함수

- 이벤트 핸들러(event handler)라고도 함.


2. 방법

2.1 HTML 태그 내 작성

- HTML 태그 이벤트 리스너 속성에 리스너 코드 작성

1
<div onmouseover="this.style.backgroundColor='red'"></div>

2.2 이벤트 리스너 프로퍼티 작성

1
2
function myFunction() { div.style.backgroundColor="red"; }
div.onmouseover = myFunction;

2.3 addEventListener() 메소드 이용

1
element.addEventListener("mouseover", myFunction); 

2.4 익명함수 이용

1
element.onmouseover = function () { this.style.backgroundColor="red"; };

3. 참고

- https://www.w3schools.com/js/js_htmldom_eventlistener.asp


끝.