[DOM] 이벤트

1. 이벤트 실행

https://www.w3schools.com/js/js_htmldom_events.asp

 

DOM Event(ex. click)가 발생하게 되면, Event Object는 생성되며, Event를 처리할 수 있는 Event Listener(ex. onclick)로 전달된다. 발생한 Event를 처리하기 위해 Event Listener에 연결된 Event Handler의 첫번째로 인자로 생성된 Event Object가 들어간다.

 

요소의 각 이벤트 속성에 해당 이벤트 발생시 실행할 JavaScript 코드 작성

<input type="button" onclick="console.log('btn1 click');" value="btn1">

이벤트 속성값에 들어가는 JavaScript 코드중 특정 변수명은 특별한 값을 가진다.

 

this - 자신의 요소 객체

<input type="button" onclick="console.log(this);console.log(this.value);" value="btn2">

event - 이벤트 객체(전역변수)

<input type="button" onclick="console.log(event);console.log(window.event);" value="btn3">

 

2. 이벤트 등록

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Event_handlers

이벤트 발생시에 실행할 JS코드를 이벤트 핸들러(Event Handler)라고 한다.

이벤트 핸들러를 등록하는 방법은 여러가지다.

 

1) 인라인 등록

위에서 본 것과 같이 HTML 태그의 속성값에 직접 코드 작성

아래와 같이 함수를 이용해서 등록도 가능하다.

<input type="button" onclick="eHandler5(this, event);" value="btn5">
<input type="button" onclick="(function (){ console.log('btn6 click')})();" value="btn6">
<input type="button" id="btn7" value="btn7">
<input type="button" id="btn8" value="btn8">
<script>
    function eHandler5(t, e) {
        console.log('btn5 click');
        console.log(e);             // click
        console.log(event);         // click
        console.log(window.event);  // click
        console.log(t);             // input element
        console.log(this);          // window (case 1)
    }
    
    function eHandler7(e) {
        console.log('btn7 click');
        console.log(e);             // click
        console.log(this);          // input element (case 2)
    }
    
    document.getElementById('btn7').onclick = eHandler7;
    
    document.getElementById('btn8').onclick = function (e1) {
        function eHandler8(t, e2) {
            console.log('btn8 click');
            console.log(e2);        // click
            console.log(t);         // input element
            console.log(this);      // window (same as case 1)
        }
        eHandler8(this, e1);
    }
</script>

 

2) DOM 함수를 이용한 등록 추가/삭제

https://www.w3schools.com/js/js_htmldom_eventlistener.asp

인라인 등록방법은 이벤트 핸들러를 하나만 등록이 가능하다.

하나의 이벤트에 여러개의 이벤트 핸들러를 등록하려면 아래와 같은 DOM 함수를 사용한다.

 

EventTarget.addEventListener: 이벤트 핸들러 추가 메소드

EventTarget.removeEventListener: 이벤트 핸들러 제거 메소드

<input type="button" id="btn9" value="btn9">
<script>
    document.getElementById('btn9').addEventListener("click", eHandler9_1);
    document.getElementById('btn9').addEventListener("click", eHandler9_2);
    document.getElementById('btn9').removeEventListener("click", eHandler9_2);  // remove

    function eHandler9_1(e) {
        console.log(e);             // click
        console.log(this);          // input element
        console.log('btn9 click 1');
    }

    var eHandler9_2 = function (e) {
        console.log('btn9 click 2');
    }
</script>

 

3. 이벤트 전파

이벤트 발생시 이벤트가 다른 요소로 전파되며, 기본값은 버블링이다.

 

1) 이벤트 버블링(Event Bubbling)

이벤트가 발생했을때 이벤트가 상위요소로 전달, 최하위 요소의 이벤트 핸들러가 먼저 실행

 

2) 이벤트 캡쳐링(Event Capturing)

이벤트가 발생했을때, 이벤트가 하위요소로 전달, 최상위 요소에 이벤트 핸들러가 먼저 실행

<div id="div">
    <input type="button" id="btn10" value="btn10">
</div>
<script>
    var useCapture = true;

    function eHandlerDiv(e) {
        console.log('div click');
    }
    function eHandler10(e) {
        console.log('btn10 click');
    }

    document.getElementById('btn10').addEventListener("click", eHandler10, useCapture);
    document.getElementById('div').addEventListener("click", eHandlerDiv, useCapture);
</script>

 

Event.target: 이벤트가 일어난 (최하위) 요소 객체

Event.currentTarget: 이벤트가 버블링되어 이벤트가 일어난 현재 요소 객체

<div id='div' class='div-class'>
    <button id='btn'>btn</button>
</div>
<script>
    div.onclick = function(e) {
        console.log(e.target);			// button element
        console.log(e.currentTarget);		// div element
        console.log(e.currentTarget.className);	// div-class
    }
    btn.onclick = function(e) {
        console.log(e.target);			// button element
        console.log(e.currentTarget);		// button element
    }
</script>

 

3) 이벤트 전파중지

https://www.w3schools.com/jsref/event_stoppropagation.asp

이벤트 객체의 stopPropagation 메소드를 이용하면 이벤트 전파를 중지시킬 수 있다.

<div onclick="console.log('div click');">
    <button onclick="console.log('btn10 click');event.stopPropagation();">btn10</button>
</div>

특정 요소들은 기본적인(default) 이벤트 핸들러가 등록되어 있는데,

이벤트 객체의 preventDefault 메소드를 이용하면 해당 이벤트 핸들러 실행을 중지시킬 수 있다.

 

label 요소는 click 이벤트 발생시 연결된 요소(for 속성)에도 click 이벤트가 발생한다.

연결된 요소로 이벤트 전파를 중지시키기 위해서는 preventDefault 메소드를 사용하거나,

핸들러의 반환값을 false로 처리하면 된다.

<div onclick="console.log('div click');">
    <input type="radio" id="input1" onclick="console.log('input1 click');" />
    <label for="input1" id="label1">label1</label>
    <input type="radio" id="input2" onclick="console.log('input2 click');" />
    <label for="input2" id="label2">label2</label>
</div>
<script>
    label1.onclick = function (e) {
        console.log('label1 click');
        e.stopPropagation();
        e.preventDefault();
    }
    label2.onclick = function (e) {
        console.log('label2 click');
        e.stopPropagation();
        return false;
    }
</script>

a 요소의 기본적인 이벤트 핸들러인 링크기능을 preventDefault 메소드를 이용하여 해제할 수 있다.

<a href="\">\</a>
<a href="#">#</a>
<a href="#id-name">#id-name</a>
<a href="javascript:;">javascript:;</a>
<a href="javascript:console.log('click a');">javascript:console.log;</a>
<a id="a1" href="\">preventDefault</a>
<a id="a2" href="\">return false</a>
<script>
    a1.onclick = function(e) {
        console.log('click a1');
        e.preventDefault();
    }
    a2.onclick = function(e) {
        console.log('click a2');
        return false;
    }
</script>