操作标签属性和修改位置依然是属于非交互的页面.如果要进行交互,和原生JS一样,事件是非常关键的要素.
目前已经知道的绑定事件的方法有如下几种:

  • 原生JS方法:标签里写 onclick = ‘foo(this)’
  • 原生JS方法:dom对象.onclick=function(){}
  • jQuery方法:jQuery对象.事件名(function)

事件按照 绑定和移除事件–事件类型–事件委托–其他各种事件的顺序来说


绑定和移除事件

jQuery3里,唯一推荐使用的绑定事件的方法是on()方法:

jQueryObject.on(events,[selector],[data],fn)

events是指事件的类型,用一个字符串表示,后边会列出jQuery支持的所有事件类型.
selector是可以选的参数,是一个选择器.这个选择器是用来选择当前绑定的标签的所有后代中符合条件的,这里引出了事件委托的概念.
data也是可选参数,实际上是将一个对象(字典)传给绑定的元素的data属性,不常用.
fn 是函数定义,可以是一个匿名函数,也可以是定义好的函数名.

如果要移除绑定的函数,用.off()方法,其语法和on类似,可以指定解绑某一个,也可以传入空格隔开的多个事件类型一起解绑.

除此之外,如果想让一个事件就发生一次,那么就用.one(type,[data],fn)来绑定事件即可.


事件类型

常用的事件类型有:click,blur,focus,change,keyup.注意,对于这些鼠标事件,在jQuery里单独的事件hover可以使用.

在用on方法绑定事件的时候,第一个参数就是事件的名称.

事件名称 内容
blur([[data],fn]) blur事件会在元素失去焦点的时候触发,既可以是鼠标行为,也可以是按tab键离开的。可传入data供fn处理.
change([[data],fn]) 当元素的值发生改变时,会发生 change 事件。change 事件会在选择某个选项时发生。当用于 text field 或 text area 时,该事件会在元素失去焦点时发生。
click([[data],fn]) 触发每一个匹配元素的click事件。
dblclick([[data],fn]) 当双击元素时,会发生 dblclick 事件。
error([[data],fn]) 当元素遇到错误(没有正确载入)时,发生 error 事件。在大多数浏览器中,当页面的JavaScript发生错误时,window对象会触发error事件;当图像的src属性无效时,比如文件不存在或者图像数据错误时,也会触发图像对象的error事件。
focus([[data],fn]) 当元素获得焦点时,触发 focus 事件。可以通过鼠标点击或者键盘上的TAB导航触发。这将触发所有绑定的focus函数,注意,某些对象不支持focus方法。
focusin([data],fn) 当元素获得焦点时,触发 focusin 事件。focusin事件跟focus事件区别在于,focusin可以在父元素上检测子元素获取焦点的情况。
focusout([data],fn) 当元素失去焦点时触发 focusout 事件。focusout事件跟blur事件区别在于,focusout可以在父元素上检测子元素失去焦点的情况。
keydown([[data],fn]) 当键盘或按钮被按下时,发生 keydown 事件。注释:如果在文档元素上进行设置,则无论元素是否获得焦点,该事件都会发生。
keypress([[data],fn]) 当键盘或按钮被按下时,发生 keypress 事件。keypress 事件与 keydown 事件类似。当按钮被按下时,会发生该事件。它发生在当前获得焦点的元素上。 不过,与 keydown 事件不同,每插入一个字符,就会发生 keypress 事件。注释:如果在文档元素上进行设置,则无论元素是否获得焦点,该事件都会发生。
keyup([[data],fn]) 当按钮被松开时,发生 keyup 事件。它发生在当前获得焦点的元素上。注释:如果在文档元素上进行设置,则无论元素是否获得焦点,该事件都会发生。
mousedown([[data],fn]) 当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件。mousedown 与 click 事件不同,mousedown 事件仅需要按键被按下,而不需要松开即可发生。
mouseenter([[data],fn]) 当鼠标指针穿过元素时,会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。与 mouseover 事件不同,只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素,同样会触发 mouseover 事件。
mouseleave([[data],fn]) 当鼠标指针离开元素时,会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用。与 mouseout 事件不同,只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。如果鼠标指针离开任何子元素,同样会触发 mouseout 事件。
mousemove([[data],fn]) 当鼠标指针在指定的元素中移动时,就会发生 mousemove 事件。mousemove事件处理函数会被传递一个变量——事件对象,其.clientX 和 .clientY 属性代表鼠标的坐标
mouseout([[data],fn]) 当鼠标指针从元素上移开时,发生 mouseout 事件。该事件大多数时候会与 mouseover 事件一起使用。注释:与 mouseleave 事件不同,不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。
mouseover([[data],fn]) 当鼠标指针位于元素上方时,会发生 mouseover 事件。该事件大多数时候会与 mouseout 事件一起使用。注释:与 mouseenter 事件不同,不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。
mouseup([[data],fn]) 当在元素上放松鼠标按钮时,会发生 mouseup 事件。与 click 事件不同,mouseup 事件仅需要放松按钮。当鼠标指针位于元素上方时,放松鼠标按钮就会触发该事件。
resize([[data],fn]) 当调整浏览器窗口的大小时,发生 resize 事件。
scroll([[data],fn]) 当用户滚动指定的元素时,会发生 scroll 事件。scroll 事件适用于所有可滚动的元素和 window 对象(浏览器窗口)。
select([[data],fn]) 当 textarea 或文本类型的 input 元素中的文本被选择时,会发生 select 事件。这个函数会调用执行绑定到select事件的所有函数,包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。
submit([[data],fn]) 当提交表单时,会发生 submit 事件。该事件只适用于表单元素。

 

