事件机制
事件中的冒泡现象
严格来说,事件在出发后分为两个阶段:一个是捕获,另一个是冒泡;但大多数浏览器并不不是都支持捕获阶段,jQuery也不支持。因此在事件出发后,往往执行冒泡过程。所谓冒泡其实质就是事件执行中的顺序。
如何阻止冒泡的发生
在jQuery中,可以通过stopPropagation()方法可以阻止冒泡过程的发生。
在代码中,除了使用stopPropagation()方法阻止事件的冒泡过程外,还可以通过语句return false实现停止事件的冒泡过程
页面载入事件
ready()方法的工作原理
在jQuery脚本加载到页面时,会设置一个isReady的标记,用于监听页面加载的进度。遇到执行ready()方法时,通过查看isReady值是否被设置,如果未被设置,那么就说明页面并未加载完成,在此情况下,将未完成的部分用一个数组缓存起来,当全部加载完成后,再将未完成的部分通过缓存一一执行。
ready()方法的几种写法
写法一:
$(document).ready(function(){
})
写法二:
$(function(){
})
写法三:
jQuery(document).ready(function(){
})
写法四:
jQuery(function(){
})
绑定事件
使用bind()方法绑定事件
bind()功能是为每个选择元素的事件绑定处理函数,其语法格式:
bind(type,[data],fn)
其中参数type为一个或多个类型的字符串,也可以自定义类型;参数data是作为even.data属性值传递给事件对象的额外数据对象;参数fn是绑定到每个选择元素的事件中的处理函数。
如果要在一个元素中绑定多个事件,可以将事件用空格隔开。
通过映射方式绑定事件
在jQuery绑定事件时,还可以通过传入一个映射,对所选对象绑定多个事件处理函数。
切换事件
在jQuery中,有两个方法用于事件的切换,一个是hover(),另一个是toggle()。所谓切换事件,即有两个以上的事件绑定一个元素,在元素的行为动作间进行切换。
hover()方法
hover()功能是当鼠标移动到所选元素的上面时,执行指定的第一个函数;当鼠标移出这个元素时,执行指定的第二个元素,其语法格式:
hover(over,out)
其中,参数over为鼠标移到元素时触发的函数,参数out为鼠标移出元素时触发的函数
toggle()方法
在toggle()方法中,可以依次调用N个指定的函数,直到最后一个函数,然后重复对这些函数轮番调用。
toggle()方法的功能是每次单击后依次调用函数,通过函数设置的前后顺序进行调用,其调用的语法格式如下:
toggle(fn,fn2,[fn3,fn4,...])
其中参数fn,fn2,..,fnN为单击时被依次调用的函数
移除事件
unbind()方法移除元素绑定事件
unbind()的功能是移除元素绑定的事件,其调用的语法格式:
unbind([type],[fn])
其中,参数type为移除的事件类型,fn为需要移除的事件处理函数。如果该方法没有参数移除所有绑定的事件;如果带有参数type,移除该参数所指定的事件类型;如果带有参数fn,则只移除绑定时指定的函数fn。
unbind()方法不仅可以移除某类型的全部事件,还可以移除某个指定的自定义事件。
其他事件
one()方法
one()方法功能是为所选的元素绑定一个仅触发一次的处理函数,其调用的语法格式:
one(type,[data],fn)
其中,参数type为事件类型,即需要触发什么类型的事件;参数data为可选参数,表示作为event.data属性值传递给事件对象的额外数据对象;fn为绑定事件时所需要触发的函数。
trigger()方法
trigger()方法的功能是在所选择的元素上触发指定类型的事件。其调用格式:
trigger(type,[data])
其中,参数type为触发时间的类型,参数data为可选,表示再触发事件时传递给函数的附加函数。