자바스크립트 이벤트 바인딩

이벤트 바인딩(Event Binding)

1. HTML Event Handler

1
<button onclick="onClickFunction">Click!</button>

2. Dom Event Handler

1
document.getElementById('btn').onclick = onClickBtn;

3. EventListener

  • IE8이하에서는 addEventListener대신 attachEvent 메서드를 사용해야 한다.
    1
    2
    document.getElementById('btn').addEventListener('click', onClickBtn, false);
    ~

이벤트 흐름(Event Flow)

이벤트 버블링(event bubbling)

  • 이벤트가 안쪽 노드에서 바깥쪽으로 전파
  • HTML, DOM Event Handler를 사용할 경우 이벤트 버블링만 사용한다.

이벤트 캡처링(event capturing)

  • 이벤트가 바깥쪽 노드에서 안쪽으로 전파
  • EventListener를 사용할 경우 마지막 매개변수를 사용하여 이벤트 흐름을 정할 수 있다.
    true: 이벤트 캡처 , false: 이벤트 버블링(디폴트값)

이벤트 위임(Event Delegation)

  • 이벤트 리스너를 많이 추가하면 메모리를 많이 소모하게 되어 전체 성능이 저하된다.
  • 이벤트는 부모 요소에 영향을 미치기 때문에 부모 element에 이벤트를 바인딩 후 event.taraget을 통해 어떤 element에서 발생했는지 판단할 수 있다.
  • 동적으로 element가 생성되더라도 부모 element에 이벤트가 위임되어 있으면 동일한 기능이 수행된다.
  • 코드가 간결해지고 유지보수에 좋다.

기본 동작 변경

preventDefault()

stopPropagation()

  • 부모 요소에 이벤트 리스너가 있을경우 버블링 중단을 통해 상위 이벤트 실행을 막을 수 있다.

return false

  • element의 기본동작과 이벤트 버블링, 캡처링 모두 중단된다.