初窥JQuery(二)事件机制(2)


Posted in Javascript onDecember 06, 2010

简单的说Jquery的事件处理机制就相当与在HTML标签中指定各种事件,比如onclick(),keydown()等,在标签中指定事件对应到Javascript的函数,便于我们实现我要求。而JQuery的事件处理则是将这些事件绑定到脚本内部,使我们无须将函数暴露在标签中,而且使用起来非常方便。

 

在介绍方法之前,我觉得有必要描述一下响应事件的两种策略,一种是事件捕获(Event capturing),一种是事件冒泡(Event bubble),这两种策略是相对立的,它们是在浏览器大战中分别由Netscape和微软提出的完全相反的两种事件传播模型。事件冒泡定义为在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层。而事件捕获则与事件冒泡则恰好相反,处理事件是从对象的最外层往里传播,直到终止。W3C标注是支持两种事件处理策略的,但是却更偏向于事件冒泡,因为事件捕获Bug较多,目前IE是不支持事件捕获的,其他浏览器基本两种都支持。下面我给一个事件冒泡的例子,自己试一下就明白了,至于事件捕获就算了.....
事件冒泡

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>JavaScript事件冒泡</title> 
<style type="text/css"> 
#box {width:200px; height:100px; border:2px solid red} 
#box h5 {margin:0; padding:2px 5px; font-size:18px; text-align:right; background:red; cursor:move} 
#box h5 a {text-decoration:none; color:#FFF} 
#box div{ white-space:inherit;} 
</style> 
</head> 
<body> 
<div id="box"> 
<h5 onmousedown="startDrag();"><a onmousedown="closeBox();" href="javascript:void(0);">关闭</a></h5> 
<div id="testInfo"></div> 
</div> 
<script type="text/javascript"> 
function startDrag() { 
document.getElementById('testInfo').innerHTML += '层事件'; 
} 
function closeBox(e) { 
document.getElementById('testInfo').innerHTML += '关闭事件'; 
//将下面一段注释去掉则可以阻止冒泡 
// if (e && e.stopPropagation) 
// e.stopPropagation(); 
// else 
// window.event.cancelBubble = true; 
} 
</script> 
</body> 
</html>

那么在JQuery中阻止事件策略的方法有event.preventDefault();(阻止默认行为)、event.stopPropagation();event.stopImmediatePropagation();(阻止事件冒泡)、直接返回return false;(阻止默认行为和时间冒泡)。

事件处理包括bind(type,[data],fn)、bind(map)、one(type,[data],fn)、trigger(type,[data])、triggerHandler(type,[data])、unbind([type],[data])这几个方法。

1、bind(type,[data],fn)用于为指定元素绑定指定的事件处理函数,[data]代表可选的传递的参数,它的写法为:

//带参数的绑定方式 
$("#text").bind('click', { result: "yes" }, function(event) { 
alert(event.data.result); 
}) 
//不带参数并且阻止冒泡 
$("#text").bind('click', function(e) { 
//自定义处理行为 
e.stopPropagation(); 
})

其实bind(type,[data],fn)这种绑定事件的方式我们还有一种简写的方式,但是他们的区别在于简写方式不能如bind一样指定参数[data],他的写法就是直接将bind中type参数执行,如下:
$("#text").click(function(e) { 
//自定义处理行为 
alert("简写方式"); 
})

2、bind(map)就是一次性为元素绑定多个事件处理函数,写法如下
$('#text').bind({ 
click: function() { 
alert("bind(map)绑定的click事件"); 
}, 
mouseenter: function() { 
alert("bind(map)绑定的mouseenter事件"); 
} 
});

3、one(type,[data],fn)指定事件只执行一次,写法与bind()方法一样,在此就不做示范。

4、trigger(type,[data])、triggerHandler(type,[data])其实作用是一样的,都是在每一个匹配的元素上触发某类事件,唯一的区别就是前者是执行事件冒泡事件的,而后者只执行指定元素的事件。下面做个比较:

//HTML代码: 
<button id="trigger">trigger()</button> 
<button id="triggerHandler">triggerHandler()</button><br/><br/> 
<div id="triggerdiv"> 
<div id="tri"></div> 
</div> 
//JQuery代码 
$("#triggerdiv").click(function() { 
alert("DIV触发"); 
}); 
$("#trigger").click(function() { 
$("#tri").trigger("click"); 
}); 
$("#triggerHandler").click(function() { 
$("#tri").triggerHandler("click"); 
}); 
$("#tri").click(function() { 
alert("子集DIV触发"); 
});

