深入理解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 相关文章推荐
url地址自动加#号问题说明
Aug 21 Javascript
浅析hasOwnProperty方法的应用
Nov 20 Javascript
jquery ajax jsonp跨域调用实例代码
Dec 11 Javascript
JQuery实现鼠标移动到图片上显示边框效果
Jan 09 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
Feb 19 Javascript
使用JSON.parse将json字符串转换成json对象的时候会出错
Sep 04 Javascript
JS打字效果的动态菜单代码分享
Aug 21 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
Aug 10 Javascript
node.js实现博客小爬虫的实例代码
Oct 08 Javascript
bootstrap响应式表格实例详解
May 15 Javascript
vue.js 使用axios实现下载功能的示例
Mar 05 Javascript
五句话帮你轻松搞定js原型链
Dec 09 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 file_get_contents函数轻松采集html数据
2010/04/22 PHP
PHP使用PHPexcel导入导出数据的方法
2015/11/14 PHP
php魔术方法功能与用法实例分析
2016/10/19 PHP
laravel model 两表联查示例
2019/10/24 PHP
JS Excel读取和写入操作(模板操作)实现代码
2010/04/11 Javascript
JavaScript splice()方法详解
2020/09/22 Javascript
js 剪切板应用clipboardData详细解析
2013/12/17 Javascript
jquery的ajax简单结构示例代码
2014/02/17 Javascript
Bootstrap进度条组件知识详解
2016/05/01 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
2016/08/01 Javascript
利用Javascript实现BMI计算器
2016/08/16 Javascript
vue2.0开发实践总结之入门篇
2016/12/06 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
2017/04/24 Javascript
angular.js实现购物车功能
2017/10/23 Javascript
通俗易懂地解释JS中的闭包
2017/10/23 Javascript
基于vue.js实现分页查询功能
2018/12/29 Javascript
vue项目或网页上实现文字转换成语音播放功能
2020/06/09 Javascript
django框架如何集成celery进行开发
2017/05/24 Python
python实现合并两个排序的链表
2019/03/03 Python
Python中numpy模块常见用法demo实例小结
2019/03/16 Python
Django使用 Bootstrap 样式修改书籍列表过程解析
2019/08/09 Python
Django中的AutoField字段使用
2020/05/18 Python
Python模块zipfile原理及使用方法详解
2020/08/04 Python
关于Python 解决Python3.9 pandas.read_excel(‘xxx.xlsx‘)报错的问题
2020/11/28 Python
使用HTML5里的classList操作CSS类
2016/06/28 HTML / CSS
html5 postMessage解决跨域、跨窗口消息传递方案
2016/12/20 HTML / CSS
html5 移动端视频video的android兼容(去除播放控件、全屏)
2020/03/26 HTML / CSS
美国气象仪器、花园装饰和墙壁艺术商店:Wind & Weather
2019/05/29 全球购物
泰国国际航空公司官网:Thai Airways International
2019/12/04 全球购物
会议室标语
2014/06/21 职场文书
地质工程专业毕业生求职信
2014/08/08 职场文书
格林童话读书笔记
2015/06/30 职场文书
2015年度环卫处工作总结
2015/07/24 职场文书
国庆节主题班会
2015/08/15 职场文书
python3实现无权最短路径的方法
2021/05/12 Python
解析python中的jsonpath 提取器
2022/01/18 Python