初窥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 相关文章推荐
JavaScript语法着色引擎(demo及打包文件下载)
Jun 13 Javascript
基于jquery的点击链接插入链接内容的代码
Jul 31 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
Apr 02 Javascript
图片轮换效果实现代码(点击按钮停止执行)
Apr 12 Javascript
javascript获取本机操作系统类型的方法
Aug 13 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
Aug 17 Javascript
js方法数据验证的简单实例
Sep 17 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
Dec 02 Javascript
JavaScript组件开发之输入框加候选框
Mar 10 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 jQuery
js验证身份证号码记录的方法
Apr 26 Javascript
layui默认选中table的CheckBox复选框方法
Sep 19 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
桌面中心(三)修改数据库
2006/10/09 PHP
php 魔术函数使用说明
2010/02/21 PHP
php正则表达式(regar expression)
2011/09/10 PHP
LotusPhp笔记之:Cookie组件的使用详解
2013/05/06 PHP
PHP实现文件上传下载实例
2016/10/18 PHP
JavaScript版DateAdd和DateDiff函数代码
2012/03/01 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
2012/12/27 Javascript
SOSO地图JS画出标注和中心点以html形式运行
2013/08/09 Javascript
js Dialog 去掉右上角的X关闭功能
2014/04/23 Javascript
jquery表单验证插件formValidator使用方法
2016/04/01 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
2016/05/24 Javascript
JavaScript之DOM插入更新删除_动力节点Java学院整理
2017/07/03 Javascript
JS自定义滚动条效果简单实现代码
2020/10/27 Javascript
jsTree事件和交互以及插件plugins详解
2017/08/29 Javascript
js实现京东秒杀倒计时功能
2019/01/21 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
2019/04/26 Javascript
element-ui上传一张图片后隐藏上传按钮功能
2019/05/22 Javascript
微信小程序网络请求实现过程解析
2019/11/06 Javascript
javascript的hashCode函数实现代码小结
2020/08/11 Javascript
[05:59]带你看看DPC的台前幕后
2021/03/11 DOTA
python去除扩展名的实例讲解
2018/04/23 Python
利用python如何处理百万条数据(适用java新手)
2018/06/06 Python
python中强大的format函数实例详解
2018/12/05 Python
python实现定时发送qq消息
2019/01/18 Python
使用tensorflow显示pb模型的所有网络结点方式
2020/01/23 Python
PyTorch的torch.cat用法
2020/06/28 Python
Kmeans均值聚类算法原理以及Python如何实现
2020/09/26 Python
Python 将代码转换为可执行文件脱离python环境运行(步骤详解)
2021/01/25 Python
多视角3D逼真HTML5水波动画
2016/03/03 HTML / CSS
Reebok官方旗舰店:美国知名健身品牌锐步
2019/01/07 全球购物
4s店机修工岗位职责
2013/12/20 职场文书
幼儿园老师寄语
2014/04/03 职场文书
学校先进集体事迹材料
2014/05/31 职场文书
升学宴学生致辞
2015/07/27 职场文书
2015年幼师个人工作总结
2015/10/15 职场文书
2019年度行政文员工作计划范本!
2019/07/04 职场文书