hover事件

.hover([over,]out)

hover事件的用法其实是模拟鼠标悬停在某个元素上然后移动走的事件,比原生的mouse系列要好用.hover的参数是两个函数,第一个函数用于鼠标从外部移动进来悬停在元素上的事件,第二个函数用于鼠标移出元素触发的事件.

阻止事件执行

很多时候需要阻止默认的事件发生,只需要在自己写的函数里return false即可;如果想满足某些条件让默认事件继续发生,只需要按照判断给函数多个出口,需要执行默认事件的出口用return后边不加东西即可.


事件冒泡与事件委托

所谓事件冒泡,就是一个事件会沿着标签按照父集逐层冒泡,在父级的某一个标签,设置一个委托的事件,也就是.on方法里含有选择器的事件,这个事件就能够侦听其内部(含子和更深级)的事件并且来处理,而且事件发生时候,触发事件的依然是发生事件的那个标签,不是绑定事件的父标签.这样就可以在新的元素没有添加进页面的时候,就设置好事件等着来捕捉新元素.如果不是这样的话,那事件的设置将变得很繁琐,每给页面添加一个有事件的元素,都要在元素生成之后对其绑定事件.有了事件委托之后,只需要设置一个事件委托,就会等着所有元素来触发事件.


页面载入事件

原生DOM提供的方法是将script写在body的最下边,以避免DOM模型还没有生成的时候就执行JS代码.
jQuery也提供了一个方法用于在页面完成载入的时候执行函数:

$(document).ready(function(){
// 在这里写你的JS代码...
})

还可以简写成:

$(function(){
// 你在这里写你的代码
})

jQuery补充

each方法

each其实就像是python的map方法,对其中每一个元素执行函数.详细用法看each(callback).
注意: jQuery的方法返回一个jQuery对象,遍历jQuery集合中的元素 – 被称为隐式迭代的过程。当这种情况发生时,它通常不需要显式地循环的 .each()方法.
在遍历过程中可以使用 return false提前结束each循环。

data方法

data方法可以在一个jQuery对象指向的元素里存放数据,可以是字符串,数字和jQuery对象.这个在很多时候很有用处,可以把一个元素当成一个拥有数据的对象来传递,具体看API解释:data,搭配使用的还有.removeData(key).

可以看到,完全可以脱开原生JS和DOM,而全部采用jQuery对页面元素进行操作,jQuery提供了一系列方法并且包装了对象,可以修改样式,属性,内容,并且响应各种事件.还可以直接在jQuery对象上存储数据.在之后的页面中,尽量采用jQuery来操作.