Languages/Java Script

👉🏻[Js] addEventListener() | 이벤트 전파 | 버블링과 캡처링

모든 포스팅은 인프런 [생활코딩] 자바스크립트 강의의 내용을 담고 있으며

출처는 아래의 주소로 "egoing Lee"님의 자료입니다.

상업적인 의도가 아닌 공부한 것을 정리해놓는 목적으로 포스팅 한 것입니다.

www.inflearn.com/course/javascript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%95%EC%A2%8C#

웹브라우저 Javascript (자바스크립트) - 인프런

생활코딩 자바스크립트 강좌 입니다. 웹브라우저를 직접 제어할 수 있는 자바스크립트 레퍼런스를 공부해 봅니다. 초급 웹 개발 프로그래밍 언어 JavaScript 온라인 강의 자바스크립트 강좌

www.inflearn.com

addEventListener()

addEventListener은 이벤트를 등록하는 가장 권장되는 방식이다. 이 방식을 이용하면 여러개의 이벤트 핸들러를 등록할 수 있다.

<input type="button" id="target" value="button" />
<script>
    var t = document.getElementById('target');
    t.addEventListener('click', function(event){
        alert('Hello world, '+event.target.value);
    });
</script>

위 방식은 첫번째 인자로 이벤트 방식을 설명한다. 즉 t변수를 클릭할 시 뒤에 있는 메소드가 동작하게 되는 것이다.

또한 event.target.value는 button을 의미한다. 즉 이전 방식들의 좋은 점들을 다 가져다 놓은 것이라고 보면 된다.

하지만 이 방식은 ie8이하에서는 호환되지 않는다. ie에서는 attachEvent 메소드를 사용해야 한다.

var t = document.getElementById('target');
if(t.addEventListener){
    t.addEventListener('click', function(event){
        alert('Hello world, '+event.target.value);
    }); 
} else if(t.attachEvent){
    t.attachEvent('onclick', function(event){
        alert('Hello world, '+event.target.value);
    })
}

위 코드는 addEventListener방식이 호환이 되지 않아 사용이 안된다면, 이때 attachEvent라는 메소드를 사용하는 방식을 나타낸다.

거의 방식이 동일하지만, 첫번째 인자로 오는 값에 무조건 on이 붙어야 한다는 차이가 있다.

하지만 최근에는 위와 같은 크로스 브라우징 이슈의 문제를 대부분의 라이브러리에서 처리해주기 때문에 위와 같은 방식으로 사용할 필요가 없다.

이 방식의 중요한 장점은 하나의 이벤트 대상에 복수의 동일 이벤트 타입 리스너를 등록할 수 있다는 점이다. 이 방식은 프로퍼티와 인라인 방식과 차이를 보인다.

<input type="button" id="target" value="button" />
<script>
    var t = document.getElementById('target');
    t.addEventListener('click', function(event){
        alert(1);
    });
    t.addEventListener('click', function(event){
        alert(2);
    });
</script>

기존의 프로퍼티 방식에서는 단 하나의 이벤트만을 설정 할 수 있어서 리스너가 사라지므로, 제일 마지막에 사용한 이벤트만 동작하게 된다.

그렇기 때문에 광대한 코드의 경우 add이벤트 방식을 사용하는 것이 좋다.

하나의 리스너를 여러개의 이벤트 타겟에 설치하려면 아래와 같이 실행하면 된다. 이벤트 객체를 이용하면 복수의 엘리먼트에 하나의 리스너를 등록해서 재사용할 수 있다.

<input type="button" id="target1" value="button1" />
<input type="button" id="target2" value="button2" />
<script>
    var t1 = document.getElementById('target1');
    var t2 = document.getElementById('target2');
    function btn_listener(event){
        switch(event.target.id){
            case 'target1':
                alert(1);
                break;
            case 'target2':
                alert(2);
                break;
        }
    }
    t1.addEventListener('click', btn_listener);
    t2.addEventListener('click', btn_listener);
</script>

이벤트 리스너로 사용할 함수 : btn_listener() // target1이나 2 둘다 위 함수를 호출한다.

event.target.id라는 메소드를 통해 각각의 엘리먼트가 가진 id값을 알 수 있다. 그래서 구분하여 각 이벤트를 동작시켜준다.

이벤트 전파(버블링과 캡처링)

이번 강의의 내용은 매우 난이도가 높기 때문에 꼭 실습을 동반하여 강의를 숙지하길 바란다.

JavaScript - 이벤트전파 (1/3) : 소개

HTML 태그는 중첩되어 있다. 따라서 특정한 태그에서 발생하는 이벤트는 중첩되어 있는 태그들 모두가 대상이 될 수 있다. 이런 경우 중첩된 태그들에 이벤트가 등록 되어 있다면 어떻게 처리 될까? (실행)

