[JavaScript] 더 높은 수준의 이벤트 처리

 

 

여러가지 이벤트 처리

 

 

 이벤트 리스너/이벤트 핸들러 삭제하기

 

① 이벤트 핸들러 삭제하기

이벤트 핸들러를 삭제하려면 onxxxxx 메소드에 대해 null 값을 설정하기만 하면 된다.

// 페이지 로드시 실행되는 이벤트 리스너를 등록한다.
document.addEventListener('DOMContentLoaded', function() {
    var button = document.getElementById('btn');

    // 이벤트 핸들러 등록
    button.onclick = function() {
        window.alert('안녕하세요, 자바스크립트!');
    };

    // 이벤트 핸들러 삭제하기
    button.onclick = null;
}, false);

 

 

② 이벤트 리스너 삭제하기

이벤트 리스너를 삭제하려면 removeEventListener 메소드를 이용해야 한다.

// 페이지 로드시 실행되는 이벤트 리스너를 등록한다.
document.addEventListener('DOMContentLoaded', function() {
    var button = document.getElementById('btn');
    var listener = function() {
        window.alert("Hello");
    }

    // 이벤트 리스너 등록하기
    button.addEventListener('click', listener, false);

    // 이벤트 리스너 삭제하기
    button.removeEventListener('click', listener, false);
    
}, false);

 

 

 이벤트 관련 정보 취득하기 - 이벤트 객체

이벤트 리스너/이벤트 핸들러는 인수로 이벤트 객체를 받는다. 

 

① 이벤트 객체 간단한 정보 보기

이벤트 객체를 받으려면 이벤트 리스너에 인수를 지정하기만 하면 된다. 인수명은 'e', 'ev' 가 일반적이다. 이벤트 객체가 필요없다면 생략해도 무방하다

// 페이지 로드시 실행되는 이벤트 리스너를 등록한다.
document.addEventListener('DOMContentLoaded', function() {
    var button = document.getElementById('btn');

    // 이벤트 리스너 등록하기
    button.addEventListener('click', function(e) {
        var target = e.target;

        console.log(`이벤트 발생원 : ${target.nodeName} / ${target.id}`);
        console.log(`종류 : ${e.type}`);
    }, false);

}, false);

 

② 이벤트 발생시 마우스 정보 취득하기

click, mousemove 등의 이벤트가 발생할 때 마우스 포인터의 좌표를 얻을 수 있다.

// 페이지 로드시 실행되는 이벤트 리스너를 등록한다.
document.addEventListener('DOMContentLoaded', function() {
    var main = document.getElementById('div-main');

    // 이벤트 리스너 등록하기
    main.addEventListener('click', function(e) {
        main.innerHTML = `screen : ${e.screenX} / ${e.screenY} <br/>`
        + `page : ${e.pageX} / ${e.pageY} <br/>`
        + `client : ${e.clientX} / ${e.clientY} <br/>`
        + `offset : ${e.offsetX} / ${e.offsetX} <br/>`;
    }, false);

}, false);

 

 

③ 이벤트 발생 시 키 정보 취득하기

keypress/keydown 등의 키 이벤트는 눌린 키의 종류를 얻을수 있다.

/**
<label for='name'>사이트명: </label><br>
<input type="text" id="name" name="name" size="30" />
 */
// 페이지 로드시 실행되는 이벤트 리스너를 등록한다.
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('url').addEventListener('keydown', function(e) {
        console.log(`키 코드 : ${e.key}`);
    }, false);

}, false);

 

 

 이벤트 전달과정

이벤트 처리가 호출될 때까지의 과정이 있다. 이벤트 전달 과정에는 총 3단계의 과정이 있다.

 

+ 문서 트리 구조 예시

window → document → html → body → div → button

 

① 캡처 단계

최상위의 window 객체에로부터 문서 트리를 따라 하위 요소에 이벤트가 전달되어 간다. 

 

② 타깃 단계

이벤트의 발생원(요소)를 특정한다.

 

③ 버블링 단계

이벤트의 발생원으로부터 루트 요소를 향해 이벤트가 전달되는 단계이다. 다시 최상위 window 객체까지 거슬러 이벤트의 전달이 종료된다. 부모 노드에 전해지는 모습이 거픔이 떠오르기 때문에 버블링 단계라고 부른다.

 

예시) 이벤트 리스너는 inner1 → inner2 → main 순으로 실행된 후 디폴트 동작인 링크에 의한 페이지 이동이 처리된다.

