初窥JQuery(二)事件机制(2)
简单的说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很厉害。希望大家共同学习，一起进步。未完待续......
相关推荐
-
初窥JQuery(二) 事件机制(1)
当然它的优点并不只在于这点,使用JQuery事件处理机制比直接使用Javascript本身内置的一些事件相应方式更加的灵活,更加不容易暴露在外,而且有更加优雅的语法,大大减少了我们工作的量度. JQuery的事件处理机制包括:页面加载.事件绑定.事件委派.事件切换四种机制.我们先从$(document).ready()事件开始. 一.页面加载$(document).ready()相当与Javascript中的onLoad()事件,都是在页面加载的时候执行该方法,但是两者又有着微妙的差别,read
-
实例讲解jQuery中对事件的命名空间的运用
用 jQuery 绑定和解绑事件监听器都是非常简单的.但是当你为一个元素的一个事件绑定了多个监听器时,怎样精确地解绑其中一个监听器?我们需要了解一下事件的命名空间. 看下面这段代码: $("#element") .on("click", doSomething) .on("click", doSomethingElse); 像上面这样绑定事件监听器,当元素被点击时,doSomething 和 doSomethingElse 这两个监听器都会被触发
-
深入浅出 jQuery中的事件机制
首先呢,我们先来看一下,jQuery中的ready事件,它的作用有些类似于window中的onload事件,只不过二者的区别在于,onload事件是要等到网页中的dom节点加载完成,并且css进行样式渲染后,JavaScript中进行了预加载后再执行,而ready事件呢,是在网页中的标签被解析为DOM节点是就执行其中的函数,直白点说,ready执行的比onload早,那么我们在用jQuery的时候,需要做一个ready的执行定义: //ready的作用,是为具体加载的实现. $(document
-
jquery利用命名空间移除绑定事件的方法
本文实例讲述了jquery利用命名空间移除绑定事件的方法.分享给大家供大家参考.具体分析如下: 最近研究jquery,发现了一个简单移除绑定事件的方法,命名空间. 例子很简单. 这里我绑定了三个事件,分别是click,mouseover和dblclick事件 其中click和mouseover事件我加入了命名空间,而dblclick没有加入命名空间. 利用一个button移除了绑定的事件. 这样避免了重复的使用bind和unbind方法,让你的代码看起来更简洁明了. 复制代码 代码如下: <sc
-
jQuery事件处理的特征(事件命名机制)
JQuery中的bind()和unbind(),提供了事件的绑定和取消机制,既可以绑定html默认支持的事件,也能够绑定自定义的事件.JQuery支持自定义事件,这显然给编程带来了极大的灵活性.下面就一起学习下,jquery事件处理的一些特性. 1.JQuery中事件可以重复绑定,不会覆盖. $("#button1").bind("click",function(){ alert("func1"); }); $("#button1&qu
-
jquery事件机制扩展插件 jquery鼠标右键事件
因为最近技术长进缓慢,也没高手带,只能靠自己了,所以想仿个WEBQQ来锻炼下自己.做之前最好先把必要的东西准备好.jquery其实本身的事件机制就很完善了,包括了单击,双击,鼠标移入,鼠标移出等.但是却少了一个做事件.就是鼠标右击事件.当然大家也是直接用侦听鼠标按下事件,然后通过if来判断执行相应的函数.造成鼠标右击事件的效果. 但是这不是我想要的,我想要的似乎这个事件可以跟其它事件比如单击事件一样.可以被方便的使用,而不需要每次都去判断.这里通过编写jquery插件的形式扩展,让这个方法可以直
-
jQuery中绑定事件的命名空间详解
在没有看到这篇 文章之前,我一直不知道原来bind也可以有命名空间.事实上,我看完这篇文章后,再去翻了一下手册,也才发现了一点点的注释.但手册也仅仅是一句话就带 过去了.没有过多的深究,或许他认为命名空间这玩意很简单,没有必要多解释? 先看手册,由于bind方法有三个参数(type,[data],fn),所以手册上这么介绍: .bind() 方法是用于往文档上附加行为的主要方式.所有JavaScript事件对象, 比如focus, mouseover, 和 resize,都是可以作为type参数
-
jquery新的绑定事件机制on方法的使用方法
浏览jQuery的deprecated列表,发现live()和die()在里面了,赶紧看了一下,发现从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理事件绑定.因为在此之前有 bind(), live(), delegate()等方法来处理事件绑定,jQuery从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法. on(events,[selector],[data],fn) events:一个或多个用空格分隔的
-
jQuery 事件的命名空间简单了解
用 jQuery 绑定和解绑事件监听器都是非常简单的.但是当你为一个元素的一个事件绑定了多个监听器时,怎样精确地解绑其中一个监听器?我们需要了解一下事件的命名空间. 看下面这段代码: 复制代码 代码如下: $('#element') .on('click', doSomething) .on('click', doSomethingElse); 像上面这样绑定事件监听器,当元素被点击时,doSomething 和 doSomethingElse 这两个监听器都会被触发.这是使用 jQuery 的
-
初窥JQuery(二)事件机制(2)
简单的说Jquery的事件处理机制就相当与在HTML标签中指定各种事件,比如onclick(),keydown()等,在标签中指定事件对应到Javascript的函数,便于我们实现我要求.而JQuery的事件处理则是将这些事件绑定到脚本内部,使我们无须将函数暴露在标签中,而且使用起来非常方便. 在介绍方法之前,我觉得有必要描述一下响应事件的两种策略,一种是事件捕获(Event capturing),一种是事件冒泡(Event bubble),这两种策略是相对立的,它们是在浏览器大战中分别由Net
-
jquery入门——事件机制之事件中的冒泡现象示例解释
1.当用户浏览页面时,浏览器会对页面代码进行解释或编译--这个过程实质上是通过事件来驱动的,即页面在加载时,执行一个Load事件,在这个事件中实现浏览器编译页面代码的过程.事件被触发后被分为两个阶段,一个是捕获(Capture),另一个是冒泡(Bubbing),但大多浏览器并不是都支持捕获阶段,因此事件被触发后,往往执行冒泡过程. 2.示例代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN
-
初窥JQuery(一)jquery选择符 必备知识点
本章内容根据本人在开发中常用到的选择符作为例子来进行讲解,如有更多常用的简单的例子可回复提供,参与讨论,一起学习研究,首先我们从常用的CSS选择符开始. CSS选择符包括通配选择符.ID选择符.属性选择符.包含选择符.类选择符等,他们的基本格式为: 通配选择符:$("#ID *") 表示该元素下的所有元素. ID选择符:$("#ID") 表示获得指定ID的元素. 属性选择符:$("input[type=text]") 表示type属性为text的
-
jquery事件机制扩展插件 jquery鼠标右键事件。
jquery其实本身的事件机制就很完善了,包括了单击,双击,鼠标移入,鼠标移出等.但是却少了一个做事件.就是鼠标右击事件.当然大家也是直接用侦听鼠标按下事件,然后通过if来判断执行相应的函数.造成鼠标右击事件的效果. 但是这不是我想要的,我想要的似乎这个事件可以跟其它事件比如单击事件一样.可以被方便的使用,而不需要每次都去判断.这里通过编写jquery插件的形式扩展,让这个方法可以直接使用$().rightClick();来使用. jQuery的插件主要分3种类型 1.封装对象方法的插件 (这种
-
jQuery 绑定事件的方式总结
jQuery 绑定事件 jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点,有助于我们在写代码的时候进行正确的选择,从而写出优雅而容易维护的代码.下面我们来看下jQuery中绑定事件的方式都有哪些. jQuery中提供了四种事件监听方式,分别是bind.live.delegate.on,对应的解除监听的函数分别是unbind.die.undelegate.off.在开始看他们之前 一:bind(type,[data],function(eventObjec
-
jQuery绑定事件的四种方式介绍
jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点,有助于我们在写代码的时候进行正确的选择,从而写出优雅而容易维护的代码.下面我们来看下jQuery中绑定事件的方式都有哪些. jQuery中提供了四种事件监听方式,分别是bind.live.delegate.on,对应的解除监听的函数分别是unbind.die.undelegate.off.在开始看他们之前 一:bind(type,[data],function(eventObject)) bind是使用频率较高的一
-
深入解析JavaScript框架Backbone.js中的事件机制
事件模型及其原理 Backbone.Events就是事件实现的核心,它可以让对象拥有事件能力 var Events = Backbone.Events = { .. } 对象通过listenTo侦听其他对象,通过trigger触发事件.可以脱离Backbone的MVC,在自定义的对象上使用事件 var model = _.extend({},Backbone.Events); var view = _.extend({},Backbone.Events); view.listenTo(model