js 이벤트 위임 예시 요약

이벤트 위임은 이벤트 프록시라고도 합니다. 간단히 말해서 이벤트를 상위 요소에 바인딩하고 하위 요소의 버블링 이벤트를 수신합니다. 이벤트 버블링이 무엇인지 궁금하시다면, 이벤트 버블링에 대한 자세한 설명이 있는 js의 이벤트를 클릭해 보시기 바랍니다. 이벤트 위임을 사용할 때 무엇을 알아야 합니까?

1. 이벤트 위임을 사용할 때 개념도 알아야 합니다: 이벤트 객체 아래의 이벤트 소스

이벤트 소스: 이벤트에서는 현재 동작하는 요소가 이벤트 소스입니다. 예를 들어, a 레이블을 클릭하고 onclick 이벤트가 발생하면 이벤트 소스는 a 레이블입니다. li를 클릭하고 onclick 이벤트가 발생하면 이벤트 소스는 li입니다.

IE 아래: window.event.srcElement;

Standard: event.target

호환성 처리: var target = ev.target||ev.srcElement

2. 현재 요소의 태그 이름을 찾습니다. 대문자이므로 소문자로 변환하려면 toLowerCase() 메서드를 사용해야 합니다.)

너무 많이 썼는데 이벤트 위임을 사용하면 어떤 이점이 있나요?

1. 성능을 향상시킬 수 있습니다

2. 새로 추가된 요소에는 이전 이벤트도 있습니다

반영되는 부분은 예시를 통해 느낌을 보도록 하겠습니다

HTML 코드

<ul id="ul1">
    <li>1111111111</li>
    <li>1111111111</li>
    <li>1111111111</li>
    <li>1111111111</li>
    <li>1111111111</li>
</ul>

효과는 li로 마우스를 이동하면 해당 li의 배경색이 빨간색으로 바뀌고, 마우스를 밖으로 이동하면 원래 색상으로 변한다고

일반적인 필기 방법을 사용하면 이렇습니다

<script>
var oUl = document.querySelector(&#39;#ul1&#39;);
var aLi = oUl.querySelectorAll(&#39;li&#39;);
for(var i=0; i<aLi.length; i++){
    aLi[i].onmouseover = function(){
        this.style.background = &#39;red&#39;;
    }
    aLi[i].onmouseout = function(){
        this.style.background = &#39;&#39;;
    }
}
</script>

이벤트 위임 사용법을 살펴보겠습니다

<script>
var oUl = document.querySelector(&#39;#ul1&#39;);
oUl.onmouseover = function(ev){
    var ev = ev||event;//兼容性处理
    var target = ev.target||ev.srcElement;
    if(target.nodeName.toLowerCase()==&#39;li&#39;){
        target.style.background =&#39;red&#39;;
    }
}
oUl.onmouseout = function(ev){
    var ev = ev||event;
    var target = ev.target||ev.srcElement;
    if(target.nodeName.toLowerCase()==&#39;li&#39;){
        target.style.background =&#39;&#39;;
    }
}
</script>

위의 방법은 각 Li에 클릭 이벤트를 바인딩해야 합니다. 다음 방법에서는 Lis의 수가 적을 경우에만 클릭 이벤트를 바인딩하면 됩니다. Lis가 많으면 이벤트 위임으로 성능이 크게 향상될 수 있다고 생각합니다.

예제 2,

HTML 코드

<ul id="ul1">
    <li>1111111111</li>
    <li>1111111111</li>
    <li>1111111111</li>
    <li>1111111111</li>
    <li>1111111111</li>
</ul>
按钮

버튼을 클릭하면 li가 ul에 추가되고 모든 마우스가 안으로 들어가면 li의 배경색이 변경되고, 마우스가 밖으로 움직이면 배경색이 변경됩니다. 다시 말해, 일반적인 방법을 사용하면 li를 추가할 때마다 추가해야 한다는 것을 알고 있습니다. 얼마나 번거로운지 직접 해보면 알겠지만, 이벤트 위임을 사용하면 입주 및 퇴사 이벤트를 추가할 필요가 없습니다. 매번 추가되는 내용인데 아래 코드를 보세요. (다들 아는 내용이라 더 이상 쓰지 않겠습니다. 아래는 그냥 이벤트 위임을 활용해서 작성하는 방법입니다.)

<script>
var oUl = document.querySelector(&#39;#ul1&#39;);
var oBtn = document.querySelector(&#39;#btn&#39;);
oUl.onmouseover = function(ev){
    var ev = ev||event;
    var target = ev.target||ev.srcElement;
    if(target.nodeName.toLowerCase()==&#39;li&#39;){
        target.style.background =&#39;red&#39;;
    }
}
oUl.onmouseout = function(ev){
    var ev = ev||event;
    var target = ev.target||ev.srcElement;
    if(target.nodeName.toLowerCase()==&#39;li&#39;){
        target.style.background =&#39;&#39;;
    }
}
oBtn.onclick = function(){
    var ali = document.createElement(&#39;li&#39;);
    ali.innerHTML = &#39;1111111111111&#39;;
    oUl.appendChild(ali);//不管我们在ul里面添加多少个li我么都不需要再次为其添加绑定事件
}
</script>

위 내용을 읽어보신 후 , 이벤트 위임이 정말 유용하다고 생각하시나요? 그러니 지금 사용해보세요!

관련 추천 : 事js 사건위탁 자세한 사항은

See More

위 내용은 js 이벤트 위임 예시 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!