老生常谈js动态添加事件--- 事件委托


Posted in Javascript onJuly 19, 2016

其所谓的动态添加事件实质就是指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');
});

以上这篇老生常谈js动态添加事件--- 事件委托就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 常见学习网站与参考书
Nov 09 Javascript
js 复制或插入Html的实现方法小结
May 19 Javascript
jquery增加时编辑jqGrid(实例代码)
Nov 08 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
Mar 18 Javascript
jquery淡入淡出效果简单实例
Jan 14 Javascript
JavaScript+canvas实现七色板效果实例
Feb 18 Javascript
AngularJS 输入验证详解及实例代码
Jul 28 Javascript
Vue.js实现分页查询功能
Nov 15 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
Sep 28 Javascript
VUE引入第三方js包及调用方法讲解
Mar 01 Javascript
微信小程序如何使用canvas二维码保存至手机相册
Jul 15 Javascript
Vue基本指令实例图文讲解
Feb 25 Vue.js
Bootstrap表单布局
Jul 19 #Javascript
一次$.getJSON不执行的简单记录
Jul 19 #Javascript
深入浅析javascript中的作用域(推荐)
Jul 19 #Javascript
javascript弹出带文字信息的提示框效果
Jul 19 #Javascript
总结在前端排序中遇到的问题
Jul 19 #Javascript
ECMAScript6快速入手攻略
Jul 18 #Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
Jul 18 #Javascript
You might like
mysql 的 like 问题,超强毕杀记!!!
2007/01/18 PHP
php新建文件自动编号的思路与实现
2011/06/27 PHP
php实现的九九乘法口诀表简洁版
2014/07/28 PHP
Nginx+php配置文件及原理解析
2020/12/09 PHP
让firefox支持IE的一些方法的javascript扩展函数代码
2010/01/02 Javascript
JavaScript 以对象为索引的关联数组
2010/05/19 Javascript
基于jquery的表格排序
2010/09/11 Javascript
js获取iframe中的window对象的实现方法
2016/05/20 Javascript
ES6新特性之变量和字符串用法示例
2017/04/01 Javascript
Node+Express+MongoDB实现登录注册功能实例
2017/04/23 Javascript
详解使用create-react-app快速构建React开发环境
2018/05/16 Javascript
vueJs实现DOM加载完之后自动下拉到底部的实例代码
2018/08/31 Javascript
webpack打包非模块化js的方法
2018/10/24 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
2020/05/27 Javascript
使用js和canvas实现时钟效果
2020/09/08 Javascript
Vue——前端生成二维码的示例
2020/12/19 Vue.js
react项目从新建到部署的实现示例
2021/02/19 Javascript
Python set集合类型操作总结
2014/11/07 Python
Python序列之list和tuple常用方法以及注意事项
2015/01/09 Python
Windows下用py2exe将Python程序打包成exe程序的教程
2015/04/08 Python
Python实现查找系统盘中需要找的字符
2015/07/14 Python
用python实现百度翻译的示例代码
2018/03/09 Python
Python实现的对一个数进行因式分解操作示例
2019/06/27 Python
解决tensorflow由于未初始化变量而导致的错误问题
2020/01/06 Python
关于Keras模型可视化教程及关键问题的解决
2020/01/24 Python
Python3读取和写入excel表格数据的示例代码
2020/06/09 Python
python温度转换华氏温度实现代码
2020/12/06 Python
CSS3 新增选择器的实例
2019/11/13 HTML / CSS
北承题目(C++)
2012/05/16 面试题
毕业生实习鉴定
2013/12/11 职场文书
大学生暑期实践感言
2014/02/26 职场文书
小学运动会口号
2014/06/07 职场文书
小学五年级语文上册教学计划
2015/01/22 职场文书
护士2015年终工作总结
2015/04/29 职场文书
Python内置数据类型中的集合详解
2022/03/18 Python
在Windows Server 2012上安装 .NET Framework 3.5 所遇到的问题
2022/04/29 Servers