第一种 jquery写法
$(‘.father‘).on(‘click‘,‘,child‘,function(){}) $(document).on(‘click‘,‘,child‘,function(){})
第二种 js原生写法
document.querySelector(‘body‘).addEventListener(‘click‘,function (e) { if(e.target.classList.contains(‘.child‘)){ //具体操作 } }) document.querySelector(‘.father‘).addEventListener(‘click‘,function (e) { if(e.target.classList.contains(‘.child‘)){ //具体操作 } }) //可以直接取id,father是就是id father.addEventListener(‘click‘,function (e) { if(e.target.id == ‘child‘ ){ //具体操作 } }) <ul id="list"> <li id="item1" >item1</li> <li id="item2" >item2</li> <li id="item3" >item3</li> </ul> <script> var list = document.getElementById("list"); document.addEventListener("click",function(event){ var target = event.target; if(target.nodeName == "LI"){ alert(target.innerhtml); } }) var node=document.createElement("li"); var textnode=document.createTextNode("item4"); node.appendChild(textnode); list.appendChild(node); </script>
第三种 定时器写法
var id = setInterval(function () { console.log(‘定时器循环事件绑定‘) },1000);
但是有些特殊情况会有bug,对于动态添加的这些事件是需要解绑的,具体解绑方法请参考原文https://juejin.im/post/5a1a350d51882560e3565665
还有一篇介绍事件绑定、事件委托、事件监听的很好的文章,再此推荐一下http://blog.xieliqun.com/2016/08/12/event-delegate/