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原生xmlHttp与jquery的ajax方法json数据格式实例
Dec 04 Javascript
jQuery+css实现的切换图片功能代码
Jan 27 Javascript
Bootstrap的class样式小结
Dec 01 Javascript
self.attachevent is not a function的解决方法
Apr 04 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
Jun 05 Javascript
微信小程序画布圆形进度条显示效果
Nov 17 Javascript
vue-cli 打包使用history模式的后端配置实例
Sep 20 Javascript
解决vue keep-alive 数据更新的问题
Sep 21 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
Sep 27 Javascript
深度了解vue.js中hooks的相关知识
Jun 14 Javascript
JavaScript判断浏览器版本的方法
Nov 03 Javascript
Bootstrap table 服务器端分页功能实现方法示例
Jun 01 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开发模式(简写版)
2007/03/15 PHP
php用header函数实现301跳转代码实例
2013/11/25 PHP
PHP获取youku视频真实flv文件地址的方法
2014/12/23 PHP
PHP+MYSQL中文乱码问题
2015/07/01 PHP
[原创]php常用字符串输出方法分析(echo,print,printf及sprintf)
2016/07/09 PHP
YII框架批量插入数据的方法
2017/03/18 PHP
php微信开发之图片回复功能
2018/06/14 PHP
javascript 清除输入框中的数据
2009/04/13 Javascript
JavaScript代码简单实现求杨辉三角给定行的最大值
2013/10/29 Javascript
js获取对象为null的解决方法
2013/11/21 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
2016/03/07 Javascript
request请求获取参数的实现方法(post和get两种方式)
2016/09/27 Javascript
详解VueJs异步动态加载块
2017/03/09 Javascript
详解JS中的this、apply、call、bind(经典面试题)
2017/09/19 Javascript
JS获取url参数,JS发送json格式的POST请求方法
2018/03/29 Javascript
jQuery插件Validation表单验证详解
2018/05/26 jQuery
node.js如何操作MySQL数据库
2020/10/29 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
2021/01/15 Javascript
[05:45]Ti4观战指南(下)
2014/07/07 DOTA
python k-近邻算法实例分享
2014/06/11 Python
python&MongoDB爬取图书馆借阅记录
2016/02/05 Python
详解duck typing鸭子类型程序设计与Python的实现示例
2016/06/03 Python
Python的网络编程库Gevent的安装及使用技巧
2016/06/24 Python
Python爬虫天气预报实例详解(小白入门)
2018/01/24 Python
python爬虫基本知识
2018/03/05 Python
示例详解Python3 or Python2 两者之间的差异
2018/08/23 Python
python学生管理系统开发
2019/01/30 Python
Python多进程入门、分布式进程数据共享实例详解
2019/06/03 Python
全球最大的房车租赁市场:Outdoorsy
2018/09/19 全球购物
Sandro法国官网:法国成衣品牌
2019/08/28 全球购物
护理专业毕业生自荐信范文
2014/01/05 职场文书
乡领导班子四风问题对照检查材料
2014/09/25 职场文书
小学教师节活动总结
2015/03/20 职场文书
捐书活动倡议书
2015/04/27 职场文书
上诉状格式
2015/05/23 职场文书
小学大队长竞选稿
2015/11/20 职场文书