태야

JavaScript Event Listener 

Event

이벤트(event)란 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 의미한다. 웹 페이지에 사용된 자바스크립트는 이렇게 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있다. 따라서 클라이언트 측 자바스크립트를 비동기식 이벤트 중심(event-driven)의 프로그래밍 모델이라고 한다. 브라우저에서 많은 이벤트들이 발생하는데, 브라우저 화면의 크기를 마우스로 조절할 때도, 스크롤을 할 때도, 마우스로 이동하거나 무언가를 선택할 때도 이벤트가 발생한다. 따라서 개발자는 HTML엘리먼트 별로 어떤 이벤트(주로 키보드나 마우스 관련)가 발생했을 때 특정 행위를(어떤 일) 하고 싶다면, 대상 엘리먼트를 찾고 어떤 일을 등록하면 된다.

이벤트 등록

이벤트 리스너(event listener)

사용법

target.addEventListener(type, listener[, options])

: type은 이벤트 리스너를 등록할 이벤트 타입을 문자열로 전달한다. listener로 해당 이벤트 타입을 처리할 함수를 설정해준다. 마지막으로, options으로 이벤트를 전파할 방식을 설정해주는 것인데, 버블링 또는 캡처링 방식이 있지만 보통 default값(false)을 사용하기에 사용을 잘하지 않는다.

이벤트 리스너란 이벤트가 발생했을 때 그 처리를 담당하는 함수를 가리키며, 이벤트 핸들러(event handler)라고도 한다. 지정된 타입의 이벤트가 특정 요소에서 발생하면, 웹 브라우저는 그 요소에 등록된 이벤트 리스너를 실행시킨다.

// HTML
<table id="outside">
    <tr><td id="t1">one</td></tr>
    <tr><td id="t2">two</td></tr>
</table>

//JavaScript
// 이벤트 리스너(함수)
function modify(new_text) {
  var t2 = document.getElementById("t2");
  t2.firstChild.nodeValue = new_text;    
}
 
// 이벤트 리스너 등록
var el = document.getElementById("outside");
el.addEventListener("click", function(){modify("안녕")}, false);

// 출력
one
two // one 클릭 시, "안녕"으로 바뀜

이벤트 객체

브라우저는 이벤트 리스너를 호출할 때, 사용자로부터 어떤 이벤트가 발생했는지에 대한 정보를 담은 이벤트 객체를 생성해서 리스너 함수에 전달한다. 이벤트 객체(event object)란 특정 타입의 이벤트와 관련이 있는 객체다. 모든 이벤트 객체는 이벤트의 타입을 나타내는 type 프로퍼티와 이벤트의 대상을 나타내는 target 프로퍼티를 가진다. 이러한 이벤트 객체는 이벤트 리스너가 호출될 때 인수로 전달된다.

var el = document.getElementById("outside");
el.addEventListener("click", function(evt){
 console.log(evt.target);
 console.log(evt.target.nodeName);
}, false);

// 출력

// one 클릭 시
<td id="t1">one</td>
TD

// two 클릭 시
<td id="t2">two</td>
TD

event.target은 이벤트가 발생한 element를 가리킨다.

element도 객체이므로 안에 nodeName이나 classname과 같이 element가 가진 속성을 사용할 수 있다.