javascript에서 이벤트 처리를 위한 addEventListener() 함수 설명

javascript에서 addEventListener 함수를 이용하여 DOM Element에 이벤트 처리 함수를 추가할때 Capturing 과 Bubbling 두가지의 전달방식을 선택할 수 있다. 

1. Capturing

  - Capturing은 이벤트가 발생한 target element의 최상위 부모부터 target element까지 순차적으로 내려오면서 이벤트가  전달되는 방식 (TopDown 방식?)

2. Bubbling

  - Bubbling은 이벤트가 발생한 target element부터 최상위 부모까지 순차적으로 올라가면서 이벤트가 전달되는 방식 (BottomUp 방식?)

  - 이벤트 처리 함수의 매개변수인 Event객체의 event.stopPropagation()함수를 이용해  부모 노드로 이벤트가 전달되지 않도록 막을 수 있다. 

     * Event객체의 event.preventDefault() 함수는 기본 이벤트 핸들러의 동작을 막는다. 주로 Anchor(<a> Tag) Element의 페이지 이동을 막기 위해 사용된다. 

3. addEventListener 함수 정의

target.addEventListener(type, listener[, useCapture]);




type

이벤트 타입을 구분하기 위한 문자열 (ex click, blur, drag, drop, ...)

listener

이벤트를 수신하여 처리할 객체, 해당 객체는 EventListener 인테페이스를 구현하거나 단순한 자바스크립트 함수여야 한다.

useCapture  Optional

true 이면, Capturing 방식으로 이벤트가 전달되며, false 이며, Bubling 방식으로 이벤트가 전달된다. 기본값은 false이다.

출처: http://dimdim.tistory.com/entry/javascript에서-이벤트-처리를-위한-addEventListener-함수-설명 [딤딤이의 블로그]