js动态添加事件-事件委托
2016-07-19 09:13
387 查看
作者:白狼 出处:http://www.manks.top/javascript-dynamic-event.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
其所谓的动态添加事件实质就是指js中的事件委托。
我们知道在js中,事件处理只能绑定在当前被选中的元素上,换句话也就是说,事件处理只能绑定在当前文档已经存在的元素上!但是,往往小伙伴们都会遇到一个问题就是,我的元素是后来动态添加到页面的,而我又想给该元素绑定事件,怎么处理?
为了说明白这一问题,我们假设需要给后来添加到当前页面的元素添加click事件。
解决这一问题的核心就是利用js的委托事件。委派事件的优势就是可以给未存在的元素绑定事件,而且委派事件往往开销也会更小!
题外话:举一个最简单的例子:当页面上有1000个div的时候,如果直接给div绑定click事件,其会为1000个元素绑定事件。但是,如果用事件委托,只需要一个元素绑定事件即可。PS:希望啰里啰嗦能够让你明白事件委托的含义。
我们只是想知道动态创建的元素如何添加事件,你说这么多做什么,做什么...
好吧,言归正传,看具体实现:
查看原文
其所谓的动态添加事件实质就是指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'); });
查看原文
相关文章推荐
- EXTJS中TreePanel和TabPanel配合使用的问题
- 深入浅析javascript中的作用域(推荐)
- javascript弹出带文字信息的提示框效果
- js代码禁用ctrl+w等组合键
- Json2对象与字符串相互转换
- js实现队列的操作以及对队列中数字的冒泡排序的可视化
- 再谈 JS中的模块规范(CommonJS,AMD,CMD)来自玉伯的seajs分析
- JSM 学习(一)
- 浅谈javascript中的作用域
- JS显示时间
- 从零开始学_JavaScript_系列(26)——只需要前端知识的ajax教程
- js 基础 ---实现放大镜的效果
- 教你轻松记住JS正则表达式
- JSON两种结构之对象和数组的理解
- js实现动态创建的元素绑定事件
- 如何在JS中实现相互转换XML和JSON
- js基于cookie记录来宾姓名的方法
- javascript中使用未定义变量或值的情况分析
- JavaScript动态添加css样式和script标签
- JavaScript新增样式规则(推荐)