이벤트를 위임하는 방법

menu 엄마를 찾는다.
css에 넣는다. 시각적으로 확인하려고 백그라운드를 옐로우그린으로 했다.

 

 .menu {
        background : yellowgreen;

 

 

스크립트에 다음 세 줄의 코드를 넣으니

 

var menu =document.querySelector('.menu');

function clickHandler() {
console.log(this) ;
} 
menu.addEventListener('click', clickHandler);

 

this가 세 개의 메뉴를 다 가리킨다. 정밀한 타겟이 필요하다

 

이벤트 객체 ; e.currentTarget

 

 

두 번째 방법을 써 보자. e로 마우스무브를 캐취하는 방법이다. 

e.currentTarget으로 마우스무브 정보를 알 수 있다. 

 

발생한 이벤트에 대한 많은 정보를 가리킨다. 어느 위치인지, 클릭한 애가 누구인지,
마우스 무브이벤트의 좌표 값을 가지고 있다. 

 

이것은 첫 번째 방법인 this와 같은 값을 내놓는다. 

this == e.currentTarget 

이다. 

 

e.currentTarget== this

이벤트 객체 : e.target

 

e.target으로 마우스무빙을 정확하게 포착했다.