jQuery的事件绑定和解除
1 . 绑定事件
语法 :
bind(type,data,fn)
描述 : 为每一个匹配的特定元素(像 click)绑定一个事件处理器函数.
type(String) : 事件类型
data(Object) : (可选)作为 event.data 属性值传递给事件对象的额外数据对象/
fn(Function) : 绑定到每个匹配元素的事件上面的处理函数.
示例 :
当每个p标签被点击的时候,弹出器文本
$("p").bind("click",function(){
alert($(this).text() );
})
在事件处理前传递一些附加的数据.
function handler(event) {
//event.data 可以获取 bind()方法的第二个参数的数据
alert(event.data.foo) ;
}
$("p").bind("click", {foo: "bar"}, handler)
通过返回false来取消默认的行为并阻止事件的起泡.
$("form").bind("submit", finction() {return false; })
通过使用 preventDefault( ) 方法值取消默认的行为.
$("form").bind("submit", function(event){
event.preventDefault();
});
2 . 解除事件
语法 :
unbind(type,fn);
解释 :
bind() 的反向操作,从每一个匹配元素中删除绑定的事件.
如果没有参数,则删除绑定的事件.
如果把绑定时传递的处理函数作为第二个参数,则只有这个特定的事件处理函数被删除.
type(String) : (可选),事件类型.
fn(Function) :(可选),要从每个匹配元素的事件中反绑定的事件处理函数.
示例 :
把所有段落的所有事件取消绑定
$("p").unbind()
将段落中的 click 事件取消绑定
$("p").unbind("click")
删除特定函数的绑定,将函数作为第二个参数传入.
var foo = function () {
// 绑定事件 和 解除事件的事件处理函数
};
$("p").bind("click mouseenter", foo); // 给p段落绑定 click.mouseenter事件
$("p").unbind("click", foo); 只解除了p段落标签的 click 事件
3 . 自定义事件
语法 :
trigger(type,data);
解释 : 在每一个匹配的元素上触发某类事件,它触发的是由 bind() 注册的自定义事件.
type(String) : 要触发的事件类型.
data(Array) : (可选)传递给事件处理函数的附加参数.
示例 :
给一个按钮添加自定义事件
$("button").bind('myClick',function(ev,a,b)) {
// 给按钮 button 添加自定义事件 myClick 事件
}
然后通过 trigger() 触发自定义事件
$('button').trigger('myClick',[1,2])
4 . 一次性事件
语法 :
one(type,data,fn)
解释 : 为每一个匹配元素的特定事件(比如 click ) 绑定一个一次性的事件处理函数,在每个对象上,这个事件处理函数只会被执行一次,其他规则与 bind() 函数相同.
type(String) : 事件类型
data(Object) : (可选) 作为event.data属性值传递给事件对象的额外数据对象.
fn(Function) : 绑定到每个匹配元素的事件上面的处理函数.
示例 :
当所有段落被第一个点击的时候,显示所其文本.
$("p").one("click", function() {
// 只有第一次点击的时候才会触发,再次点击不会触发了.
alert($(this).text() );
});
5 . 单双击事件
在点击按钮的时候,会出现双击的时候会有2次单击事件的发生.
比如 :
解决 ;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button>按钮</button>
<script src="jquery.js"></script>
<script>
$(function () {
// var time = null;
//
// $('div').click(function () {
// // 取消上次延时未执行的方法
// clearTimeout(time);
// //执行延时
// time = setTimeout(function(){
// //do function在此处写单击事件要执行的代码
// },300);
// });
//
// $('div').dblclick(functin ({
// // 取消上次延时未执行的方法
// clearTimeout(time);
// //双击事件的执行代码
// }); // 单双击 的时间 间隔 是300ms
// 如果解决 单双击冲突 // 先做两次单击 一次双击 中间间隔 小于300ms
// 定义 timer是null,
var timer = null;
$('button').click(function(event) {
// console.log(timer);
//清楚定时器,用定时器的时候要先清除定时器.当我们双击的时候,在点击第一下的时候,时间没到300ms,
// 所以不会走 timer = setTimeout(function() 函数.第二下点击的时候清除的是第一下点击的定时器,所以第二次
// 没有到300ms.所以显示双击,在双击的时候清除第二次点击的定时器.
clearTimeout(timer);
// 定时器 300ms 一次性定时器
timer = setTimeout(function(){
console.log('单机了');
}, 300); }); $('button').dblclick(function(event) {
// console.log(timer);
clearTimeout(timer);
console.log('双机了');
});
})
</script>
</body>
</html>
jQuery的事件绑定和解除的更多相关文章
- jQuery的事件绑定与触发 - 学习笔记
jQuery的事件绑定与触发 事件绑定 自动触发事件 常用的鼠标事件 事件冒泡和默认行为 事件冒泡 默认行为 获得当前鼠标的位置和按键 jQuery的事件绑定与触发 事件绑定 基本绑定 $(eleme ...
- [HTML5]原生事件绑定和jquery动态事件绑定的区别
原生事件绑定: <!-- 标签上绑定的事件是由window对象帮助调用,因此方法内的this其实是window对象 --> <label><input type=&quo ...
- jquery 动态事件绑定(0512)
jquery动态事件绑定,父元素需为静态元素,(不能是动态生成): $("#parent").on("click","#child",fun ...
- python 全栈开发，Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))
一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...
- 对jQuery的事件绑定的一些思考
jQuery的事件绑定 问题 首先我们看下面的一个非经常见的事件绑定代码: //example $('#dom').click(function(e){ //do something }); $('# ...
- jQuery的事件绑定命名空间
jQuery的bind的函数在实际应用中用的不是特别多,只是他可以绑定一个事件,但不会即时触发,也可以通过unbind来解除绑定.在没有看到这篇文章之前,我一直不知道原来bind也可以有命名空间.事实 ...
- jQuery学习-事件绑定
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 7 HTML&JS等前端知识系列之jquery的事件绑定
preface 我们知道,每一个a,input等等标签都可以为其绑定一个事件,onclick也好,focus 也罢,都可以绑定的.但是众神key想过这个问题没有,倘若这里有1000个input标签需要 ...
- jQuery中事件绑定到bind、live、delegate、on方法的探究
1. 给页面上的某个元素绑定事件,最初采用下面的方式实现: $(‘selector’).click(function(){ //code }); 缺点: 不能同时绑定多个事件,不能绑定动态的元素. 后 ...
随机推荐
- 动态设置表格[GridView]在编辑时 只读。
找到GridView的CellEditorInitalize事件. protected void agv_main_CellEditorInitialize(object sender, ASPxGr ...
- mac复制文件命令
test1下有test01 test02两个文件 ,复制到test2下 则cp -r test1/ test2 权限不够,,则加sudo test2要事先存在, 如果复制test01到当前目录 cp ...
- 微信小程序-封装请求（GET、POST）
使用:先导入到util.js 最后在页面上导入util.js(路径自改) var util = require('../../util.js'); 使用示例GET:util.SEND(url,'GET ...
- x86 Android游戏开发专题篇之使用google breakpad捕捉c++崩溃(以cocos2dx为例)
近期一直都在x86设备上进行游戏开发.就c++层和Android java层倒没有什么要特别注意的(除了须要注意一下改动Application.mk指定平台外),在c++崩溃的时候,非常多时候看不到堆 ...
- C++中的static关键字的总结（转）
C++的static有两种用法:面向过程程序设计中的static和面向对象程序设计中的static.前者应用于普通变量和函数,不涉及类:后者主要说明static在类中的作用. 1.面向过程设计中的st ...
- UNP学习笔记（第十五章 UNIX域协议）
UNIX域协议是在单个主机上执行客户/服务器通信的一种方法 使用UNIX域套接字有以下3个理由: 1.UNIX域套接字往往比通信两端位于同一个主机的TCP套接字快出一倍 2.UNIX域套接字可用于在同 ...
- [翻译]MySQL 文档: Control Flow Functions(控制流函数)
本文翻译自13.4 Control Flow Functions Table 13.6 Flow Control Operators 名称 描述 CASE Case 运算符 IF() if/else ...
- ie 浏览器无法保存cookie,且与域名包括了下划线(_)有关系的问题
<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255) ...
- jenkins构建一个python项目
Jenkins发布后端python代码 “系统管理”“管理插件”“已安装” 检查是否有“Git plugin”和“Publish Over SSH”两个插件,如果没有,则需点击“可选插件”,找到它 ...
- mha安装报错 [error][/usr/share/perl5/vendor_perl/MHA/MasterMonitor.pm, ln361] None of slaves can be master. Check failover configuration file or log-bin settings in my.cnf
查找资料 参考 http://blog.51cto.com/16769017/1878451 解决方法: 在两个从库上开启二进制日志即可(花了 一天时间,找不到解决方法,最后还是靠自己的理解及测试解决 ...