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 Date对象使用总结
May 14 Javascript
TimergliderJS 一个基于jQuery的时间轴插件
Dec 07 Javascript
提交表单时执行func方法实现代码
Mar 17 Javascript
解决js图片加载时出现404的问题
Nov 30 Javascript
js仿微博实现统计字符和本地存储功能
Dec 22 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
Nov 26 Javascript
微信小程序实现点击返回顶层的方法
Jul 12 Javascript
React Native中NavigatorIOS组件的简单使用详解
Jan 27 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
Apr 08 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
Mar 29 Javascript
微信小程序API—获取定位的详解
Apr 30 Javascript
小试小程序云开发(小结)
Jun 06 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对二维数组进行相关操作(排序、转换、去空白等)
2015/11/04 PHP
详解关于php的xdebug配置(编辑器vscode)
2019/01/29 PHP
PHP数组对象与Json转换操作实例分析
2019/10/22 PHP
用js实现计算加载页面所用的时间
2010/04/02 Javascript
UserData用法总结 lanyu出品
2010/07/01 Javascript
JavaScript实现大数的运算
2014/11/24 Javascript
根据配置文件加载js依赖模块
2014/12/29 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
2015/06/14 Javascript
JQuery实现的按钮倒计时效果
2015/12/23 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
2016/01/01 Javascript
浅谈js中的三种继承方式及其优缺点
2016/08/10 Javascript
JavaScript实现DOM对象选择器
2016/09/24 Javascript
微信小程序实现根据字母选择城市功能
2017/08/16 Javascript
Three.js利用性能插件stats实现性能监听的方法
2017/09/25 Javascript
Vue实现6位数密码效果
2018/08/18 Javascript
微信小程序里引入SVG矢量图标的方法
2019/09/20 Javascript
JS数据类型STRING使用实例解析
2019/12/18 Javascript
vant实现购物车功能
2020/06/29 Javascript
[01:20:06]TNC vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
详解python中executemany和序列的使用方法
2017/08/12 Python
Django 限制用户访问频率的中间件的实现
2018/08/23 Python
详解重置Django migration的常见方式
2019/02/15 Python
python连接、操作mongodb数据库的方法实例详解
2019/09/11 Python
Python使用Pyqt5实现简易浏览器(最新版本测试过)
2020/04/27 Python
Python中zipfile压缩文件模块的基本使用教程
2020/06/14 Python
实例代码讲解Python 线程池
2020/08/24 Python
python 多线程中join()的作用
2020/10/29 Python
canvas实现圆形进度条动画的示例代码
2017/12/26 HTML / CSS
描述RIP和OSPF区别以及特点
2015/01/17 面试题
后勤园长自我鉴定
2013/10/17 职场文书
怎么写有吸引力的自荐信
2013/11/17 职场文书
外语系毕业生求职自荐信
2014/04/12 职场文书
高中学生评语大全
2014/04/25 职场文书
机关作风建设剖析材料
2014/10/11 职场文书
2015年乡镇卫生院妇幼保健工作总结
2015/05/19 职场文书
法律讲堂观后感
2015/06/11 职场文书