事件委托:给多个元素和动态添加的元素绑定js事件,
2018-04-01 21:05
911 查看
这个标题描述有点不准确,准确点讲应该是“事件委托”
举个栗子,假如一个父容器里有一万个子元素,要给它们全部绑定事件,要怎么绑定呢?
很容易想到的就是遍历每个子元素,但这也太占内存资源了吧。
所以,“事件委托”就腾空出现啦
事件委托就是利用冒泡的原理,把事件加到父元素或祖先元素上,触发执行效果。事件委托有一个很好的应用场景,就是你的HTML标签是动态添加的。事件的绑定是在文档载入时,JS渲染引擎渲染时就绑定完成的。如果后续你通过Ajax动态追加的元素是不会有绑定事件的。这个时候事件委托就发挥其功效了。
show the code<ul id="ul">
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
<li> 4 </li>
<li> 5 </li>
<li> 6 </li>
<li> 7 </li>
<li> 8 </li>
<li> 9 </li>
<li> 0 </li>
</ul>
<input type="button" id="sub" value="新增元素" />
jQuery事件绑定 on()与bind()的区别
举个栗子,假如一个父容器里有一万个子元素,要给它们全部绑定事件,要怎么绑定呢?
很容易想到的就是遍历每个子元素,但这也太占内存资源了吧。
所以,“事件委托”就腾空出现啦
事件委托就是利用冒泡的原理,把事件加到父元素或祖先元素上,触发执行效果。事件委托有一个很好的应用场景,就是你的HTML标签是动态添加的。事件的绑定是在文档载入时,JS渲染引擎渲染时就绑定完成的。如果后续你通过Ajax动态追加的元素是不会有绑定事件的。这个时候事件委托就发挥其功效了。
show the code<ul id="ul">
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
<li> 4 </li>
<li> 5 </li>
<li> 6 </li>
<li> 7 </li>
<li> 8 </li>
<li> 9 </li>
<li> 0 </li>
</ul>
<input type="button" id="sub" value="新增元素" />
window.onload = function(){ var ul = document.getElementById('ul'); // 绑定父级元素 ul.onclick = function(e){ // 绑定事件,此处为绑定click事件 e = window.event ? window.event :e; // 捕获事件 var who = e.target ? e.target : e.secElement; // 捕获事件触发所在元素。此处用到了Event对象的target属性, 该属性能够获取事件发生所在的元素 console.log(who.innerHTML); // 打印事件触发所在的元素的文本 $(who).css('color','red'); // 修改样式 } } $('#sub').click(function(){ var length = $('#ul li').length; var list = '<li> ' + length + ' </li>'; $('#ul').append(list); })当然,在实际应用时,我们很少自己写事件委托器,大部分都是用 jQuery的bind( ) 、on( )。
jQuery事件绑定 on()与bind()的区别
相关文章推荐
- Js - JQ事件委托( 适用于给动态生成的脚本元素添加事件)
- 利用事件委托解决js元素添加后未响应绑定事件问题
- js为动态添加的元素增加事件(事件委托)
- JS----动态添加元素绑定事件
- js为动态添加的元素增加事件(事件委托)
- JS实现为动态添加的元素增加事件功能示例【基于事件委托】
- jquery on() 给js动态新添加的元素 绑定的点击事件。
- js中的事件委托机制(解决动态生成的dom元素无法绑定事件的问题)
- JS动态添加元素及绑定事件造成程序重复执行解决
- jquery on() bind()绑定的点击事件在js动态新添加的元素生效
- 页面元素用JS动态添加的有效事件绑定方式
- 页面元素用JS动态添加的有效事件绑定方式(on)
- jquery动态添加元素绑定事件学习记录
- jquery动态添加元素后, 该元素事件失效,可尝试原生 js写法解决
- jQuery给动态添加的元素绑定事件的方法
- JS实现为动态创建的元素添加事件操作示例
- jQuery页面元素动态添加后绑定事件丢失方法,非 live
- 由JS for 循环中为元素添加点击事件到JS 中的事件委托
- Fancybox插件 如何为动态添加的元素绑定事件
- Jquery对动态添加进去的元素无法使用on绑定事件处理