[JavaScript] 이벤트 바인딩

이벤트 바인딩이란 DOM 요소에 이벤트와 이벤트 핸들러를 연결해주는 것을 말한다.

 

이벤트 바인딩하는 방법

HTML 이벤트 핸들러

HTML 요소의 이벤트 속성을 이용하여 이벤트 핸들러를 연결하는 방법이다.

<script>
  function myfunction() {
    alert("hello");
  }
</script>
<button onclick="myFunction()">

 

 

DOM 이벤트 핸들러

<button id="btn">클릭</button>
<script>
  document.getElementById("btn").onclick = () => alert("hello");
</script>

 

DOM 이벤트 리스너

<button id="btn">클릭</button>
<script>
  document
    .getElementById("btn")
    .addEventListener("click", () => alert("hello"));
</script>

하나의 이벤트에 다수의 이벤트 핸들러를 추가할 수 있고 이벤트 캡처링과 버블링을 지원한다.

addEventListener 세 번째 인자로 false 이면 버블링, true이면 캡처링

 

이벤트 버블링

해당 요소에서 이벤트가 발생하면 해당 태그부터 최상위 태그까지 순차적으로 이벤트 핸들러가 동작한다.

 

이벤트 캡처링

이벤트 핸들러가 최상위 태그에서 해당 태그까지 순차적으로 실행된다.