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 相关文章推荐
js身份证验证超强脚本
Oct 26 Javascript
js实现在页面上弹出蒙板技巧简单实用
Apr 16 Javascript
下拉框select的绑定示例
Sep 04 Javascript
JavaScript父子窗体间的调用方法
Mar 31 Javascript
JS组件Bootstrap Table使用方法详解
Feb 02 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
Jul 18 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
Sep 24 Javascript
常用原生js自定义函数总结
Nov 20 Javascript
Javascript中的神器——Promise
Feb 08 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
vue.js使用3DES加密的方法示例
May 18 Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
Dec 16 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生成随机密码的几种方法
2011/01/17 PHP
php GeoIP的使用教程
2011/03/09 PHP
php中常用字符串处理代码片段整理
2011/11/07 PHP
PHP5.5迭代生成器用法实例详解
2016/03/16 PHP
javascript 动态添加表格行
2006/06/22 Javascript
IE bug table元素的innerHTML
2010/01/11 Javascript
innerHTML 和 getElementsByName 在IE下面的bug 的解决
2010/04/09 Javascript
xheditor与validate插件冲突的解决方案
2010/04/15 Javascript
简单实用jquery版三级联动select示例
2013/07/04 Javascript
禁止ajax缓存获取程序最新数据的方法
2013/11/19 Javascript
js实现仿网易点击弹出提示同时背景变暗效果
2015/08/13 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
2016/08/02 Javascript
vue生成随机验证码的示例代码
2017/09/29 Javascript
AngularJS中下拉框的高级用法示例
2017/10/11 Javascript
从源码看angular/material2 中 dialog模块的实现方法
2017/10/18 Javascript
面包屑导航详解
2017/12/07 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
2018/01/31 Javascript
Vue单页应用引用单独的样式文件的两种方式
2018/03/30 Javascript
微信小程序实现类似微信点击语音播放效果
2020/03/30 Javascript
javascript for循环性能测试示例
2019/08/07 Javascript
详解element-ui 表单校验 Rules 配置 常用黑科技
2020/07/11 Javascript
python的paramiko模块实现远程控制和传输示例
2017/10/13 Python
Python使用pandas和xlsxwriter读写xlsx文件的方法示例
2019/04/09 Python
python递归法实现简易连连看小游戏
2020/03/25 Python
opencv resize图片为正方形尺寸的实现方法
2019/12/26 Python
Python爬取微信小程序通用方法代码实例详解
2020/09/29 Python
matplotlib绘制鼠标的十字光标的实现(自定义方式,官方实例)
2021/01/10 Python
CSS3模拟IOS滑动开关效果
2016/09/28 HTML / CSS
详解CSS3 rem(设置字体大小) 教程
2017/11/21 HTML / CSS
【HTML5】Canvas绘制简单图片教程
2016/05/13 HTML / CSS
什么是事务?事务有哪些性质?
2012/03/11 面试题
招商专员岗位职责
2014/02/08 职场文书
出国留学计划书
2014/04/27 职场文书
安全责任协议书范本
2016/03/23 职场文书
Linux系统下安装PHP7.3版本
2021/06/26 PHP
springboot+zookeeper实现分布式锁
2022/03/21 Java/Android