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 相关文章推荐
2012年开发人员的16款新鲜的jquery插件体验分享
Dec 28 Javascript
jquery实现的Banner广告收缩效果代码
Sep 02 Javascript
RequireJS简易绘图程序开发
Oct 28 Javascript
jquery无法为动态生成的元素添加点击事件的解决方法(推荐)
Dec 26 Javascript
js实现适配不同的屏幕大小
Apr 10 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
Jul 17 Javascript
利用JavaScript实现栈的数据结构示例代码
Aug 02 Javascript
基于canvas粒子系统的构建详解
Aug 31 Javascript
使用vue实现grid-layout功能实例代码
Jan 05 Javascript
vue动态禁用控件绑定disable的例子
Oct 28 Javascript
ES2020 已定稿,真实场景案例分析
May 25 Javascript
Vue OpenLayer 为地图绘制风场效果
Apr 24 Vue.js
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下目前为目最全的CURL中文说明
2010/08/01 PHP
PHP中把错误日志保存在系统日志中(Windows系统)
2015/06/23 PHP
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
2012/08/22 Javascript
Jquery中val()表单取值赋值的实例代码
2013/08/15 Javascript
原生js事件的添加和删除的封装
2014/07/01 Javascript
Javascript冒泡排序算法详解
2014/12/03 Javascript
关于JS中的apply,call,bind的深入解析
2016/04/05 Javascript
JavaScript类型系统之布尔Boolean类型详解
2016/06/26 Javascript
Bootstrap如何创建表单
2016/10/21 Javascript
原生js实现弹出层登录拖拽功能
2016/12/05 Javascript
JS实现全屏的四种写法
2016/12/30 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
2018/05/17 Javascript
Vue-cli3简单使用(图文步骤)
2019/04/30 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
2019/06/14 Javascript
layer.js open 隐藏滚动条的例子
2019/09/05 Javascript
解决在Vue中使用axios用form表单出现的问题
2019/10/30 Javascript
nodemon实现Typescript项目热更新的示例代码
2019/11/19 Javascript
vue props default Array或是Object的正确写法说明
2020/07/30 Javascript
用ReactJS和Python的Flask框架编写留言板的代码示例
2015/12/19 Python
深入理解python try异常处理机制
2016/06/01 Python
python 自动批量打开网页的示例
2019/02/21 Python
Python占用的内存优化教程
2019/07/28 Python
wxpython绘制圆角窗体
2019/11/18 Python
在Pytorch中计算卷积方法的区别详解(conv2d的区别)
2020/01/03 Python
python3.7通过thrift操作hbase的示例代码
2020/01/14 Python
Python lambda表达式原理及用法解析
2020/08/18 Python
举例详解HTML5中使用JSON格式提交表单
2015/06/16 HTML / CSS
小天鹅官方商城:LittleSwan
2017/06/16 全球购物
MCAKE蛋糕官方网站:一直都是巴黎的味道
2018/02/06 全球购物
Crabtree & Evelyn英国官网:瑰珀翠护手霜、香水、沐浴和身体护理
2018/04/26 全球购物
德国在线订购鲜花:Fleurop
2018/08/25 全球购物
银行存款证明样本
2014/01/17 职场文书
高中生物教学反思
2014/02/05 职场文书
财务管理制度范本
2015/08/04 职场文书
七年级生物教学反思
2016/02/20 职场文书
Nginx服务器如何设置url链接
2021/03/31 Servers