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 var变量隐式声明方法
Oct 19 Javascript
JQuery Tips(4) 一些关于提高JQuery性能的Tips
Dec 19 Javascript
javascript上传图片前预览图片兼容大多数浏览器
Oct 25 Javascript
jQuery操作基本控件方法实例分析
Dec 31 Javascript
Javascript 调用 ActionScript 的简单方法
Sep 22 Javascript
JS实现表单多文件上传样式美化支持选中文件后删除相关项
Sep 30 Javascript
jQuery中用on绑定事件时需注意的事项
Mar 19 Javascript
react-native DatePicker日期选择组件的实现代码
Sep 12 Javascript
JavaScript学习笔记之DOM基础操作实例小结
Jan 09 Javascript
JS实现获取当前所在周的周六、周日示例分析
May 11 Javascript
解决vuex数据异步造成初始化的时候没值报错问题
Nov 13 Javascript
功能完善的小程序日历组件的实现
Mar 31 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
上海牌131型七灯四波段四喇叭一级收音机
2021/03/02 无线电
CI框架(ajax分页,全选,反选,不选,批量删除)完整代码详解
2016/11/01 PHP
Laravel网站打开速度优化的方法汇总
2017/07/16 PHP
js 覆盖和重载 函数
2009/09/25 Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
2013/03/04 Javascript
js判断上传文件类型判断FileUpload文件类型代码
2014/05/20 Javascript
js判断浏览器是否支持html5
2014/08/17 Javascript
JS烟花背景效果实现方法
2015/03/03 Javascript
jsMind通过鼠标拖拽的方式调整节点位置
2015/04/13 Javascript
微信小程序 Template详解及简单实例
2017/01/05 Javascript
原生javascript实现图片放大镜效果
2017/01/18 Javascript
微信小程序支付前端源码
2018/08/29 Javascript
ES6 Iterator接口和for...of循环用法分析
2019/07/31 Javascript
js实现带箭头的进度流程
2020/03/26 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
2020/09/04 Javascript
Javascript柯里化实现原理及作用解析
2020/10/22 Javascript
python3.5 email实现发送邮件功能
2018/05/22 Python
python调用OpenCV实现人脸识别功能
2018/05/25 Python
python单例模式的多种实现方法
2019/07/26 Python
PyTorch中Tensor的维度变换实现
2019/08/18 Python
python+pygame实现坦克大战
2019/09/10 Python
python3的UnicodeDecodeError解决方法
2019/12/20 Python
Python爬虫Scrapy框架CrawlSpider原理及使用案例
2020/11/20 Python
CSS3绘制圆角矩形的简单示例
2015/09/28 HTML / CSS
为奢侈时尚带来了慈善元素:Olivela
2018/09/29 全球购物
村干部承诺书
2014/03/28 职场文书
学前教育专业求职信
2014/09/02 职场文书
2014年电信员工工作总结
2014/12/19 职场文书
个人简历求职信范文
2015/03/20 职场文书
社区扶贫帮困工作总结
2015/05/20 职场文书
微信早安问候语
2015/11/10 职场文书
2016年国庆节假期旅游工作总结
2016/04/01 职场文书
一道JS算法面试题——冒泡、选择排序
2021/04/21 Javascript
Java 常见的限流算法详细分析并实现
2022/04/07 Java/Android
如何优化vue打包文件过大
2022/04/13 Vue.js
nginx代理实现静态资源访问的示例代码
2022/07/07 Servers