JS를 사용하여 동적 요소에 이벤트를 추가하는 방법

php中世界最好的语言
풀어 주다: 2018-06-14 14:49:02
원래의
2123명이 탐색했습니다.

이번에는 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>
로그인 후 복사

실행 효과:

예를 들어 다음을 통해 for 루프에서 li에 추가된 이벤트는 새로 추가된 li에 바인딩될 수 없습니다. 자세한 이유는 여기에서 설명하지 않습니다. 그렇다면 이 문제를 해결하는 방법도 간단합니다. 이벤트 위임을 통해 직접 코드를 입력하면 됩니다. 위의 코드는 간단히 수정됩니다.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>www.jb51.net 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>
로그인 후 복사

사례를 읽으신 후 방법을 익히셨을 것입니다. 이 기사에서 더 흥미로운 내용을 보려면 중국 웹사이트의 PHP 기타 관련 기사를 주목하세요!

추천 도서:

실제 프로젝트에서 jquery filter()를 사용하는 방법

nodejs+server.js을 사용하여 웹 서버 만들기

위 내용은 JS를 사용하여 동적 요소에 이벤트를 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!