jQuery学习笔记（三）

jQuery事件小结

事件绑定

.on("eventname", [selector], [data], fn): eventname是一个字符串,代表事件的名称。[selector]选择器选择事件绑定到哪些元素上。[data]是一个对象，data对象在fn中可以使用event.data来引用。(这个属性我还没发现有什么卵用),这个方法可以在同一个元素上绑定多个事件处理

.on("eventMap", [selector], [data]): eventMap是一个对象，其每个键值对分别表示事件名称和事件处理函数。该方法用于绑定多个事件。

.bind("eventname", [data], fn): 这个方法最好使用on方法代替

.bind("eventname1 eventname2", [data], fn): 用于多个事件绑定同一个处理函数的情况。这里的处理函数可以是toggle之类的函数。

.toggle(fn1, fn2, [f3, f4, ... fn]): 模拟鼠标多次点击的事件

.hover(enter, leave): 这个事件绑定方法模拟鼠标进入和离开元素的事件，其中enter和leave是两个事件处理函数，分别处理mouseenter和mouseleave事件，注意不是mouseover和mouseout事件

click([fn]) blur([fn]) focus([fn]) dbclick([fn]): 等方法，如果不加fn的话，代表模拟触发事件，否则代表事件的绑定

one("eventname", [data], fn): 代表事件只会触发一次，然后移除事件绑定。其它的跟bind一样

事件移除

.unbind("eventname", [data]): 将元素上的事件移除

.off("eventname", [selector], [data], [fn]): 将选择出来的元素上面的某个事件的事件处理函数移除，如果不带fn,则移除所有对应的事件处理函数

事件触发

.trigger("eventname", [data]): 在元素上触发某个事件

.triggerHandler("eventname", [data]): 在元素上触发某个事件，并且不触发浏览器的默认动作

事件冒泡、捕获、默认行为

首先说明，jQuery是不支持事件捕获的

事件的捕获指的是：一个事件发生之后，DOM元素是从最外层开始捕获这个事件的。即先捕获的事件的元素是body,其后是body嵌套的元素…依次往下捕获

事件的冒泡指的是，事件捕获完成之后，事件处理函数从最内层的元素的事件处理函数开始调用，直到body上的事件处理函数调用结束为止，事件的冒泡是可以阻止的，详见事件对象

事件的默认行为可以理解为浏览器为事件注册了一个特殊的处理函数，事件触发的时候这个默认的处理函数也会调用，事件的默认行为也是可以阻止的，详见事件对象

同时阻止事件的冒泡和默认行为可以在事件处理函数的最后加上return false;

事件对象event：

event是fn函数的第一个参数，它是一个对象，封装了若干属性和方法

event.type: 代表事件的类型，比如”click”

event.target: 代表事件最初触发时的元素(比如body的事件处理函数的event.target往往不是body), 注意这个属性的类型是DOMElement而不是jQuery

event.currentTarget: 同上，但是代表的当前冒泡过程中的元素

event.relatedTarget: 用于mouseover和mouseout的相关元素

event.pageX和event.pageY: 代表鼠标相对于页面的坐标

event.which: 代表鼠标的三个键（1：左键，2：中键 3：右键）或者是键盘的按键

event.metaKey: 代表ctrl键

event.preventDefault(): 阻止默认的事件的行为

event.stopPropagation(): 阻止事件冒泡

event.isDefaultPrevented(): 返回是否阻止了默认事件, 判断preventDefaulted方法是否调用过

event.isStoppedPropagation(): 返回是否阻止了事件冒泡

事件命名空间

前面的事件绑定中，每个方法的eventname可以使用命名空间后缀，例如: click.foo.bar, 使用trigger()方法的时候也可以带这个命名空间。注意，在删除或者触发事件的时候，上层命名空间会包括下层命名空间，例如click也包括了click.foo. 另外， 命名空间之后加!, 表示选择不匹配该命名空间的条件

其它事件

document.ready(fn): 比window.load()具有更高的优先级，前者是在文档解析完毕之后执行，而后者是在资源加载完毕之后才执行

.load(fn): 元素的load事件，这个元素可以是window