/**
<div id="main">
    <a href="http://www.naver.com" id="inner" target="_blank">네이버</a>
</div> 
*/
document.addEventListener('DOMContentLoaded', function() {
    // inner 요소의 click 이벤트 리스너
    document.getElementById('inner').addEventListener('click', function(){
        console.log("inner1 리스너 발생");
    }, false);

    document.getElementById('inner').addEventListener('click', function(){
        console.log("inner2 리스너 발생");
    }, false);

    // main 요소의 click 이벤트 리스너
    document.getElementById('main').addEventListener('click', function(){
        console.log("main 리스너 발생");
    }, false);

}, false);

 

예시) 기본적으로 버블링 단계에서 이벤트가 처리되고 있지만 addEventListener 메소드의 제 3인수의 값을 true 로 변경하면 반대의 결과를 얻을 수 있다. (main → inner1 → inner2)

/**
<div id="main">
    <a href="http://www.naver.com" id="inner" target="_blank">네이버</a>
</div> */
// 페이지 로드시 실행되는 이벤트 리스너를 등록한다.
document.addEventListener('DOMContentLoaded', function() {
    // inner 요소의 click 이벤트 리스너
    document.getElementById('inner').addEventListener('click', function(){
        console.log("inner1 리스너 발생");
    }, true);

    document.getElementById('inner').addEventListener('click', function(){
        console.log("inner2 리스너 발생");
    }, true);

    // main 요소의 click 이벤트 리스너
    document.getElementById('main').addEventListener('click', function(){
        console.log("main 리스너 발생");
    }, true);

}, false);

 

 

 이벤트 전달 취소하기

이벤트 전달이나 이벤트 처리에 따른 브라우저의 본래의 동작을 취소하고 싶은 경우가 있다. 이벤트 전달 취소 방법은 다음과 같다.

 

 

① stopPropagation 메소드 - 상위 노드로의 이벤트 전달 취소하기

상위 노드의 이벤트 리스너를 무시하고 싶은 경우 stopPropagation 메소드를 사용한다. (inner1 → inner2 → 태그 기본 동작)

/**
<div id="main">
    <a href="http://www.naver.com" id="inner" target="_blank">네이버</a>
</div> */
// 페이지 로드시 실행되는 이벤트 리스너를 등록한다.
document.addEventListener('DOMContentLoaded', function() {
    // inner 요소의 click 이벤트 리스너
    document.getElementById('inner').addEventListener('click', function(e){
        console.log("inner1 리스너 발생");
        e.stopPropagation();
    }, false);

    document.getElementById('inner').addEventListener('click', function(){
        console.log("inner2 리스너 발생");
    }, false);

    // main 요소의 click 이벤트 리스너
    document.getElementById('main').addEventListener('click', function(){
        console.log("main 리스너 발생");
    }, false);

}, false);

 

 

② stopImmediatePropagation 메소드 - 이벤트 전달 즉시 취소하기

상위/하위 요소의 전파를 취소하는 반면 동일 요소에 등록된 리스너도 실행하지 않도록 하려면 stopImmediatePropagation 메소드를 이용한다. (inner1 → 태그 기본 동작)

/**
<div id="main">
    <a href="http://www.naver.com" id="inner" target="_blank">네이버</a>
</div> */
// 페이지 로드시 실행되는 이벤트 리스너를 등록한다.
document.addEventListener('DOMContentLoaded', function() {
    // inner 요소의 click 이벤트 리스너
    document.getElementById('inner').addEventListener('click', function(e){
        console.log("inner1 리스너 발생");
        e.stopImmediatePropagation();
    }, false);

    document.getElementById('inner').addEventListener('click', function(){
        console.log("inner2 리스너 발생");
    }, false);

    // main 요소의 click 이벤트 리스너
    document.getElementById('main').addEventListener('click', function(){
        console.log("main 리스너 발생");
    }, false);

}, false);

 

 

③ preventDefault 메소드 - 이벤트 본래의 동작 취소하기

이벤트 본래의 동작이란 "a 태그를 클릭하면 페이지를 이동한다", "텍스트 상자에서의 키 누르면 문자 반영하기" 등 브라우저 표준으로 정해진 동작을 뜻한다. 이 이벤트 본래의 동작을 취소하는 것은 preventDefault 메소드를 이용한다.

/**
<div id="main">
    <a href="http://www.naver.com" id="inner" target="_blank">네이버</a>
</div> */
// 페이지 로드시 실행되는 이벤트 리스너를 등록한다.
document.addEventListener('DOMContentLoaded', function() {
    // inner 요소의 click 이벤트 리스너
    document.getElementById('inner').addEventListener('click', function(e){
        console.log("inner1 리스너 발생");
        e.preventDefault();
    }, false);

}, false);