JavaScript HTML DOM EventListener 이벤트 리스너, 버블링, 캡처링

1. addEventListener 함수

 

 

선택된 엘리먼트에 이벤트리스너 를 부착한다.

 

아래 코드의 경우 click 이벤트가 발생하기를 기다리다가 , 해당 이벤트 발생시 해당함수 실행한다. 

element.addEventListener("click", function(){ alert("Hello World!"); });

 

위 코드는 외부 함수로 설정해서 코딩할 수 도 있다.

element.addEventListener("click", myFunction);
 
function myFunction() {
    alert ("Hello World!");
}

 

또한, 여라가지 이벤트에 대한 리스너 설정도 가능하다

 

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);
 
 

 

 

아래처럼, 인자를 넘길 수도 있다.

 

<script>var p1 = 5;var p2 = 7;
document.getElementById("myBtn").addEventListener("click", function() {    myFunction(p1, p2);});
function myFunction(a, b) {    var result = a * b;    document.getElementById("demo").innerHTML = result;}
 
 
 
</script>

2. addEventListener 의 버블링, 캡처링

 

 

여러가지 엘리먼트가 서로 겹쳐져 있을경우에, 내부 엘리먼트 클릭시 이벤트호출 순서를 결정하기 위한 방법 

 

버블링 (Bubbling) : 최하위 태그가 먼저 실행이 되고, 그 후에 상위로 호출이 이어짐 ( 기본값 ) 

캡처링 (Captureing) : 최상위 태그가 실행되고, 그 후에 점점 하위로 호출이 되는것 

 

 

기본값은 false 이며, 아래의 경우 DIV 내에있는 P 태그를 클릭했을 경우 

P 테그 핸들러가 먼저 실행이 된 후, DIV 핸들러가 실행된다. 

 

document.getElementById("myP").addEventListener("click", myFunction, false);
document.getElementById("myDiv").addEventListener("click", myFunction, false);