老生常谈js动态添加事件--- 事件委托
更新时间：2016年07月19日 09:57:43 投稿：jingxian
下面小编就为大家带来一篇老生常谈js动态添加事件--- 事件委托。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
其所谓的动态添加事件实质就是指js中的事件委托。
我们知道在js中，事件处理只能绑定在当前被选中的元素上，换句话也就是说，事件处理只能绑定在当前文档已经存在的元素上！但是，往往小伙伴们都会遇到一个问题就是，我的元素是后来动态添加到页面的，而我又想给该元素绑定事件，怎么处理？
为了说明白这一问题，我们假设需要给后来添加到当前页面的元素添加click事件。
解决这一问题的核心就是利用js的委托事件。委派事件的优势就是可以给未存在的元素绑定事件，而且委派事件往往开销也会更小！
题外话：举一个最简单的例子：当页面上有1000个div的时候，如果直接给div绑定click事件，其会为1000个元素绑定事件。但是，如果用事件委托，只需要一个元素绑定事件即可。PS:希望啰里啰嗦能够让你明白事件委托的含义。
我们只是想知道动态创建的元素如何添加事件，你说这么多做什么，做什么...
好吧，言归正传，看具体实现：
// 模拟动态创建元素li
$.ajax({
type: 'get',
data: {},
success: function () {
$('<li>').addClass('aaa').html('11111111').appendTo($('body'));
},
});
// 给为我们刚刚动态创建的元素添加事件
$(document).on('click', 'li[class=aaa]', function(){
console.log('ddd');
});
以上这篇老生常谈js动态添加事件--- 事件委托就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了webpack4 SplitChunks实现代码分隔详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
偶尔听人说javascript闭包，让我联想起以前学编译原理和数字逻辑里讲的闭包，以前上课讲的闭包很难懂，而且含有递归的意思在里面，现在不想再查看里面的闭包概念。2010-06-06
这篇文章主要为大家详细介绍了JS实现简单可拖动的模态框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要介绍了JS简单实现浮动窗口效果,涉及javascript操作浮动窗口的创建、打开、关闭等相关操作技巧,需要的朋友可以参考下2016-09-09
这篇文章主要介绍了分析JavaScript中this引发的bug以及相关的处理方法分析，一起学习下吧。2017-12-12
本文给大家分享bootstrap轮播h tml代码，代码简单易懂非常不错，具有参考借鉴，需要的朋友参考下吧2016-12-12
这篇文章主要介绍了微信小程序template模板引入的问题小结,本文通过示例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-07-07
这篇文章主要介绍了JS实现的表格行鼠标点击高亮效果代码,涉及JavaScript响应鼠标事件动态变换页面元素属性的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-11-11![JS获取input[file]的值并显示在页面的实现方法](//img.jbzj.com/images/xgimg/bcimg8.png)
下面小编就为大家分享一篇JS获取input[file]的值并显示在页面的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
class类是一种抽象的体现,用来表示具有相同特性的一类事物,是面向对象编程不可缺少的工具,下面这篇文章主要介绍了javascript语言中类class的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-04-04
![JS获取input[file]的值并显示在页面的实现方法](http://img.jbzj.com/images/xgimg/bcimg8.png)
最新评论