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