JavaScript 이벤트 위임에 대한 자세한 소개(코드 포함)

이 글은 JavaScript 이벤트 위임(코드 포함)에 대한 자세한 소개를 제공합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

이벤트 위임(이벤트 프록시라고도 함)은 이벤트 버블링을 사용하여 하나의 이벤트 핸들러만 지정하여 특정 유형의 모든 이벤트를 관리합니다.

인터넷에서 이벤트 위임에 대한 "빠른 배송 받기"의 매우 생생한 예가 있습니다. 여기서는 이를 약간 수정하고 확장한 다음 프로그램을 통해 이벤트 위임의 메커니즘을 설명하겠습니다.

회사에 직원이 3명이 있는데, 특급배송 주소는 회사입니다. 특급배송이 올 때마다 택배기사가 그 직원에게 전화해서 알리고, 그 직원은 그 전화를 받고 물건을 찾으러 갑니다.

사원 ID	사원 이름	연락처
A	A	111111
B	B	222222
C	C	333333

페이지에 해당합니다. 즉, 각 직원은

<ul id="前台工作人员">
    <li id="A">员工甲</li>
    <li id="B">员工乙</li>
    <li id="C">员工丙</li>
</ul>

택배를 받기 위해 전화를 받는 각 직원의 행동이 이벤트라고 가정합니다. onclick 이벤트:

A.onclik = function() {
    收取快递；
};
B.onclick = function() {
    收取快递；
};
C.onclick = function() {
    收取快递；
};

위의 구현은 일반적으로 각 직원을 반복하고 이벤트를 추가해야 합니다.

/*程序1*/
var aUl = document.getElemengtByID("前台工作人员");
var aLi = aUl.getElemengtsByTagName("li");
for (var i = 0; i < aLi.length; i++) {
    aLi[i].onclick = function() {
        收取快递;
    }
}

각 직원에 대한 이벤트를 설정하면 중복 코드가 생성되고 메모리를 차지하며, 여러 DOM 작업(DOM 노드 상호 작용 포함)을 수행하여 페이지 성능에 영향을 줍니다.

“DOM 작업을 줄이는 것이 성능 최적화의 주요 아이디어 중 하나입니다”

그래서 우리는 자연스럽게 생각했습니다. 왜 프론트 직원이 우리를 위한 특급 배송에 서명하도록 하면 안 될까요?

<ul id="前台工作人员">
    <li id="A">员工甲</li>
    <li id="B">员工乙</li>
    <li id="C">员工丙</li>
</ul>

/*程序2*/
var tel = document.getElementById("前台工作人员");
tel.onclick = function() {
    收取快递;
}

이때 택배 직원이 직원 A에게 패키지를 픽업하라고 전화했지만(onclick) 직원 A의 DOM 노드

에 해당 이벤트(onclick)가 없으므로 이 이벤트는 "bubble"을

의 상위 요소인

에서
에 onclick 처리 이벤트가 있음을 발견하여 해당 이벤트가 실행되었고 프론트 데스크 직원이 택배를 수거했습니다.

이렇게 하면 코드의 양이 줄어들 뿐만 아니라 DOM 노드와의 상호 작용 횟수도 줄어드는 것을 볼 수 있습니다.

또 다른 장점: 새 DOM 노드를 추가하면 상위 요소의 이벤트 효과가 자동으로 전달됩니다. 즉, 신입사원 딩(Ding)이 회사에 들어오면 그를 위한 별도의 이벤트를 준비하지 않고 프론트 데스크 직원이 직접 딩(Ding) 직원이 택배 픽업을 도와줄 것입니다.

예를 들어 신입사원 D가 회사에 왔을 때:

...
<input type="button" id="btn" value="添加新员工">
...

...
/*程序3*/
var aBtn = document.getElementById("btn");
aBtn.onclick = function() {
    var aLi = document.createElement("li");
    oLi.innerHTML = "员工丁";
    aUl.appendChild(aLi);
}
...

