집 > 기사 > 웹 프론트엔드 > JS는 이벤트 위임을 사용하여 요소에 이벤트를 추가합니다.

JS는 이벤트 위임을 사용하여 요소에 이벤트를 추가합니다.

php中世界最好的语言원래의: 2018-05-09 10:35:261499검색

이번에는 JS가 이벤트 위임을 사용하여 요소에 이벤트를 추가하는 경우 노트가 무엇인지 보여 드리겠습니다. JS는 이벤트 위임을 사용하여 요소에 이벤트를 추가합니다.

일상적인 개발에서 js를 통해 일부 요소를 생성하는 경우가 있지만 원래의 for 루프 메서드를 사용하여 생성된 노드에 이벤트를 추가하면 작동하지 않는 경우가 많습니다.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>js动态添加事件</title>
</head>
<body>
 <ul id="out-ul">
  <li class="out-li">123</li>
  <li class="out-li">123</li>
  <li class="out-li">123</li>
 </ul>
 <button id="btn">添加</button>
 <script>
  document.getElementById('btn').addEventListener('click',function(){
   var htmlFragment='<li>我是新增的li</li>';
   var addLi=document.createElement('li');
   addLi.innerHTML=htmlFragment;
   outUl.appendChild(addLi);
  },false);
  var outUl=document.getElementById('out-ul')
  var outLi=outUl.getElementsByClassName('out-li');
  for(var i=0;i<outLi.length;i++){
   outLi[i].onclick=function(){
    alert(1);
   }
  }
 </script>
</body>
</html>

예를 들어 li에 추가된 이벤트는 다음과 같습니다. for 루프는 새로 추가된 li에 바인딩할 수 없습니다. 자세한 이유는 여기에서 설명하지 않습니다. 그럼 실제로 해결하는 방법은 간단합니다. 즉, 이벤트 위임을 통해 해결하고, 코드를 직접 입력하면 됩니다.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>js动态添加事件</title>
</head>
<body>
 <ul id="out-ul">
  <li class="out-li">123</li>
  <li class="out-li">123</li>
  <li class="out-li">123</li>
 </ul>
 <button id="btn">添加</button>
 <script>
  var outUl=document.getElementById('out-ul')
  var outLi=outUl.getElementsByClassName('out-li');
  document.getElementById('btn').addEventListener('click',function(){
   var htmlFragment='<li>我是新增的li</li>';
   var addLi=document.createElement('li');
   addLi.innerHTML=htmlFragment;
   outUl.appendChild(addLi);
  },false);
  outUl.addEventListener('click',function(e){
   e=e || window.event;//兼容ie
   alert(e.target.innerHTML);
  }, false);
 </script>
</body>
</html>

이렇게 하면 새로 추가된 코드라도 li click 이벤트가 발생될 수 있지만 여기서는 jquery의 자세한 방법을 소개하지 않습니다. 기본 js와 jquery의 해결 원리는 실제로 동일합니다. 모두가 네이티브 메소드를 이해했고 jquery 메소드도 잘 이해할 수 있다고 믿습니다.

이 기사의 사례를 읽고 나면 메소드를 마스터했다고 믿습니다. 더 흥미로운 정보를 보려면 다른 관련 기사를 주목하십시오. PHP 중국어 웹사이트에서!