JavaScript 이벤트 위임 기술 설명

설명하기 전에 먼저 성능에 대해 이야기하겠습니다.

전체 페이지에 버튼 수가 많으면 각 버튼에 이벤트 핸들러를 바인딩해야 합니다. 이는 성능에 영향을 미칩니다.

첫째, 모든 함수는 객체이며, 객체가 메모리를 많이 차지하게 됩니다.

둘째, DOM 액세스 횟수가 증가합니다. 실제로 이벤트 핸들러를 효과적으로 활용하는 방법에 대한 좋은 솔루션이 있습니다.

1. 이벤트 위임

이벤트가 너무 많은 문제에 대한 솔루션 handlers는 이벤트 위임 기술입니다.

이벤트 위임 기술은 이벤트 버블링을 활용합니다.

이벤트 핸들러를 트리거해야 하는 상위 요소에 바인딩할 수 있습니다.

HTML 코드:

<ul id="mylist">
        <li id="li_1">sdsdsd</li>
        <li id="li_2">sdsdsd</li>
        <li id="li_3">sdsdsd</li>
</ul>

이제 이 3개의 li에 대한 이벤트 핸들러를 바인딩해야 합니다.

ul만 바인딩해야 합니다. 정의된 이벤트 핸들러.

js 코드:

obj.eventHandler($("mylist"),"click",function(e){
                    e = e || window.event;
                    switch(e.target.id){    //大家应该还记得target是事件目标,只要点击了事件的目标元素就会弹出相应的alert.
                        case "li_1":
                        alert("li_1");
                        break;
                        case "li_2":
                        alert("li_2");
                        break;
                        case "li_3":
                        alert("li_3");
                        break
                    }
                })

복잡한 웹 애플리케이션의 경우 이러한 종류의 이벤트 위임이 매우 실용적입니다.

이 방법을 사용하지 않고 하나씩 바인딩하면 이벤트 핸들러가 셀 수 없이 많아지게 됩니다.

그렇습니다.