操作标签属性和修改位置依然是属于非交互的页面.如果要进行交互,和原生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来操作.
