addEventListener() 사용 방법

 오늘은 실무에서 경험한 addEventListener()에 대해 정리하고자 한다. addEventListener()는 나름의 노하우가 아닌 노하우가 필요했다..

 

 결론부터 정리하자면 addEventListener()를 사용할때는 꼭 removeEventLister()가 필요한지 여부를 생각하고 더 이상 추가해준 이벤트가 필요 없을 시 반드시 제거해주어야 한다.

 그 이유는 간단하다. 추가한 이벤트를 제거하지 않고 addEventListener() 로직을 다시 타게 된다면 이벤트가 중복으로 발생할 것이다. 필자 또한 실무에서 해당 문제로 점점 중복된 이벤트가 발생했던 경험이 있다.. 저와 같은 다른 주니어 개발자들은 이런 불상사가 생기지 않기 위해 글을 정리했다.

 그럼 이벤트 추가 방법과 제거 방법 모두 살펴보도록 하자.

 

addEventListener() 사용 방법

 먼저 addEventListener()는 객체에 이벤트를 추가해주는 매서드로 사용하는 방법은 다음과 같다.

<input type="button" id="obj" value="target" />

<script>
    var target = document.getElementById('obj');
    
    target.addEventListener('click', function(event){
        alert('click : '+event.obj.value);
    });
</script>

 

 또 다른 방법은 이벤트리스너 함수를 정의해두고 사용하는 것인데 필자는 아래와 같은 방법을 추천한다. 그 이유는 removeEventListener()로 이벤트를 제거하기 위함이다.

<input type="button" id="obj" value="start" />
<script>
    var target = document.getElementById('obj');
    
    function btnListener(event){
        switch(event.target.value){
            case 'start':
                alert("start !");
                break;
        }
    }
    target.addEventListener('click', btnListener); // btnLister : 함수 객체, btnLister() : 함수 return 값
</script>

 

 실무에서 사용한 참고 예제

videoPlayer.addEventListener('PlayStateChange', onLivePlayStateChange); // onLivePlayStateChange는 따로 정의

 

 

removeEventListener() 사용 방법

 아래 예제 14 Line(target2.addEvent...)을 살펴보자. removeEventLister로 target의 등록된 btnListener를 제거해준다.

<input type="button" id="obj" value="start" />
<script>
    var target = document.getElementById('obj');
    var target2 = document.getElementById('obj2');
    
    function btnListener(event){
        switch(event.target.value){
            case 'start':
                alert("start !");
                break;
        }
    }
    target.addEventListener('click', btnListener); // btnLister : 함수 객체, btnLister() : 함수 return 값
    target2.addEventListener('click', function() { // target의 등록한 클릭 이벤트리스너를 제거
      target.removeEventListener('click', btnListener);
    });
    
</script>

 

추가로 click 이외에 다음과 같은 이벤트들이 존재한다.

• keyup
• keydown
• focus
• mouseover
• scroll
• upload
• ...

 

이상 addEventLister() 포스팅을 마친다.

 

오늘 성장에 도움을 주신 개발자분

참고 자료 : https://opentutorials.org/course/1375/6761

감사합니다.