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 相关文章推荐
jquery实现的鼠标拖动排序Li或Table
May 04 Javascript
javascript面向对象特性代码实例
Jun 12 Javascript
JavaScript实现点击按钮就复制当前网址
Dec 14 Javascript
jQuery实现三级菜单的代码
May 09 Javascript
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
Sep 30 Javascript
代码详解Vuejs响应式原理
Dec 20 Javascript
vue-router动态设置页面title的实例讲解
Aug 30 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
Oct 11 Javascript
微信小程序实现联动选择器
Feb 15 Javascript
Vue的transition-group与Virtual Dom Diff算法的使用
Dec 09 Javascript
微信小程序实现带放大效果的轮播图
May 26 Javascript
在vue中给后台接口传的值为数组的格式代码
Nov 12 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中通过ADO调用Access数据库的方法测试不通过
2006/12/31 PHP
php语言注释,单行注释和多行注释
2018/01/21 PHP
php模式设计之观察者模式应用实例分析
2019/09/25 PHP
laravel实现上传图片的两种方式小结
2019/10/12 PHP
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
2007/03/12 Javascript
利用404错误页面实现UrlRewrite的实现代码
2008/08/20 Javascript
jQuery基本选择器选择元素使用介绍
2013/04/18 Javascript
JQuery在页面中添加和除移DOM示例代码
2013/06/24 Javascript
javascript上传图片前预览图片兼容大多数浏览器
2013/10/25 Javascript
jquery动态改变form属性提交表单
2014/06/03 Javascript
Angularjs制作简单的路由功能demo
2015/04/14 Javascript
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
2015/08/26 Javascript
基于jQuery滑动杆实现购买日期选择效果
2015/09/15 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
2017/08/17 Javascript
jQuery UI实现动画效果代码分享
2018/08/19 jQuery
浅谈JavaScript中this的指向更改
2020/07/28 Javascript
[08:44]和酒神一起战斗 DOTA2教你做大人
2014/03/27 DOTA
编写Python脚本来获取Google搜索结果的示例
2015/05/04 Python
Python回调函数用法实例详解
2015/07/02 Python
python中requests爬去网页内容出现乱码问题解决方法介绍
2017/10/25 Python
PyQt5 窗口切换与自定义对话框的实例
2019/06/20 Python
Django连接数据库并实现读写分离过程解析
2019/11/13 Python
python中dict()的高级用法实现
2019/11/13 Python
详解python中GPU版本的opencv常用方法介绍
2020/07/24 Python
python缩进长度是否统一
2020/08/02 Python
python中sys模块是做什么用的
2020/08/16 Python
用python获取txt文件中关键字的数量
2020/12/24 Python
canvas实现图片马赛克的示例代码
2018/03/26 HTML / CSS
英国时尚饰品和发饰购物网站:Claire’s
2017/07/04 全球购物
娇韵诗Clarins意大利官方网站:法国天然护肤品牌
2020/03/11 全球购物
党员十八大心得体会
2014/09/12 职场文书
用电申请报告范文
2015/05/18 职场文书
幼儿园秋季开学通知
2015/07/16 职场文书
读完《骆驼祥子》的观后感!
2019/07/05 职场文书
还在手动盖楼抽奖?教你用Python实现自动评论盖楼抽奖(一)
2021/06/07 Python
python pandas 解析(读取、写入)CSV 文件的操作方法
2022/12/24 Python