자바스크립트 이벤트 위임이란 무엇을 의미하나요?

JavaScript에서 이벤트 위임은 이벤트 호스팅 또는 이벤트 프록시라고도 하며, 이는 대상 노드의 이벤트를 상위 노드에 바인딩하는 것입니다. 이벤트 버블링 원리를 사용하여 상위 요소를 사용하여 특정 유형의 모든 이벤트를 관리합니다. to 하위 요소에 대한 특정 유형의 이벤트 처리 방법을 나타냅니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

JavaScript에서는 이벤트 위임(delegate)을 이벤트 호스팅 또는 이벤트 프록시라고도 합니다. 이벤트 버블링 원리를 사용하여 특정 유형의 모든 이벤트를 관리하고 상위 요소를 사용하여 특정 유형의 이벤트 처리 방법을 나타냅니다. 하위 요소의 .

이 작업의 이점: 코드 최적화, 실행 성능 향상, HTML과 JavaScript의 진정한 분리, 동적으로 노드를 추가하거나 삭제하는 과정에서 등록된 이벤트의 손실을 방지합니다.

예제 1

다음 예에서는 목록 구조의 각 목록 항목에 클릭 이벤트를 바인딩하는 일반적인 방법을 사용합니다. 목록 항목을 클릭하면 해당 항목에 포함된 텍스트 정보를 묻는 프롬프트 대화 상자가 나타납니다. 현재 노드. 그러나 목록 항목을 목록 상자에 동적으로 추가하면 새로 추가된 목록 항목이 클릭 이벤트에 바인딩되지 않습니다. 이는 우리가 원하는 것과는 반대입니다.

<button id="btn">添加列表项目</button>
<ul id="list">
    <li>列表项目1</li>
    <li>列表项目2</li>
    <li>列表项目3</li>
</ul>
<script>
    var ul = document.getElementById("list");
    var lis = ul.getElementsByTagName("li");
    for (var i = 0; i < lis.length; i ++) {
        lis[i].addEventListener(&#39;cluick&#39;, function (e) {
            var e = e || window.event;
            var target = e.target || e.srcElement;
            alert(e.target.innerHTML);
        }, false);
    }
    var i = 4;
    var btn = document.getElementById("btn");
    btn.addEventListener("click", function() {
        var li = document.createElement("li");
        li.innerHTML = "项目列表" + i++;
        ul.appendChild(li);
    });
</script>

예제 2

다음 예에서는 이벤트 위임 기술과 이벤트 전파 메커니즘을 사용하여 목록 상자 ul 요소에 클릭 이벤트를 바인딩합니다. 이벤트가 상위 노드 ul에 전파되면 클릭 이벤트가 캡처됩니다. 그러면 이벤트가 처리됩니다. 함수는 현재 이벤트 응답 노드 유형을 감지합니다. li 요소인 경우 추가로 다음 코드를 실행하고, 그렇지 않으면 이벤트 처리 함수에서 빠져나와 응답을 종료합니다.

<button id="btn">添加项目列表</button>
<ul id="list">
    <li>列表项目1</li>
    <li>列表项目2</li>
    <li>列表项目3</li>
</ul>
<script>
    var ul = document.getElementById("list");
    ul.addEventListener(&#39;click&#39;, function(e) {
        var e = e || window.event;
        var target = e.target || e.srcElement;
        if (e.target && e.target.nodeName.toUpperCase()=="LI") {
            alert(e.target.innerHTML);
        }
    }, false);
    var i = 4;
    var btn = document.getElementById("btn");
    btn.addEventListener("click", function () {
        var li = document.createElement("li");
        li.innerHTML = "项目列表" + i++;
        ul.appendChild(li);
    });
</script>

페이지에 많은 수의 요소가 있고 각 요소가 하나 이상의 이벤트를 등록하는 경우 성능에 영향을 미칠 수 있습니다. 업데이트된 DOM 노드에 액세스하고 수정할 때 프로그램 속도가 느려집니다. 특히 로드(또는 DOMContentReady) 이벤트에서 이벤트 연결 프로세스가 발생할 때 이는 모든 풍부한 대화형 웹 페이지에 바쁜 시간입니다. 또한 브라우저는 각 이벤트 핸들러의 기록을 저장해야 하는데, 이는 더 많은 메모리를 차지하게 됩니다.

【추천 학습: javascript 고급 튜토리얼】

위 내용은 자바스크립트 이벤트 위임이란 무엇을 의미하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!