jQuery event delegation propagation 이벤트 위임 전파 버블링

---

이벤트의 위임(event delegation)

제이쿼리는 이벤트의 위임을 통해 다수의 요소에 공통으로 적용되는 이벤트 핸들러를 공통된 조상 요소에 단 한 번만 연결하면 동작 가능

// 다음 예제는 <ul>의 자식 요소 중 <a>에 대해 요소마다 각각 이벤트 핸들러를 직접 연결
$(function() {

    $("ul a").on("click", function(event) { // <ul>의 자식 요소 중 <a>를 클릭했을 때,

        event.preventDefault();             // <a>의 클릭시 기본 동작인 링크의 작동을 중지시킴.

        $("#text").append("이 링크는 동작하지 않습니다!<br>");
    });
});


// 요소마다 직접 등록된 이벤트 핸들러는 현재 존재하는 <a>에만 연결되며, 새롭게 추가되는 요소에는 연결 X
$(function() {

    $("ul a").on("click", function(event) { // <ul>의 자식 요소 중 모든 <a>를 클릭했을 때,
        event.preventDefault();             // <a>의 클릭시 기본 동작인 링크의 작동을 중지시킴.

        $("#text").append("이 링크는 동작하지 않습니다!<br>");

    });



    $("button").one("click", function() {
        $("ul").append('<li><a href="/jquery/intro">jQuery</a></li>');
    });
});

// 위의 예제에 이벤트의 위임을 이용하면, 다음과 같이 작성 가능!!
$(function() {

    $("ul").on("click", "a", function(event) {

        event.preventDefault(); // <a>의 클릭시 기본 동작인 링크의 작동을 중지시킴.

        $("#text").append("이 링크는 동작하지 않습니다!<br>");
    });
    $("button").one("click", function() {
        $("ul").append('<li><a href="/jquery/intro">jQuery</a></li>');
    });
});

• .on() 메서드는 해당 요소에 첫 번째 인수로 전달받은 이벤트가 전파되었을 때, 그 이벤트를 발생한 요소가 두 번째 인수로 전달받은 선택자와 같은지 검사
• 만약 이벤트가 발생한 요소와 두 번째 인수로 전달받은 선택자가 같으면, 연결된 이벤트 핸들러를 실행
• 이벤트의 위임을 이용하면 현재 존재하는 자손 요소뿐만 아니라, 나중에 추가되는 자손 요소까지도 모두 자동으로 연결

이벤트의 전파(event propagation)

• 이벤트가 발생했을 때, 브라우저가 이벤트 핸들러를 실행시킬 대상 요소를 결정하는 과정
• 이벤트가 Document 객체나 HTML 문서의 요소에서 일어나면 대상 객체를 결정하기 위해 이벤트의 전파 발생

이벤트 버블링(event bubbling)

• 이벤트가 발생한 요소부터 시작하여 DOM 트리를 따라 위쪽으로 올라가며 전파되는 과정을 의미
• 즉, 이벤트가 발생한 요소에 연결된 이벤트 핸들러가 실행된 후, 그 부모 요소에 연결된 핸들러가 실행
• 또다시 그 부모 요소에 등록된 핸들러가 실행되며, 마지막에는 Document 객체까지 계속 전파
• 이러한 전파를 통해 위와 같은 이벤트의 위임(event delegation)이 가능

이벤트 메서드

제이쿼리는 on() 메서드 이외에도 자바스크립트 이벤트와 관련된 다양한 메서드를 제공
마우스 이벤트와 관련된 메서드

