深入理解jQuery事件绑定


Posted in Javascript onJune 02, 2016

html:

<a href="#" onclick="addBtn()">addBtn</a>

<div id="mDiv">

  <button class="cBtn" onclick="alert(11111)">button1</button>

  <button class="cBtn">button2</button>

  <button class="cBtn">button3</button>

</div>

javascript:

<script type="text/javascript">
 function addBtn(){
      $('#mDiv').append(' <button class="cBtn">button5</button>')
 }
jQuery(function($){
//使用on代替live和delegate(live由于性能原因已经被废弃,被delegate代替),新添加到mDiv的button依然会有绑定的事件
$('#mDiv').on('click','.cBtn',function(index, eleDom){
alert($(this).html())
 });
//使用on代替bind
$('.cBtn').on('click',function(){
alert($(this).html())
 })
//注意:
/*
1、无论使用bind、on、delegate、click(function())都是重复绑定,即绑定的同类型事件被放到一个事件队列中,依次执行,后绑定的事件不会替换之前绑定的,对于on使用off,delegate用undelegate,bind及click使用unbind来解除绑定,例如unbind(type)传递为事件类型,如果不传type则解出所有事件绑定;需要注意的是元素本身自带的事件无法unbind(如button1)
2、要绑定自定义事件,如'open',以上函数都可以使用,但激活需要使用trigger

总结:
建议使用on函数,绑定形式为$('.myClass').on({
click:function(eleDom){
...do someting...
},
dbclick:function(eleDom){
...do someting...
}
....
})
*/
}
</script>

一些说明:

bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数

$("a").bind("click",function(){alert("ok");});live(type,[data],fn) 给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的

$("a").live("click",function(){alert("ok");});delegate(selector,[type],[data],fn) 指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数

$("#container").delegate("a","click",function(){alert("ok");})on(events,[selector],[data],fn) 在选择元素上绑定一个或多个事件的事件处理函数

差别:

.bind()是直接绑定在元素上

.live()则是通过冒泡的方式来绑定到元素上的。更适合列表类型的,绑定到document DOM节点上。和.bind()的优势是支持动态数据。

.delegate()则是更精确的小范围使用事件代理,性能优于.live()

.on()则是最新的1.9版本整合了之前的三种方式的新事件绑定机制

以上这篇深入理解jQuery事件绑定就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 获取URL参数的插件
Mar 04 Javascript
js编码之encodeURIComponent使用介绍(asp,php)
Mar 01 Javascript
JavaScript实现QueryString获取GET参数的方法
Jul 02 Javascript
js 控制页面跳转的5种方法
Sep 09 Javascript
ExtJS判断IE浏览器类型的方法
Feb 10 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
Feb 18 Javascript
快速使用Bootstrap搭建传送带
May 06 Javascript
AngularJS ng-repeat数组有重复值的解决方法
Oct 23 Javascript
js中string和number类型互转换技巧(分享)
Nov 28 Javascript
js获取指定时间的前几秒
Apr 05 Javascript
angular2路由之routerLinkActive指令【推荐】
May 30 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
Sep 01 Javascript
jQuery获取单击节点对象的方法
Jun 02 #Javascript
Bootstrap开发实战之响应式轮播图
Jun 02 #Javascript
JavaScript核心语法总结(推荐)
Jun 02 #Javascript
javascript基础语法——全面理解变量和标识符
Jun 02 #Javascript
Bootstrap开发实战之第一次接触Bootstrap
Jun 02 #Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
Jun 02 #Javascript
深入理解Ajax的get和post请求
Jun 02 #Javascript
You might like
适用于抽奖程序、随机广告的PHP概率算法实例
2014/04/09 PHP
用php来限制每个ip每天浏览页面数量的实现思路
2015/02/24 PHP
PHP中each与list用法分析
2016/01/08 PHP
PHP封装的验证码工具类定义与用法示例
2018/08/22 PHP
php微信公众号开发之快递查询
2018/10/20 PHP
jQuery 性能优化指南(2)
2009/05/21 Javascript
JavaScript Event学习第十一章 按键的检测
2010/02/10 Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
2013/10/01 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
2015/03/06 Javascript
在Node.js应用中读写Redis数据库的简单方法
2015/06/30 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
2015/10/20 Javascript
移动端脚本框架Hammer.js
2016/12/15 Javascript
vue数据传递--我有特殊的实现技巧
2018/03/20 Javascript
vue实现2048小游戏功能思路详解
2018/05/09 Javascript
js实现文件上传功能 后台使用MultipartFile
2018/09/08 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
2018/10/29 Javascript
JavaScript实现轮播图特效
2020/04/10 Javascript
python 实现红包随机生成算法的简单实例
2017/01/04 Python
Python操作MongoDB数据库的方法示例
2018/01/04 Python
Python3使用turtle绘制超立方体图形示例
2018/06/19 Python
python简单验证码识别的实现方法
2019/05/10 Python
numpy.where() 用法详解
2019/05/27 Python
Python实现K折交叉验证法的方法步骤
2019/07/11 Python
pandas DataFrame创建方法的方式
2019/08/02 Python
python__new__内置静态方法使用解析
2020/01/07 Python
Python基于Tensor FLow的图像处理操作详解
2020/01/15 Python
英国网上自行车商店:Tredz Bikes
2019/10/29 全球购物
高中军训感言800字
2014/03/05 职场文书
小学生植树节活动总结
2014/07/04 职场文书
大学生助学金感谢信
2015/01/21 职场文书
2015年领导班子工作总结
2015/05/23 职场文书
解约证明模板
2015/06/19 职场文书
2019年大学生职业生涯规划书最新范文
2019/03/25 职场文书
奇妙的 CSS shapes(CSS图形)
2021/04/05 HTML / CSS
Django开发RESTful API实现增删改查(入门级)
2021/05/10 Python
OpenCV-Python实现轮廓拟合
2021/06/08 Python