본문 바로가기

Language/JavaScript(ES6)

[JavaScirpt]이벤트 등록(addEventListener)

1. addEventListener

사용방식은 위의 코드와 같다.

1.이벤트리스너를 달아줄 객체 = t

그리고 괄호는 순서대로(이벤트, 리스너)이다.


해석해보면

객체t에 이벤트리스너를더하는데(클릭이벤트를통해서이고, 경고문을 출력하는 기능이다.)

이다.



2. 이벤트 리스너를 쓰는 이유




위의 코드는 프로퍼티 리스너이다.

이 프로퍼티 리스너는 한 객체의 이벤트에 하나의 리스너밖에 가질 수 없다.


고로 클릭이벤트 발생시에 alert(2)만 출력 될 것이다.



 


그래서 위의 코드와 같이 이벤트 리스너를 쓰는것을 권장한다.


클릭이벤트 발생시에

alert(1)과 alert(2)가 동시에 실행된다.


3. 하나의 리스너로 여러 이벤트리스너 실행하기.


t1과 t2 다른 객체이지만

하나의 리스너를 사용하고 있다.