JavaScript动态添加事件之事件委托


Posted in Javascript onJuly 12, 2016

先给大家讲下什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件。

也就是:利用冒泡的原理,把事件加到父级上,触发执行效果。

其所谓的动态添加事件实质就是指js中的事件委托。

我们知道在js中,事件处理只能绑定在当前被选中的元素上,换句话也就是说,事件处理只能绑定在当前文档已经存在的元素上!但是,往往小伙伴们都会遇到一个问题就是,我的元素是后来动态添加到页面的,而我又想给该元素绑定事件,怎么处理?

为了说明白这一问题,我们假设需要给后来添加到当前页面的元素添加click事件。

解决这一问题的核心就是利用js的委托事件。委派事件的优势就是可以给未存在的元素绑定事件,而且委派事件往往开销也会更小!

题外话:举一个最简单的例子:当页面上有1000个div的时候,如果直接给div绑定click事件,其会为1000个元素绑定事件。但是,如果用事件委托,只需要一个元素绑定事件即可。PS:希望????履芄蝗媚忝靼资录??械暮?濉?/p>

我们只是想知道动态创建的元素如何添加事件,你说这么多做什么,做什么...

好吧,言归正传,看具体实现:

// 模拟动态创建元素li
$.ajax({
type: 'get',
data: {},
success: function () { 
$('<li>').addClass('aaa').html('11111111').appendTo($('body'));
},
});
// 给为我们刚刚动态创建的元素添加事件
$(document).on('click', 'li[class=aaa]', function(){
console.log('ddd');
});

以上所述是小编给大家介绍的JavaScript动态添加事件之事件委托,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
硬盘浏览程序,保存成网页格式便可使用
Dec 03 Javascript
做网页的一些技巧(续)
Feb 01 Javascript
javascript 实现父窗口引用弹出窗口的值的脚本
Aug 07 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
Nov 11 Javascript
javascript实现多级联动下拉菜单的方法
Feb 06 Javascript
JS实现为表格动态添加标题的方法
Mar 31 Javascript
ashx文件获取$.ajax()方法发送的数据
May 26 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
Nov 18 Javascript
VUE多层路由嵌套实现代码
May 15 Javascript
JavaScript中的一些隐式转换和总结(推荐)
Dec 22 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
Nov 15 Javascript
vue props default Array或是Object的正确写法说明
Jul 30 Javascript
html+js实现简单的计算器代码(加减乘除)
Jul 12 #Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
Jul 12 #Javascript
javascript加减乘除的简单实例
Jul 12 #Javascript
浅谈javascript中的加减时间
Jul 12 #Javascript
多功能jQuery树插件zTree实现权限列表简单实例
Jul 12 #Javascript
基于BootStrap环境写jQuery tabs插件
Jul 12 #Javascript
Angular 路由route实例代码
Jul 12 #Javascript
You might like
PHP setcookie指定domain参数后,在IE下设置cookie失效的解决方法
2011/09/09 PHP
PHP数组遍历的几种常见方式总结
2019/02/15 PHP
javascript实现的弹出层背景置灰-模拟(easyui dialog)
2013/12/27 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
2015/12/10 Javascript
Javascript小技能总结(推荐)
2016/06/02 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/09/29 Javascript
通过扫描二维码打开app的实现代码
2016/11/10 Javascript
JavaScript注册时密码强度校验代码
2017/06/30 Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
2018/08/24 Javascript
Vue核心概念Action的总结
2019/01/18 Javascript
Vue仿微信app页面跳转动画效果
2019/08/21 Javascript
NodeJS实现一个聊天室功能
2019/11/25 NodeJs
Element InfiniteScroll无限滚动的具体使用方法
2020/07/27 Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
2020/09/29 Javascript
[01:37]DOTA2超级联赛专访ChuaN 传奇般的电竞之路
2013/06/19 DOTA
用python分割TXT文件成4K的TXT文件
2009/05/23 Python
python抓取京东价格分析京东商品价格走势
2014/01/09 Python
在Python的Django框架下使用django-tagging的教程
2015/05/30 Python
Python 中导入csv数据的三种方法
2018/11/01 Python
Python面向对象之继承和多态用法分析
2019/06/08 Python
python3 图片 4通道转成3通道 1通道转成3通道 图片压缩实例
2019/12/03 Python
Python如何使用神经网络进行简单文本分类
2021/02/25 Python
HTML5中meta属性的使用方法
2016/02/29 HTML / CSS
土木工程毕业生推荐信
2013/10/28 职场文书
环境科学专业个人求职的自我评价
2013/11/28 职场文书
饮料业务员岗位职责
2013/12/15 职场文书
大学迎新标语
2014/06/26 职场文书
医药公司采购员岗位职责
2014/09/12 职场文书
超市仓管员岗位职责范本
2014/09/18 职场文书
政风行风评议心得体会
2014/10/21 职场文书
2014年小学教师工作总结
2014/11/10 职场文书
2014年安全生产工作总结
2014/11/13 职场文书
表扬信格式模板
2015/05/05 职场文书
鲁滨孙漂流记读书笔记
2015/06/30 职场文书
勤俭节约主题班会
2015/08/13 职场文书
Go web入门Go pongo2模板引擎
2022/05/20 Golang