집 >웹 프론트엔드 >JS 튜토리얼 >JS 이벤트 위임이란 무엇입니까? js 이벤트 위임을 사용하면 어떤 이점이 있나요?

JS 이벤트 위임이란 무엇입니까? js 이벤트 위임을 사용하면 어떤 이점이 있나요?

不言원래의: 2018-08-29 17:37:256040검색

JS 이벤트 위임이란 무엇인가요? 이벤트 위임을 사용하면 어떤 이점이 있나요? 많은 친구들이 이런 질문을 할 것이라고 생각하므로 다음 기사에서는 js 이벤트 위임의 개념과 js 이벤트 위임 사용의 이점에 대해 설명하겠습니다.

1.JS 이벤트 위임이란?

이벤트 버블링을 사용하여 동적 요소 이벤트 바인딩을 전문 용어로 이벤트 위임이라고 합니다. 간단히 말해서 이벤트를 상위 요소에 바인딩하여 하위 요소의 버블링 이벤트를 모니터링하고 어떤 하위 요소를 알아내는 것입니다. 이 이벤트는 원래 특정 요소에 추가되었지만 이벤트를 완료하기 위해 다른 요소에 추가한 것으로 더 일반적으로 알려져 있습니다. (이벤트란 무엇입니까? JavaScript 중국어 참조 매뉴얼을 참조하세요.)

예를 들어 다음 예는 다음과 같습니다. 기본 js는 이벤트 위임을 구현합니다.

<!DOCTYPE html>
<html>
<head>
<title>事件委托测试</title>
</head>
<body>
<style type="text/css">
*{margin: 0;padding: 0;}
a{text-decoration: none;}
ul,li{list-style: none;}
div{display: block;width: 500px;padding: 200px 0 0 200px;}
div ul li{display: block;width: 100%;text-align: center;height: 35px;line-height: 35px;}
div ul li:nth-child(2n){background: #f00;}
</style>
<div>
    <ul>
        <li><a>测试1</a></li>
        <li><a>测试2</a></li>
        <li><a>测试3</a></li>
        <li><a>测试4</a></li>
        <li><a>测试5</a></li>
        <li><a>测试6</a></li>
        <li><a>测试7</a></li>
        <li><a>测试8</a></li>
    </ul>
</div>
<script type="text/javascript">
document.getElementsByTagName("ul")[0].addEventListener(&#39;click&#39;,function(e){
    alert("点击的内容是："+e.target.innerHTML);
});
</script>
</body>
</html>

참고: js에서 이벤트 위임을 구현하는 세 단계가 있습니다.

첫 번째 단계: 상위 요소에 이벤트 바인딩
ul 요소에 바인딩 이벤트를 추가하고 addEventListener를 통해 클릭 이벤트 클릭에 바인딩을 추가합니다

2단계: 하위 요소의 버블링 이벤트 듣기
기본값은 버블링입니다. li가 버블링할 하위 요소를 클릭하세요

3단계: 이벤트가 발생한 하위 요소를 찾습니다

익명 콜백 함수의 매개변수 e는 이벤트 객체를 수신하는 데 사용됩니다. 트리거된 이벤트의 대상은 target

2를 통해 획득됩니다. js 이벤트 위임 이점:

이벤트 위임의 이점 1: 이벤트 위임 기술은 각 단어 요소에 이벤트 리스너를 추가하는 것을 방지하고 작업 수를 줄일 수 있습니다. DOM 노드를 사용하여 브라우저 다시 그리기 및 재배열을 줄이고 코드 효율성 성능을 향상시킵니다.

예를 들어 보면 li를 동적으로 추가해야 합니다. li

<input type="button" id="btn" /><ul id="ul">
  <li>aaaaaaaa</li>
  <li>bbbbbbbb</li>
  <li>cccccccc</li></ul>

동적으로 추가하려면 버튼을 클릭하세요. 이벤트 위임 없이 다음을 수행합니다.

window.onload = function(){
  var oUl = document.getElementById("ul");
  var aLi = oUl.getElementsByTagName("li");
  var oBtn = document.getElementById("btn");
  var iNow = 4;
  for(var i=0; i<aLi.length; i++){
    aLi[i].onmouseover = function(){
      this.style.background = "red";
    }
    aLi[i].onmouseout = function(){
      this.style.background = "";
    }
  }

  oBtn.onclick = function(){
    iNow ++;
    var oLi = document.createElement("li");
    oLi.innerHTML = 1111 *iNow;
    oUl.appendChild(oLi);
  }

  
}

이렇게 하면 배경색을 변경하기 위해 버튼을 클릭할 때 새로 추가된 li에 마우스 이동 이벤트가 없음을 알 수 있습니다.

추가를 클릭하면 이미 for 루프가 실행되었기 때문입니다.

그런 다음 이벤트 위임을 사용하여 이를 수행합니다. 즉, html은 그대로 유지됩니다

window.onload = function(){
  var oUl = document.getElementById("ul");
  var aLi = oUl.getElementsByTagName("li");
  var oBtn = document.getElementById("btn");
  var iNow = 4;

  oUl.onmouseover = function(ev){
    var ev = ev || window.event;
    var target = ev.target || ev.srcElement;
    //alert(target.innerHTML);
    if(target.nodeName.toLowerCase() == "li"){
    target.style.background = "red";
    }
  }
  oUl.onmouseout = function(ev){
    var ev = ev || window.event;
    var target = ev.target || ev.srcElement;
    //alert(target.innerHTML);
    if(target.nodeName.toLowerCase() == "li"){
    target.style.background = "";
    }
  }
  oBtn.onclick = function(){
    iNow ++;
    var oLi = document.createElement("li");
    oLi.innerHTML = 1111 *iNow;
    oUl.appendChild(oLi);
  }
}

이벤트 위임의 이점 2:이벤트 위임을 사용하면 상위 요소만 DOM과 상호 작용하고 다른 작업은 JS 가상 메모리에서 완료되므로 성능이 크게 향상됩니다.

JS 이벤트 위임이란 무엇입니까? js 이벤트 위임을 사용하면 어떤 이점이 있나요?

관련 기사