이번에는 동적으로 추가된 요소(코드 포함)에 이벤트를 추가하는 방법을 소개하겠습니다. 동적으로 추가된 요소에 이벤트를 추가할 때 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 예를 들어, 이와 같이 for 루프를 통해 li에 추가된 이벤트는 새로 추가된 li에 바인딩될 수 없습니다. 자세한 이유는 여기에서 설명하지 않습니다. 그렇다면 이 문제를 해결하는 방법도 간단합니다. 이벤트 위임을 통해 해결하는 것입니다. 위의 코드를 간단히 수정하면 됩니다. 이 기사의 경우 더 흥미로운 내용을 보려면 PHP에 주목하세요.
추천 도서:
JS 이벤트 위임 사용에 대한 자세한 설명Vue.js에서 계산 사용에 대한 자세한 설명위 내용은 JS는 동적으로 추가된 요소에 이벤트를 추가합니다(코드 첨부).의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