이벤트 위임을 사용하지 않는 프로그램에서는 새로 입사한 D사원에 대한 이벤트가 없습니다. 프로그램 1을 포함하는 함수를 사용해야 합니다.

/*程序4*/
function pro1() {
    var aUl = document.getElemengtByID("前台工作人员");
    var aLi = aUl.getElemengtsByTagName("li");
    for (var i = 0; i < aLi.length; i++) {
        aLi[i].onclick = function() {
            收取快递;
        }
    }
}

그런 다음 새 직원을 추가하는 프로그램 끝에서 이 함수를 실행합니다.

/*程序5*/
var aBtn = document.getElementById("btn");
aBtn.onclick = function() {
    ...
    pro1();
}

이것의 단점은 명백합니다. DOM 노드 상호 작용 수가 기하급수적으로 증가한다는 것입니다.
이를 구현하기 위해 이벤트 위임 메커니즘을 사용하면 이 문제는 하위 요소 노드의 onclick 이벤트가 상위 요소 노드에서 직접 실행됩니다.

이 시점에서 우리는 동일한 종류의 이벤트에 대해 이벤트 위임을 사용하여 상위 요소 노드에 배치하는 것이 매우 편리하다고 생각할 것입니다. 하지만 서로 다른 하위 요소 노드에 대해 서로 다른 이벤트를 실행하려는 경우에도 이벤트 위임을 사용할 수 있나요?

답은 그렇습니다.

예를 들어, 위의 회사 직원 3명은 항상 고정 브랜드의 특급 배송을 사용합니다.

• 직원 A는 STO Express가 저렴하기 때문에 이를 선호하고 STO는 파크 게이트까지만 배송합니다.
• 직원 B는 JD입니다. com 회원이고 항상 JD.com express를 구매합니다. 비즈니스 제품의 경우 JD Express에서 아래층으로 배송합니다.
• 직원 C는 SF Express VIP이며 SF Express는 그가 위치한 층의 로비까지 배송합니다.

3명이 전화를 받은 후 프런트 데스크 직원이 물품을 수령하기 위해 다른 장소로 가야 했습니다. 이벤트 위임을 사용하지 않는 프로그램의 경우 각 사람마다 고유한 처리 이벤트를 설정해야 합니다.

var A = document.getElementById("A");
var B = document.getElementById("B");
var C = document.getElementById("C");

A.onclick = function() {
    去园区大门取快递；
}
B.onclick = function() {
    去楼下取快递；
}
C.onclick = function() {
    去本层大厅取快递；
}

3개 이상의 DOM 작업이 필요하며 해당 노드마다 이벤트 기능이 설정됩니다.

그리고 이벤트 위임을 사용하는 경우:

var aUl = document.getElemengtByID("前台工作人员");
aUl.onclick = function (ev) {
    var target = ev || window.event; /*兼容浏览器*/
    var target = ev.target || ev.srcElement; /*兼容浏览器*/
    if (target.nodeName.toLocaleLowerCase() == "li") {
        switch(target.id) {
            case "A" :
                去园区大门取快递;
                break;
            case "B" :
                去楼下取快递;
                break;
            case "C" :
                去本层大厅取快递;
                break;
        }
    }
}

이렇게 하면 DOM 작업이 하나만 있고 다른 작업은 JS에서 수행되므로 웹 페이지 성능을 효과적으로 향상시킬 수 있습니다.

위는 JS 이벤트 위임의 기본 아이디어입니다. 즉, 이벤트 버블링 기능을 사용하여 이벤트를 관리하고, 중복되는 코드를 줄이고, 불필요한 생성을 줄이고, 대화형 작업을 줄여 메모리를 절약하고 성능을 향상시킵니다.

이벤트 버블링

이벤트 버블링은 DOM 요소 노드가 트리거되는 경우입니다. 해당 노드에 해당 이벤트가 없는 경우 해당 이벤트가 있는지 확인하고 그렇지 않은 경우 위쪽으로 계속 확인합니다. 그에 상응하는 것이 이벤트 캡쳐

위 내용은 JavaScript 이벤트 위임에 대한 자세한 소개(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!