5、unbind([type],[data])就再简单不过了,删除指定元素的绑定事件,如果指定type参数则删除指定的事件,如果没有指定则删除该指定元素的所有事件。

在这些事情机制中我最常用到的还是bind方法,再常用的就是它的简写方式。当然这些事件机制是可以结合起来用的,关键看业务需求而定。

前面有人说我写的太简单了,在这里我也再次声明一下,我讲的是基础,我本身接触JQuery也没多久,用意在于加深自己记忆和给刚学习JQuery的朋友一些资料而已,并不是想说我JQuery很厉害。希望大家共同学习,一起进步。未完待续......

Javascript 相关文章推荐
xml和web特殊字符
Apr 28 Javascript
图像替换新技术 状态域方法
Jan 28 Javascript
js jquery数组介绍
Jul 15 Javascript
Web表单提交之disabled问题js解决方法
Jan 13 Javascript
谈谈Jquery中的children find 的区别有哪些
Oct 19 Javascript
JS获取数组最大值、最小值及长度的方法
Nov 24 Javascript
JavaScript生成二维码图片小结
Dec 27 Javascript
javascript获取wx.config内部字段解决微信分享
Mar 09 Javascript
JavaScript事件处理的方式(三种)
Apr 26 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
Sep 08 Javascript
tracking.js页面人脸识别插件使用方法
Apr 16 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
Aug 11 Javascript
2010年最佳jQuery插件整理
Dec 06 #Javascript
jquery提升性能最佳实践小结
Dec 06 #Javascript
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
Dec 06 #Javascript
使用JS进行目录上传(相当于批量上传)
Dec 05 #Javascript
js对象的构造和继承实现代码
Dec 05 #Javascript
收集的一些Array及String原型对象的扩展实现代码
Dec 05 #Javascript
script标签的 charset 属性使用说明
Dec 04 #Javascript
You might like
解析php多线程下载远程多个文件
2013/06/25 PHP
PHP函数shuffle()取数组若干个随机元素的方法分析
2016/04/02 PHP
Laravel最佳分割路由文件(routes.php)的方式
2016/08/04 PHP
PHP实现的AES加密、解密封装类与用法示例
2018/08/02 PHP
js动态为代码着色显示行号
2013/05/29 Javascript
jQuery通过扩展实现抖动效果的方法
2015/03/11 Javascript
Jquery遍历Json数据的方法
2015/04/20 Javascript
JS+CSS实现的蓝色table选项卡效果
2015/10/08 Javascript
浅谈JavaScript for循环 闭包
2016/06/22 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
2017/06/20 jQuery
浅谈angular4生命周期钩子
2017/09/05 Javascript
JS随机数产生代码分享
2018/02/24 Javascript
浅谈super-vuex使用体验
2018/06/25 Javascript
vue代码分割的实现(codesplit)
2018/11/13 Javascript
VuePress 快速踩坑小结
2019/02/14 Javascript
JQuery特殊效果和链式调用操作示例
2019/05/13 jQuery
JS数组进阶示例【数组的几种函数用法】
2020/01/16 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
2020/12/01 Javascript
[56:01]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 Effect vs EG
2018/03/31 DOTA
python批量导出导入MySQL用户的方法
2013/11/15 Python
详解python运行三种方式
2019/05/13 Python
Django用户认证系统 组与权限解析
2019/08/02 Python
Python PyInstaller库基本使用方法分析
2019/12/12 Python
在 Linux/Mac 下为Python函数添加超时时间的方法
2020/02/20 Python
django实现HttpResponse返回json数据为中文
2020/03/27 Python
canvas绘制图片drawImage使用方法
2020/09/15 HTML / CSS
Viking比利时:购买办公用品
2019/10/30 全球购物
C和C++经典笔试题附答案解析
2014/08/18 面试题
自荐信要包含哪些内容
2013/11/06 职场文书
幼儿园实习自我鉴定
2013/12/15 职场文书
书香校园活动方案
2014/02/28 职场文书
2014年司法所工作总结
2014/11/22 职场文书
党员进社区活动总结
2015/05/07 职场文书
用Python将库打包发布到pypi
2021/04/13 Python
redis哨兵常用命令和监控示例详解
2021/05/27 Redis
Nginx如何配置根据路径转发详解
2022/07/23 Servers