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 相关文章推荐
ajax的hide隐藏问题解决方法
Dec 11 Javascript
node.js中的fs.fsync方法使用说明
Dec 15 Javascript
jQuery实现的输入框选择时间插件用法实例
Feb 28 Javascript
简单实现限制uploadify上传个数
Nov 16 Javascript
Bootstrap开发实战之第一次接触Bootstrap
Jun 02 Javascript
详解jquery easyui之datagrid使用参考
Dec 05 Javascript
Jquery on绑定的事件 触发多次实例代码
Dec 08 Javascript
js 调用百度分享功能
Feb 27 Javascript
javascript简单链式调用案例分析
May 10 Javascript
浅谈AngularJS中使用$resource(已更新)
Sep 14 Javascript
ES6入门教程之变量的解构赋值详解
Apr 13 Javascript
JavaScript实现简单贪吃蛇效果
Mar 09 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
laravel 5 实现模板主题功能(续)
2015/03/02 PHP
php在数组中查找指定值的方法
2015/03/17 PHP
javascript DOM编程实例(智播客学习)
2009/11/23 Javascript
javascript倒计时功能实现代码
2012/06/07 Javascript
实现动画效果核心方式的js代码
2013/09/27 Javascript
jquery之别踩白块游戏的简单实现
2016/07/25 Javascript
jquery easyUI中ajax异步校验用户名
2016/08/19 Javascript
Bootstrap实现导航栏的2种方式
2016/11/28 Javascript
js按条件生成随机json:randomjson实现方法
2017/04/07 Javascript
easyUI下拉列表点击事件使用方法
2017/05/18 Javascript
vue2.0 自定义日期时间过滤器
2017/06/07 Javascript
关于Vue实现组件信息的缓存问题
2017/08/23 Javascript
AngularJs 最新验证手机号码的实例,成功测试通过
2017/11/26 Javascript
解析Json字符串的三种方法日常常用
2018/05/02 Javascript
详解react内联样式使用webpack将px转rem
2018/09/13 Javascript
Electron中实现大文件上传和断点续传功能
2018/10/28 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
2019/08/28 Javascript
Python中在脚本中引用其他文件函数的实现方法
2016/06/23 Python
Python中Django 后台自定义表单控件
2017/03/28 Python
Django 路由控制的实现代码
2018/11/08 Python
python实现支付宝转账接口
2019/05/07 Python
在Keras中利用np.random.shuffle()打乱数据集实例
2020/06/15 Python
python批量修改文件名的示例
2020/09/27 Python
python 根据列表批量下载网易云音乐的免费音乐
2020/12/03 Python
使用CSS3配合IE滤镜实现渐变和投影的效果
2015/09/06 HTML / CSS
用React加CSS3实现微信拆红包动画效果
2017/03/13 HTML / CSS
瑞士设计师家具和家居饰品网上商店:Bruno Wickart
2019/03/18 全球购物
JDK安装目录下有哪些内容
2014/08/25 面试题
介绍一下mysql的日期和时间函数
2013/03/28 面试题
土木工程专业大学毕业生求职信
2013/10/13 职场文书
大跃进口号
2014/06/16 职场文书
2014年转正工作总结
2014/11/08 职场文书
大学生旷课检讨书1000字
2015/02/19 职场文书
公司前台接待岗位职责
2015/04/03 职场文书
新闻稿件写作技巧
2015/07/18 职场文书
canvas实现贪食蛇的实践
2022/02/15 Javascript