jquery移除、绑定、触发元素事件使用示例详解


Posted in Javascript onApril 10, 2014
unbind(type [,data])     //data是要移除的函数
$('#btn').unbind("click"); //移除click
$('#btn').unbind(); //移除所有

对于只需要触发一次的,随后就要立即解除绑定的情况,用one()

$('#btn').one("click",function(){.......});

触发操作
trigger() 方法触发被选元素的指定事件类型。

$('#btn').trigger("click");

也可以直接执行事件

$('#btn').click();

触发自定义事件
bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。

$('#btn').bind("myclick",function(){....});

模拟触发上面的绑定函数

$('#btn').trigger("myclick");

传递数据trigger(event,[param1,param2,...])

$('#btn').bind("myclick",function(event,message1,message2){...........});
$('#btn').trigger("myclick",["传给message1","传给message2"]);

触发执行默认操作

$("input").trigger("focus");
//不仅会触发input元素绑定的focus事件,还会触发默认操作——得到焦点

只触发绑定事件,不执行浏览器默认操作

$("input").triggerHandler("focus");
//只触发绑定事件,不执行浏览器默认操作

其他用法

绑定多个事件类型

$("div").bind("mouseover mouseout",function(){.....});

添加事件命名空间

$("div").bind("click.plugin",function(){......});

在所绑定的世界类型后面添加命名空间,这样在删除事件时只需要指定命名空间即可。

$("div").unbind(".plugin");   //删除空间内的事件
$("div").trigger("click!"); //触发所以不包含在命名空间中的click方法

如果包含在命名空间的也要触发

$(“div”).trigger(“click”);

取消或者绑定函数

$('div').bind('click', RecommandProduct);//为div绑定RecommandProduct 函数
$('div').unbind('click', RecommandProduct);//取消RecommandProduct 函数
Javascript 相关文章推荐
javascript 动态加载 css 方法总结
Jul 11 Javascript
javascript写的日历类(基于pj)
Dec 28 Javascript
原始的js代码和jquery对比体会
Sep 10 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
Oct 09 Javascript
JS继承用法实例分析
Feb 05 Javascript
jQuery选择器源码解读(七):elementMatcher函数
Mar 31 Javascript
详解JavaScript中数组的reduce方法
Dec 02 Javascript
jQuery中DOM节点删除之empty与remove
Jan 20 Javascript
jQuery中table数据的值拷贝和拆分
Mar 19 Javascript
JavaScript中双向数据绑定详解
May 03 Javascript
使用Angular CLI进行Build(构建)和Serve详解
Mar 24 Javascript
详解JavaScript 高阶函数
Sep 14 Javascript
jquery序列化表单去除指定元素示例代码
Apr 10 #Javascript
jquery删除ID为sNews的tr元素的内容
Apr 10 #Javascript
javascript正则匹配汉字、数字、字母、下划线
Apr 10 #Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
Apr 10 #Javascript
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
Apr 10 #Javascript
jquery获取复选框被选中的值
Apr 10 #Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
Apr 10 #Javascript
You might like
php中大括号作用介绍
2012/03/22 PHP
php购物车实现方法
2015/01/03 PHP
通过源码解析Laravel的依赖注入
2018/01/22 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
PHPExcel 修改已存在Excel的方法
2018/05/03 PHP
jscript之Open an Excel Spreadsheet
2007/06/13 Javascript
jQuery 白痴级入门教程
2009/11/11 Javascript
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
2010/03/21 Javascript
jquery CSS选择器笔记
2010/03/29 Javascript
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
2010/09/28 Javascript
在JQuery dialog里的服务器控件 事件失效问题
2010/12/08 Javascript
javascript 禁用IE工具栏,导航栏等等实现代码
2013/04/01 Javascript
JS取文本框中最小值的简单实例
2013/11/29 Javascript
一个CSS+jQuery实现的放大缩小动画效果
2014/02/19 Javascript
jquery动态添加元素事件失效问题解决方法
2014/05/23 Javascript
jQuery中andSelf()方法用法实例
2015/01/08 Javascript
js实现格式化金额,字符,时间的方法
2015/02/26 Javascript
JavaScript 七大技巧(二)
2015/12/13 Javascript
基于jQuery实现照片墙自动播放特效
2017/01/12 Javascript
详解angularjs利用ui-route异步加载组件
2017/05/21 Javascript
Angular中ng-options下拉数据默认值的设定方法
2017/06/21 Javascript
Django+Vue实现WebSocket连接的示例代码
2019/05/28 Javascript
JS中call()和apply()的功能及用法实例分析
2019/06/28 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
2019/12/15 Javascript
vue 授权获取微信openId操作
2020/11/13 Javascript
[02:24]DOTA2痛苦女王 英雄基础教程
2013/11/26 DOTA
[45:14]Optic vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
跟老齐学Python之不要红头文件(2)
2014/09/28 Python
python查看模块安装位置的方法
2018/10/16 Python
使用sklearn的cross_val_score进行交叉验证实例
2020/02/28 Python
HTML5实现移动端复制功能
2018/04/19 HTML / CSS
什么是.net
2015/08/03 面试题
Java Servlet API中forward() 与redirect()的区别
2014/04/20 面试题
高三毕业生自我鉴定
2013/12/20 职场文书
2015年秋季运动会前导词
2015/07/20 职场文书
vue 把二维或多维数组转一维数组
2022/04/24 Vue.js