고전 이벤트 모델

사진속 this는 무엇을 의미하고 있을까? 바로 #header를 의미하게 된다.
onclick의 이벤트 핸들러에서 this를 사용하면 this는 이벤트를 발생시킨 객체를 의미한다.

Hello World를 클릭하면 이렇게 컬러가 빨간색으로 바뀌게 된다

 

이런식으로 반복문을 돌려 여러개의 h1을 생성하여 이벤트를 줄 수도 있다.
위 화면은 4개의 화면만 눌렀기에 저렇게 뜬 것.

위 이미지에서 a는 네이버 링크를 포함하고 있다.

anchor에 a태그를 넣고. 클릭시에 return false;가 일어나게 만들었다.

이건 기본 이벤트인 naver로 이동하는 이벤트를 막아준다

 

Hello World 를 누르면 부모의 이벤트들까지 한번에 실행된다. 이것을 이벤트 전달이라고 한다.

 

이벤트 전달을 막고싶다면 이런식으로 각 이벤트마다 stopPropagation을 써주면 된다.

 

고전 이벤트 모델은 이벤트당 하나의 리스너만 사용 할 수 있다!