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 相关文章推荐
动态控制Table的js代码
Mar 07 Javascript
背景图跟随鼠标移动的Mootools插件实现代码
Dec 12 Javascript
Javascript计算两个marker之间的距离(Google Map V3)
Apr 26 Javascript
JavaScript判断是否为数组的3种方法及效率比较
Apr 01 Javascript
推荐10款扩展Web表单的JS插件
Dec 25 Javascript
vue项目部署上线遇到的问题及解决方法
Jun 10 Javascript
微信小程序当前时间时段选择器插件使用方法详解
Dec 28 Javascript
使vue实现jQuery调用的两种方法
May 12 jQuery
JavaScript正则表达式验证登录实例
Mar 18 Javascript
解决vuex刷新数据消失问题
Nov 12 Javascript
JS ES6异步解决方案
Apr 29 Javascript
JS轻量级函数式编程实现XDM二
Jun 16 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将html转成wml的WAP标记语言实例
2015/07/08 PHP
Zend Framework教程之Zend_Db_Table表关联实例详解
2016/03/23 PHP
PHP实现留言板功能的详细代码
2017/03/25 PHP
javascript 火狐(firefox)不显示本地图片问题解决
2008/07/05 Javascript
基于jquery的时间段实现代码
2012/08/02 Javascript
Jquery实现搜索框提示功能示例代码
2013/08/13 Javascript
js形成页面的一种遮罩效果实例代码
2014/01/04 Javascript
javascript中call,apply,bind的用法对比分析
2015/02/12 Javascript
JavaScript获取按钮所在form表单id的方法
2015/04/02 Javascript
js window对象属性和方法相关资料整理
2015/11/11 Javascript
jQuery实现图片向左向右切换效果的简单实例
2016/05/18 Javascript
JS 全屏和退出全屏详解及实例代码
2016/11/07 Javascript
jQuery实现锚点向下平滑滚动特效示例
2017/08/29 jQuery
Vue 2.0入门基础知识之内部指令详解
2017/10/15 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
2020/08/24 Javascript
Vue-cli打包后如何本地查看的操作
2020/09/02 Javascript
JavaScript实现无限轮播效果
2020/11/19 Javascript
[49:17]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第三场 1月26日
2021/03/11 DOTA
python类和继承用法实例
2015/07/07 Python
Python生成8位随机字符串的方法分析
2017/12/05 Python
Python实现爬虫设置代理IP和伪装成浏览器的方法分享
2018/05/07 Python
Python列表推导式与生成器用法分析
2018/08/02 Python
python函数map()和partial()的知识点总结
2020/05/26 Python
Bowflex美国官方网站:高级家庭健身器材
2017/12/22 全球购物
英国在线照明超市:Castlegate Lights
2019/10/30 全球购物
中学生团员自我评价分享
2013/12/07 职场文书
信息总监管理职责范本
2014/03/08 职场文书
委托书范本
2014/09/13 职场文书
贵阳市党的群众路线教育实践活动党(工)委领导班子整改方案
2014/10/26 职场文书
社区青年志愿者活动总结
2015/05/06 职场文书
工作犯错保证书
2015/05/11 职场文书
亮剑精神观后感
2015/06/05 职场文书
三八红旗手主要事迹材料
2015/11/04 职场文书
旅游安全责任协议书
2016/03/22 职场文书
如何制定销售人员薪酬制度?
2019/07/09 职场文书
五年级作文之劳动作文
2019/11/12 职场文书