자바스크립트 이벤트리스너 등록하기

 

자바스크립트 에서 이벤트 처리 하는 방법 중 하나인
이벤트리스너 등록 편이다. 코드를 보자.

  <button>Click</button>

  <script> 

    const button = document.querySelector("button");

    button.addEventListener("click",alertPopup);

    function alertPopup(){

      alert("button click");

    }

  </script>

H5 요소로 버튼을 만들었고,
자바스크립트에서는 버튼을 선택자로 접근하였다.
그리고 하기 Syntax 로 이벤트가 등록된다.

 요소.addEventListner( "이벤트 타입" , 이벤트 처리 함수 )

"이벤트 타입" 에는 on을 제거한 이벤트 명을 적는다.
앞선 포스팅에서 HTML 속성과 요소의 속성으로 이벤트를 등록할때는
on이벤트 명이였다.

자바스크립트 이벤트 만들기 - 인라인 방식

자바스크립트 이벤트 등록방법 노드요소에 이벤트 함수 등록하기

그리고, 함수는 () 괄호를 넣지 않도록 주의해야 한다.

이벤트리스너를 활용해서 더블클릭 이벤트를 구현하면 하기와 같다.

   const doubleButton = document.querySelector("button");

    doubleButton.addEventListener("dblclick",alertPopup);

    function alertPopup(){

      alert("double button click");

    }

그러면 이벤트 명을 모두 외워야 하나?

그렇지 않다. 필요한 이벤트가 있다면 웹 검색을 통해서 찾으면 된다.

버튼에 더블이벤트를 추가하고 싶다면,

구글에 javascript button double event 등으로 검색하자.

그러면 여러가지 사이트가 나온다. 

그 중 MDN 문서에 들어가보면, 친절히 더블클릭 이벤트를 등록하는 방법이 나온다.

즉, 외우지 말자.

프로그램의 흐름과 로직을 이해하면 된다. 암기 과목이 아니다.