JS实现为动态添加的元素添加事件函数示例[基于事件委托]

本文说明了JS可以向动态添加的元素添加事件函数。分享给大家参考，如下：

在我们的日常开发中，我们有时会通过js创建一些元素，但是如果我们使用原始的for循环向创建的节点添加事件，它将不起作用：

！doctype html lang=' en ' head meta charset=' utf-8 ' 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 ' add/buttonscriptdocument . getelementbyid(')。addeventlistener ('click '，function () {var html fragment=' Li我是var addLi=document . create element(' Li ')；addLi.innerHTML=htmlFragmentoutul . appendchild(AddLi)；}，false)；var outUl=document . getelementbyid(' out-ul ')var outLi=outUl . getelementsbyclasname(' out-Li ')；for(var I=0；ioutLi.lengthI){ OiL[I]。onclick=function(){ alert(1)；} }/脚本/正文/html运行效果：

例如，通过For循环添加到li的事件不能绑定到新添加的li，这里不解释详细原因。那么如何解决这个，其实方法也很简单，就是通过事件委托来解决，直接编码，上面的代码就是简单的转化：

！doctype html lang=' en ' head meta charset=' utf-8 ' 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按钮ID=' BTN ' add/button script var out ul=Document . getelementbyid(' out-ul ')var out Li=out . getelementsbyclass name(' out-Li Document)。getelementbyid ('BTN ')。addeventlistener ('click '，function(){ var html fragment=' LiI是新的Li/Li '；var addLi=document . create element(' Li ')；addLi.innerHTML=htmlFragmentoutul . appendchild(AddLi)；}，false)；outUl.addEventListener('click ')，函数(e){ e=e | | window . event；//兼容ie alert(e . target . innerhtml)；}，false)；/脚本/正文/html运行效果：

这样，即使是新添加的li click事件也可以被触发，但是jquery的详细方式这里就不介绍了。原生js的解决原理其实和jquery是一样的。相信大家都懂原著，jquery方法也能很好的理解

PS:关于javascript事件描述，请参考javascript事件和功能描述百科：http://tools.jb51.net/table/javascript_event

更多对JavaScript相关内容感兴趣的读者可以查看本网站专题：《JavaScript页面元素操作技巧总结》、《JavaScript操作DOM技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript错误与调试技巧总结》、0103010

希望本文对JavaScript编程有所帮助。