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 相关文章推荐
extjs 学习笔记(三) 最基本的grid
Oct 15 Javascript
javascript抖动元素的小例子
Oct 28 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
Feb 19 Javascript
js,jquery滚动/跳转页面到指定位置的实现思路
Jun 03 Javascript
JavaScript的设计模式经典之建造者模式
Feb 24 Javascript
JS读写CSS样式的方法汇总
Aug 16 Javascript
JavaScript制作简单分页插件
Sep 11 Javascript
webpack公共组件引用路径简化小技巧
Jun 15 Javascript
axios实现文件上传并获取进度
Mar 25 Javascript
微信小程序实现分享商品海报功能
Sep 30 Javascript
bootstrap-table后端分页功能完整实例
Jun 01 Javascript
Vue中keep-alive的两种应用方式
Jul 15 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
用phpmyadmin更改mysql5.0登录密码
2008/03/25 PHP
PHP开发工具ZendStudio下Xdebug工具使用说明详解
2013/11/11 PHP
PHP检测用户语言的方法
2015/06/15 PHP
PHP检测接口Traversable用法详解
2017/12/29 PHP
PHP实现随机发放扑克牌
2020/04/21 PHP
jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)
2012/05/24 Javascript
ComboBox 和 DateField 在IE下消失的解决方法
2013/08/30 Javascript
javascript创建数组之联合数组的使用方法示例
2013/12/26 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
2014/03/06 Javascript
js通过iframe加载外部网页的实现代码
2015/04/05 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
2016/08/05 Javascript
JavaScript canvas实现围绕旋转动画
2017/11/18 Javascript
Vue事件修饰符native、self示例详解
2019/07/09 Javascript
Vue数字输入框组件的使用方法
2019/10/19 Javascript
js实现的订阅发布者模式简单示例
2020/03/14 Javascript
微信分享invalid signature签名错误踩过的坑
2020/04/11 Javascript
[00:36]DOTA2上海特级锦标赛 LGD战队宣传片
2016/03/04 DOTA
python实现的登陆Discuz!论坛通用代码分享
2014/07/11 Python
python3.4用函数操作mysql5.7数据库
2017/06/23 Python
python使用openpyxl库修改excel表格数据方法
2018/05/03 Python
python得到单词模式的示例
2018/10/15 Python
对IPython交互模式下的退出方法详解
2019/02/16 Python
Python中使用logging和traceback模块记录日志和跟踪异常
2019/04/09 Python
python实现倒计时小工具
2019/07/29 Python
python输入一个水仙花数(三位数) 输出百位十位个位实例
2020/05/03 Python
Python代码注释规范代码实例解析
2020/08/14 Python
基于Jquery和Css3代码制作可以缩放的搜索框
2015/11/19 HTML / CSS
html5实现微信打飞机游戏
2014/03/27 HTML / CSS
基于html5 canvas做批改作业的小插件
2020/05/20 HTML / CSS
办公室文书岗位职责
2013/12/16 职场文书
企业优秀员工事迹材料
2014/05/28 职场文书
2014年环卫工作总结
2014/11/22 职场文书
如何开发一个渐进式Web应用程序PWA
2021/05/10 Javascript
JavaScript继承的三种方法实例
2021/05/12 Javascript
MySQL 发生同步延迟时Seconds_Behind_Master还为0的原因
2021/06/21 MySQL
Mysql中常用的join连接方式
2022/05/11 MySQL