深入理解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 相关文章推荐
phpwind放自动注册方法
Dec 02 Javascript
Jquery常用技巧收集整理篇
Nov 14 Javascript
Jquery颜色选择器ColorPicker实现代码
Nov 14 Javascript
JavaScript根据数据生成百分比图和柱状图的实例代码
Jul 14 Javascript
jQuery动态添加删除select项(实现代码)
Sep 03 Javascript
js处理json以及字符串的比较等常用操作
Sep 08 Javascript
JS JSON对象转为字符串的简单实现方法
Nov 18 Javascript
JavaScript中的style.cssText使用教程
Nov 06 Javascript
JavaScript利用正则表达式替换字符串中的内容
Dec 12 Javascript
微信小程序 欢迎页面的制作(源码下载)
Jan 09 Javascript
微信小程序 图片宽度自适应的实现
Apr 06 Javascript
vue2.0学习之axios的封装与vuex介绍
May 28 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教程孙仲岳主讲
2008/01/07 PHP
php使用标签替换的方式生成静态页面
2015/05/21 PHP
PHP使用php-resque库配合Redis实现MQ消息队列的教程
2016/06/29 PHP
php中如何执行linux命令详解
2018/11/06 PHP
用脚本调用样式的几种方法
2006/12/09 Javascript
wordpress之js库集合研究介绍
2007/08/17 Javascript
javascript Xml增删改查(IE下)操作实现代码
2009/01/30 Javascript
javascript window.opener的用法分析
2010/04/07 Javascript
基于jsTree的无限级树JSON数据的转换代码
2010/07/27 Javascript
基于jquery实现的鼠标拖拽元素复制并写入效果
2011/08/23 Javascript
node.js入门教程
2014/06/01 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
2015/08/17 Javascript
解析浏览器端的AJAX缓存机制
2016/06/21 Javascript
bootstrap快速制作后台界面
2016/12/05 Javascript
那些精彩的JavaScript代码片段
2017/01/12 Javascript
thinkjs之页面跳转同步异步操作
2017/02/05 Javascript
微信小程序 基础组件与导航组件详细介绍
2017/02/21 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
2017/09/18 Javascript
springmvc接收jquery提交的数组数据代码分享
2017/10/28 jQuery
vue+elementui 对话框取消 表单验证重置示例
2019/10/29 Javascript
Python中函数参数调用方式分析
2018/08/09 Python
Python符号计算之实现函数极限的方法
2019/07/15 Python
Python concurrent.futures模块使用实例
2019/12/24 Python
Python通过kerberos安全认证操作kafka方式
2020/06/06 Python
python接口自动化之ConfigParser配置文件的使用详解
2020/08/03 Python
python+pygame实现坦克大战小游戏的示例代码(可以自定义子弹速度)
2020/08/11 Python
python实现计算器简易版
2020/12/17 Python
html5声频audio和视频video等新特性详细说明
2012/12/26 HTML / CSS
厨师长岗位职责范本
2014/08/25 职场文书
学校党的群众路线教育实践活动对照检查材料
2014/09/24 职场文书
2014群众路线学习笔记
2014/11/06 职场文书
2014年勤工助学工作总结
2014/11/24 职场文书
2014年师德师风工作总结
2014/11/25 职场文书
2014年绿化工作总结
2014/12/09 职场文书
2014年高中教师工作总结
2014/12/19 职场文书
新娘婚礼答谢词
2015/09/29 职场文书