learning jQuery 学习笔记六（+jQuery 1.4.1 API）-- 事件捕获+事件冒泡+模仿事件

注：本笔记内容摘自《jQuery基础教程》+ jQuery 1.4.1中文参考

事件捕获 和 事件冒泡

事件捕获：允许多个元素响应单击事件的一种策略叫做事件捕获。在事件捕获的过程中，事件首先会交给最外层的元素，接着再交给更具体的元素。事件冒泡：与捕获事件相反，即当事件发生时，会首先发送给最具体的元素，在这个元素获得响应机会之后，事件会向上冒泡到更一般的元素。不同的浏览器开发者们最初采用的是不同的事件传播模型。因而，最终出台的DOM标准规定应该同时使用这两种策略：首先，事件要从一般到具体进行捕获，然后事件再过冒泡返回DOM树的顶层。而事件处理程序可以注册到这个过程中的任何一部分。并不是所有的浏览器都为了与新标准保持一致而进行了更新。而且，对于那些支持捕获的浏览器来说，通常必须明确启用才行。为了提供跨浏览器的一致性，jQuery始终在模型的冒泡阶段注册处理程序。因此，我们总是可以假定最具体的元素会首先获得响应事件的机会。

事件目标：纯javascript属性event.target事件粗粒程序的变量event保存着事件对象。而event.target属性保存着发生事件的目标元素。这个属性DOM API中规定的，但是没有被所有浏览器实现。jQuery对这个事件对象进行了必要的扩展，从而在任何浏览器中都能够使用这个属性。通过.target,可以确定DOM中首先接收到事件的元素（即被实际单击的元素）。而且，我们知道this应用的是处理事件的DOM元素，所以可以编写下列代码：$(document).ready(function(){$(‘#switcher’).click(function(event){if(event.target == this){$(‘#switcher .button’).toggleClass(‘hidden‘);}});});此时的代码确保了被单击的元素是<div id=”switcher”>，而不是其它后代元素。XML DOM target 事件属性定义和用法target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。语法event.target

停止事件传播：纯javascript属性event. stopPropagation()Javascript 参考手册stopPropagation() 方法定义和用法不再派发事件。终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。语法event.stopPropagation()说明该方法将停止事件的传播，阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意，虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用，但是它可以阻止把事件分派到其他节点。

默认操作：event.preventDefault()定义和用法取消事件的默认动作。语法event.preventDefault()说明该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。例如，如果 type 属性是 "submit"，在事件传播的任意阶段可以调用任意的事件句柄，通过调用该方法，可以阻止提交表单。注意，如果 Event 对象的 cancelable 属性是 fasle，那么就没有默认动作，或者不能阻止默认动作。无论哪种情况，调用该方法都没有作用。

模仿事件操作

返回值:jQuery            trigger(type, [data])

在每一个匹配的元素上触发某类事件。

这个函数也会导致浏览器同名的默认行为的执行。比如，如果用trigger()触发一个'submit'，则同样会导致浏览器提交表单。如果要阻止这种默认行为，应返回false。

参数

typeString,Event,Object

一个事件对象或者要触发的事件类型

data (可选)Array

(可选)传递给事件处理函数的附加参数

示例

描述:

提交第一个表单，但不用submit()

jQuery 代码:

$("form:first").trigger("submit")

描述:

给一个事件传递参数

jQuery 代码:

$("p").click(function (event, a, b) {

  // 一个普通的点击事件时，a和b是undefined类型

  // 如果用下面的语句触发，那么a指向"foo",而b指向"bar"

}).trigger("click", ["foo", "bar"]);

描述:

下面的代码可以显示一个"Hello World"

jQuery 代码:

$("p").bind("myEvent",function (event, message1, message2) {

  alert(message1 + ' ' + message2);

});

$("p").trigger("myEvent",["Hello","World!"]);