.click()	자바스크립트의 "click" 이벤트와 이벤트 핸들러를 연결하거나, "click" 이벤트를 발생시킴.
.dblclick()	자바스크립트의 "dblclick" 이벤트와 이벤트 핸들러를 연결하거나, "dblclick" 이벤트를 발생시킴.
.hover()	자바스크립트의 "mouseenter"와 "mouseleave" 이벤트를 같이 인벤트 핸들러와 연결함.
.mousedown()	자바스크립트의 "mousedown" 이벤트와 이벤트 핸들러를 연결하거나, "mousedown" 이벤트를 발생시킴.
.mouseenter()	해당 요소 위로 마우스가 진입할 때 발생하는 이벤트와 이벤트 핸들러를 연결하거나, 마우스 진입 이벤트를 발생시킴.
.mouseleave()	해당 요소에서 마우스가 빠져나갈 때 발생하는 이벤트와 이벤트 핸들러를 연결하거나, 마우스가 빠져나가는 이벤트를 발생시킴.
.mousemove()	자바스크립트의 "mousemove" 이벤트와 이벤트 핸들러를 연결하거나, "mousemove" 이벤트를 발생시킴.
.mouseout()	자바스크립트의 "mouseout" 이벤트와 이벤트 핸들러를 연결하거나, "mouseout" 이벤트를 발생시킴.
.mouseover()	자바스크립트의 "mouseover" 이벤트와 이벤트 핸들러를 연결하거나, "mouseover" 이벤트를 발생시킴.
.mouseup()	자바스크립트의 "mouseup" 이벤트와 이벤트 핸들러를 연결하거나, "mouseup" 이벤트를 발생시킴.
.keypress()	메소드는 자바스크립트의 "keypress" 이벤트와 이벤트 핸들러를 연결

$(function() {
    $("button").click(function() {    // 모든 <button>에 click 이벤트 설정함.
        $("#clickText").css("color", "red");
        $("#dblclickText").css("color", "black");
    });

    $("button").dblclick(function() { // 모든 <button>에 dblclick 이벤트 설정함.
        $("#dblclickText").css("color", "red");

        $("#clickText").css("color", "black");
    });
});


$(function() {

    $("button").hover(function() { // 모든 <button>에 hover 이벤트 설정함.

        $("#text").append("마우스가 버튼 위로 진입하거나 빠져나갔어요!<br>");
    });
});

// <input>에 키보드로 문자를 입력할 때마다 입력한 문자에 해당하는 유니코드(unicode) 숫자를 출력
$(function() {

    // 아이디가 "key"인 요소에 keypress 이벤트 설정함.

    $("#key").on("keypress", function(event) {

        $("#str").html(event.type + " : " + event.which);
    });
});

• Shift, Esc, Delete와 같은 화면에 출력되지 않는 키(modifier and non-printing keys)들은 "keydown" 이벤트는 발생시키지만, "keypress" 이벤트는 발생 X

키보드 이벤트와 관련된 메서드

.keydown()	자바스크립트의 "keydown" 이벤트와 이벤트 핸들러를 연결하거나,  "keydown" 이벤트를 발생시킴.
.keyup()	자바스크립트의 "keyup" 이벤트와 이벤트 핸들러를 연결하거나, "keyup" 이벤트를 발생시킴.
.keypress()	자바스크립트의 "keypress" 이벤트와 이벤트 핸들러를 연결하거나, "keypress" 이벤트를 발생시킴.
.focusin()	자바스크립트의 "focusin" 이벤트와 이벤트 핸들러를 연결
.focusout()	자바스크립트의 "focusout" 이벤트와 이벤트 핸들러를 연결

$(function() {
    // 아이디가 "focus"인 요소에 focusin 이벤트를 설정함.
    $("#focus").on("focusin", function(event) {
        $(this).css("backgroundColor", "yellow");
    });

    // 아이디가 "focus"인 요소에 focusout 이벤트를 설정함.
    $("#focus").on("focusout", function(event) {
        // this : this 키워드는 현재 선택되어 있는 요소 그 자체를 명시
        $(this).css("backgroundColor", "white");
    });
});

입력 양식 이벤트와 관련된 메소드

.blur()	자바스크립트의 "blur" 이벤트와 이벤트 핸들러를 연결하거나, "blur" 이벤트를 발생시킴.
.change()	자바스크립트의 "change" 이벤트와 이벤트 핸들러를 연결하거나, "change" 이벤트를 발생시킴.
.select()	자바스크립트의 "select" 이벤트와 이벤트 핸들러를 연결하거나, "select" 이벤트를 발생시킴.
.submit()	자바스크립트의 "submit" 이벤트와 이벤트 핸들러를 연결하거나, "submit" 이벤트를 발생시킴.
.focus()	자바스크립트의 "focus" 이벤트와 이벤트 핸들러를 연결하거나, "focus" 이벤트를 발생시킴.
.focusin()	"focusin" 이벤트와 이벤트 핸들러를 연결하거나, "focusin" 이벤트를 발생시킴.
.focusout()	"focusout" 이벤트와 이벤트 핸들러를 연결하거나, "focusout" 이벤트를 발생시킴.

Reference

https://www.tcpschool.com/jquery/jq_event_delegation

코딩교육 티씨피스쿨