Javascript Event handling

Html 조작을 위해 스크립트를 작성하다 보면 종종 내가 원하는 곳에 이벤트를 할당하고 제어하는것이 어려울 때가 있다.

<form onclick="alert('form')">
	FORM
  <div onclick="alert('div')">
  	DIV
    <p onclick="alert('p')">P</p>
  </div>
</form>

HTML 태그를 살펴보면 form > div > p 의 상관관계가 있다.
그럼 만약 p 태그를 클릭한다면 어떤일이 발생할까?

p => div => form 이라는 메시지가 나타나게 된다.

이처럼 여러가지 이벤트가 다양하게 분포되어 있다면, 생각과 다르게 이벤트가 발생 할 수 있다.

Javascript Event Bubbling (이벤트 버블링)

위의 예시는 이벤트 버블링의 예시이다.

p 태그의 이벤트를 실행하려 하였지만, 상위 태그인 div와 div의 상위 태그인 form이 순서대로 실행되는 형태이다.
각 태그에 할당된 이벤트가 상위태그로 넘어가며 탐색되어지는 형식 이다.

이벤트 캡처링

버블링과 반대로 일어나는 형식으로 상위 태그에서 하위태그로 이벤트 핸들링을 탐색해 실행하는 방식이다.

버블링 차단

event.stopPropagation()
버블링은 차단하지만 다른 이벤트 핸들러의 작동은 막지 못한다.

event.stopImmedeatePropagation()을 사용하면 막을 수 있다.

** 막는것을 권장하지 않는다. 이벤트가 element안에 갖혀서 빠져나오지 못해 다른 전역 이벤트 핸들러의 작동을 막을 수 있다.
ex) window 태그에 묶인 사용자 패턴 분석 이벤트 핸들러

Event Target Method

현재 이벤트가 발생된 타겟 요소를 정확하게 판단할 수 있으며 버블링에 의해 변경되지 않는 값
핸들러 콜백에서 this와는 약간의 차이가 있으며,

this는 현재 이벤트 핸들러가 실행된 요소이며, event.target은 이벤트가 시작된 타깃 요소가 된다.
상위 태그에서 타깃에 따른 변화를 주게 된다면 쉽게 알아볼 수 있다.

출처 : Javascript.info