[JavaScript] addEventListener

이벤트 처리기를 등록하는 방법중 addEventListener가 사용하도록 가장 권장 된다고 합니다.

 

사용법

target.addEventListener(type, listener, useCapture);

• target: 이벤트 리스너를 등록할 DOM 노드
• type: 이벤트 유형을 뜻하는 문자열 ex) "click", "mouseup" etc.
• useCapture: 이벤트 단계, 캡처링/버블링(default) 단계 설정 가능
• listener: 이벤트가 발생했을 때 처리를 담당하는 콜백 함수의 참조

 

사용예 (등록)

window.onload = function() {
            var el = document.getElementById('box');

            el.addEventListener('click', function(e) {
                e.currentTarget.style.backgroundColor = 'red';
            }, false)
}

• 이벤트 리스너인 익명 함수가 받는 event 인자는 이벤트 객체
  이벤트 객체에는 발생한 이벤트의 다양한 정보가 들어있다
• event.currentTarget은 이벤트가 발생한 요소를 참조하는 요소 객체
• 이벤트 처리기를 등록할 때와는 다르게 'onclick'에서 on을 뺀 'click'만 작성
• false는 이벤트의 버블링 단계에서 이벤트를 캡처(발생)하라는 뜻
  생략시 false가 기본값으로 적용되며 일반적으로 false를 많이 사용

 

사용예(삭제)

target.removeEventListener(type, listener, useCapture);

• removeEventListener로 이미 등록한 이벤트 리스너 중 동일한 인자를 받는 이벤트 리스너를 삭제함
• 등록한 이벤트 리스너가 익명함수라면 기본적으로는 삭제 불가
  but, 이벤트 리스너 안에서 arguments.callee를 사용하면 삭제 가능
• removeEventListener의 매개변수는 addEventListener와 동일

 

장점

• 같은 요소의 같은 이벤트에 여러 개의 이벤트 리스너 등록 가능
• removeEventListener, stopPropagation, preventDefault 등의 메서드로 이벤트 전파를 정밀하게 제어 가능
• HTML 요소를 포함한 모든 DOM 노드에 이벤트 리스너 등록 가능
• 버블링 단계와 캡처링 단계에서 활용 가능
• 이벤트 처리기는 버블링 단계의 이벤트만 캡처 가능

 

이벤트 종류

• click – 마우스버튼을 클릭하고 버튼에서 손가락을 떼면 발생한다.
• mouseover – 마우스를 HTML요소 위에 올리면 발생한다.
• mouseout – 마우스가 HTML요소 밖으로 벗어날 때 발생한다.
• mousedown – 클릭을 하기 위해 마우스버튼을 누르고 아직 떼기 전인 그 순간, HTML요소를 드래그할 때 사용할 수 있다.
• mouseup – 마우스버튼을 떼는 그 순간, 드래그한 HTML요소를 어딘가에 놓을 때 사용할 수 있다.
• mousemove – 마우스가 움직일때마다 발생한다. 마우스커서의 현재 위치를 계속 기록하는 것에 사용할 수 있다.
• focus – HTML요소에 포커스가 갔을때 발생한다.
• blur – HTML요소가 포커스에서 벗어났을때 발생한다.
• keypress – 키를 누르는 순간에 발생하고 키를 누르고 있는 동안 계속해서 발생한다.
• keydown – 키를 누를 때 발생한다.
• keyup – 키를 눌렀다가 떼는 순간에 발생한다.
• load – 웹페이지에서 사용할 모든 파일의 다운로드가 완료되었을때 발생한다.
• resize – 브라우저 창의 크기를 조절할때 발생한다.
• scroll – 스크롤바를 드래그하거나 키보드(up, down)를 사용하거나 마우스 휠을 사용해서 웹페이지를 스크롤할 때 발생한다. 페이지에 스크롤바가 없다면 이벤트는 발생하지 않다.
• unload – 링크를 클릭해서 다른 페이지로 이동하거나 브라우저 탭을 닫을 때 혹은 브라우저 창을 닫을 때 이벤트가 발생한다.
• change – 폼 필드의 상태가 변경되었을 때 발생한다. 라디오 버튼을 클릭하거나 셀렉트 박스에서 값을 선택하는 경우를 예로 들수 있다.