老生常谈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 相关文章推荐
javascript 24小时弹出一次的代码(利用cookies)
Sep 03 Javascript
能说明你的Javascript技术很烂的五个原因分析
Oct 28 Javascript
解决IE6的PNG透明JS插件使用介绍
Apr 17 Javascript
JS截取字符串常用方法整理及使用示例
Oct 18 Javascript
angularjs中的e2e测试实例
Dec 06 Javascript
深入解读JavaScript中的Iterator和for-of循环
Jul 28 Javascript
JavaScript实现的圆形浮动标签云效果实例
Aug 06 Javascript
Angular路由简单学习
Dec 26 Javascript
基于JavaScript实现微信抢红包功能
Jul 20 Javascript
浅析JS中常用类型转换及运算符表达式
Jul 23 Javascript
使用Angular Cli如何创建Angular私有库详解
Jan 30 Javascript
vue+elementUI实现图片上传功能
Aug 20 Javascript
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
php输出echo、print、print_r、printf、sprintf、var_dump的区别比较
2013/06/21 PHP
phalcon框架使用指南
2016/02/23 PHP
Centos 6.5下PHP 5.3安装ffmpeg扩展的步骤详解
2017/03/02 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
javascript实现的listview效果
2007/04/28 Javascript
JS自动缩小超出大小的图片
2012/10/12 Javascript
javascript 星级评分效果(手写)
2012/12/24 Javascript
JS实现静止元素自动移动示例
2014/04/14 Javascript
异步JavaScript编程中的Promise使用方法
2015/07/28 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
2015/09/14 Javascript
js简单设置与使用cookie的方法
2016/01/22 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
2016/05/19 Javascript
EasyUI Pagination 分页的两种做法小结
2016/07/09 Javascript
JS基于递归实现倒计时效果的方法
2016/11/26 Javascript
bootstrap网格系统使用方法解析
2017/01/13 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
2017/07/19 Javascript
vue项目常用组件和框架结构介绍
2017/12/24 Javascript
从0到1搭建Element的后台框架的方法步骤
2019/04/10 Javascript
微信小程序登录数据解密及状态维持实例详解
2019/05/06 Javascript
vuex 动态注册方法 registerModule的实现
2019/07/03 Javascript
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
2019/10/26 Javascript
vue获取data数据改变前后的值方法
2019/11/07 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
2020/11/10 Javascript
[01:23:59]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 VP vs Secret
2018/04/03 DOTA
跟老齐学Python之使用Python操作数据库(1)
2014/11/25 Python
python下MySQLdb用法实例分析
2015/06/08 Python
python 扩展print打印文件路径和当前时间信息的实例代码
2019/10/11 Python
Python3.7.0 Shell添加清屏快捷键的实现示例
2020/03/23 Python
详解如何使用Pytest进行自动化测试
2021/01/14 Python
canvas使用注意点总结
2013/07/19 HTML / CSS
Madda Fella官网:美国冒险家服装品牌
2020/01/16 全球购物
2014年五一劳动节社区活动总结
2014/04/14 职场文书
通知格式
2015/04/27 职场文书
钱学森电影观后感
2015/06/04 职场文书
2016年全国爱眼日宣传教育活动总结
2016/04/05 职场文书
Java常用函数式接口总结
2021/06/29 Java/Android