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 相关文章推荐
同一个表单 根据要求递交到不同页面的实现方法小结
Aug 05 Javascript
改善你的jQuery的25个步骤 千倍级效率提升
Feb 11 Javascript
纯js实现瀑布流展现照片(自动适应窗口大小)
Apr 08 Javascript
javascript获得当前的信息的一些常用命令
Feb 25 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
Mar 05 Javascript
JavaScript-html标题滚动效果的简单实现
Sep 08 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
Sep 17 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
Nov 10 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
Dec 22 Javascript
使用JS判断移动端手机横竖屏状态
Jul 30 Javascript
Vue3.0 响应式系统源码逐行分析讲解
Oct 14 Javascript
Vue插件之滑动验证码用法详解
Apr 05 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&amp;java(三)
2006/10/09 PHP
如何在symfony中导出为CSV文件中的数据
2011/10/06 PHP
PHP 中检查或过滤IP地址的实现代码
2011/11/27 PHP
怎么在Windows系统中搭建php环境
2013/08/31 PHP
PHP批量去除BOM头内容信息代码
2016/03/11 PHP
PHP 中TP5 Request 请求对象的实例详解
2017/07/31 PHP
悄悄用脚本检查你访问过哪些网站的代码
2010/12/04 Javascript
写js时遇到的一些小问题
2010/12/06 Javascript
javascript提取URL的搜索字符串中的参数(自定义函数实现)
2013/01/22 Javascript
简单的分页代码js实现
2016/05/17 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
2016/08/19 Javascript
nodejs搭建本地http服务器教程
2017/03/13 NodeJs
Vue2路由动画效果的实现代码
2017/07/10 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
2018/10/08 Javascript
mpvue开发音频类小程序踩坑和建议详解
2019/03/12 Javascript
jQuery中实现text()的方法
2019/04/04 jQuery
详解vue 动态加载并注册组件且通过 render动态创建该组件
2019/05/30 Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
2020/04/06 Javascript
JS XMLHttpRequest原理与使用方法深入详解
2020/04/30 Javascript
JS深入学习之数组对象排序操作示例
2020/05/01 Javascript
给Python IDLE加上自动补全和历史功能
2014/11/30 Python
windows下ipython的安装与使用详解
2016/10/20 Python
python下载图片实现方法(超简单)
2017/07/21 Python
Python带动态参数功能的sqlite工具类
2018/05/26 Python
Python多继承以及MRO顺序的使用
2019/11/11 Python
python 提高开发效率的5个小技巧
2020/10/19 Python
基于HTML5代码实现折叠菜单附源码下载
2015/11/27 HTML / CSS
REISS美国官网:伦敦最受欢迎的时尚品牌
2019/08/16 全球购物
建筑文秘专业个人求职信范文
2013/12/28 职场文书
学习雷锋标语
2014/06/25 职场文书
医院安全生产月活动总结
2014/07/05 职场文书
好员工观后感
2015/06/17 职场文书
元宵节晚会主持词
2015/07/01 职场文书
汶川大地震感悟
2015/08/10 职场文书
Jupyter notebook 输出部分显示不全的解决方案
2021/04/24 Python
Python函数式编程中itertools模块详解
2021/09/15 Python