<html>
    <head>
        <style>
            html{border:5px solid red;padding:30px;}
            body{border:5px solid green;padding:30px;}
            fieldset{border:5px solid blue;padding:30px;}
            input{border:5px solid black;padding:30px;}
        </style>
    </head>
    <body>
        <fieldset>
            <legend>event propagation</legend>
            <input type="button" id="target" value="target">          
        </fieldset>
        <script>
        function handler(event){
            var phases = ['capturing', 'target', 'bubbling']
            console.log(event.target.nodeName, this.nodeName, phases[event.eventPhase-1]);//첫 번째 인자 즉 event.target.nodeName은 가장 내부의 있는 핸들러를 리턴
        }
        document.getElementById('target').addEventListener('click', handler, true);
        document.querySelector('fieldset').addEventListener('click', handler, true);
        document.querySelector('body').addEventListener('click', handler, true);
        document.querySelector('html').addEventListener('click', handler, true);
        </script>
    </body>
</html>

이렇게 코드가 안에 내장되어 있는 관계에서 위에서부터 즉, 가장 큰 태그부터 호출되는 것을 "캡처링(capturing)" 이라고 한다.

반대로 제일 깊숙한 내부에서부터 동작하여 위로 호출되는 과정을 "버블링(bubbling)"이라고 한다.

위 코드를 실행시켜보면 위와 같이 구역이 나뉘게 된다.

실행결과

INPUT HTML capturing
INPUT BODY capturing
INPUT FIELDSET capturing
INPUT INPUT target

이벤트가 부모에서부터 발생해서 자식으로 전파되고 있다. 이러한 방식을 capturing이라고 한다. ie 낮은 버전에서는 작동하지 않기 때문에 많이 사용하지는 않는다.

코드를 아래와 같이 변경해보자. (실행)

document.getElementById('target').addEventListener('click', handler, false);
document.querySelector('fieldset').addEventListener('click', handler, false);
document.querySelector('body').addEventListener('click', handler, false);
document.querySelector('html').addEventListener('click', handler, false);

차이점은 addEventListener의 3번째 인자가 false로 변경했다는 것이다!

실행결과

INPUT INPUT target
INPUT FIELDSET bubbling
INPUT BODY bubbling
INPUT HTML bubbling

이번에는 순서가 반대로 되었다. 자식부터 부모로 이벤트가 전파되는 것을 버블링(bubbling)이라고 한다.

즉, 이러한 과정을 통해 addEventListner의 세번째 인자가 어떠한 역할을 하는지 알 수 있게 되었다.(:use capturing을 의미함)

버블링과 캡처링은 위 함수의 세번째 인자 값을 true로 주느냐 false로 주느냐에 따라 달라지게 된다.

이벤트 전파를 중간에 가로막을 수도 있다. 아래의 예시는 body까지만 이벤트가 전파되도록 중간에 막는 예시를 코드로 나타낸 것이다.

아래처럼 코드를 변경해보자. (실행)

function handler(event){
    var phases = ['capturing', 'target', 'bubbling']
    console.log(event.target.nodeName, this.nodeName, phases[event.eventPhase-1]);
}
function stophandler(event){
    var phases = ['capturing', 'target', 'bubbling']
    console.log(event.target.nodeName, this.nodeName, phases[event.eventPhase-1]);
    event.stopPropagation();//event객체가 가진 메소드 stop...() 호출
}
document.getElementById('target').addEventListener('click', handler, false);
document.querySelector('fieldset').addEventListener('click', handler, false);
document.querySelector('body').addEventListener('click', stophandler, false);
document.querySelector('html').addEventListener('click', handler, false);

실행결과

INPUT INPUT target
INPUT FIELDSET bubbling
INPUT BODY bubbling

참고로 ie9 이전의 브라우저에서는 이벤트 전파을 막기 위해서 event.cancelBubble 프로퍼티를 사용해야 한다.

'Languages > Java Script' 카테고리의 다른 글

[Js] 마우스 \| jQuery 이벤트 \| on ApI 사용법 (0)	2021.02.10
👉🏻[Js] 기본동작의 취소 \| 폼 \| 문서로딩 (0)	2021.02.10
[Js] 이벤트 \| 등록방법 & inline \| 프로퍼티 리스너 (0)	2021.02.10
👉🏻[Js] 문서의 기하학적 특성 (0)	2021.02.10

Contents

새소식

인기 검색어

👉🏻[Js] addEventListener() | 이벤트 전파 | 버블링과 캡처링

addEventListener()

이벤트 전파(버블링과 캡처링)

'Languages > Java Script' 카테고리의 다른 글

당신이 좋아할만한 콘텐츠

티스토리툴바