jQuery基础——事件

写在前面

参考文献：莫振杰《从0到1：jQuery快速上手》

这期主讲事件。

事件基础

什么是事件？

有动作（事件类型），有结果（函数）。

事件的组成？

事件主体

事件类型

事件过程

基本事件：

页面事件

鼠标事件

键盘事件

表单事件

编辑事件

滚动事件

---

下面展开细说。

页面事件

什么是页面事件？

跟页面的展示过程有关。

页面的展示过程？

页面在加载文件的过程。

页面事件包含什么？

在这里，我们只需要掌握页面加载完成才执行的事件即可，也就是JS中的onload事件。

JS中的onload

语法：window.onload = function () { }

只有当页面上的所有DOM元素以及外部文件全部加载完成之后，才会执行onload函数里面的代码。

注意，是所有DOM元素，以及外部文件全部加载完成之后。

这是JS的用法，JQ是怎么实现类似的效果的？

JQ中的ready

语法：$(document).ready(function() { })

虽然跟JS中的onload事件很像，但是还是有以下区别：

JQ中的ready只需要页面上所有的DOM元素加载完成就开始执行function里面的内容，这意味着不需要等待外部文件的加载——响应速度更高，用户体验更好。

四种写法：

1.$(document).ready(function () { })

2.jQuery(document).ready(function() { })

3.$(function() { })

4.jQuery(function() { })

从上面的写法可以看出，符号$等价于jQuery。

实际上，我们一般使用第三种写法。

区别：

在JS中，我们不能同时使用多个onload事件，否则只会执行最后一个。（解决方法是什么？）

而在JQ中，我们可以同时使用多个ready事件。

---

鼠标事件

鼠标是人机交互最重要的一个工具了，所以鼠标事件很重要。

常见的鼠标事件：

click	单击
mouseover	移入
mouseout	移出
mousedown	按下
mouseup	松开
mouseover	移动

 

 

 

 

 

 

可以看出，这些事件名相较于JS都少了on前缀。

语法：$().鼠标事件(function() { })

这里不展开细说。

注意：

1.先有按下mousedown，才有松开mouseup

2.后面三个经常一起使用

键盘事件

键盘事件就两个，按下和松开，对应着：

keydown、keyup

语法：$().键盘事件(function() { })

表单事件

表单事件就三个：

focus和blur

select

change

对应着表单控件（单选/复选框、输入框、下拉列表，a标签也是）、输入框、单选/复选框。

语法：$().表单事件(function () { })

focus和blur

获取和失去焦点时触发的事件。

不是所有的HTML元素都具有焦点事件，具有焦点事件的元素只有：

表单元素

超链接

它们的共同特点：都能够通过按下Tab键获取焦点。

如果我想要一进入页面，就获取焦点，该怎么实现？

使用focus()方法即可，这跟JS中的方法是一致的。

语法：$().focus()

select

选中事件，当我们选中文本框中的内容时触发。

注意，这不是选中下拉列表中的某一项时触发的。

这点需要注意，这跟JS中是一样的。

如果我想要实现单击文本框，就全选文本框中的内容，该怎么实现？

使用select()方法即可。

语法：$().select()

注意：select()和focus()一样，不仅可以作为一个事件，也可以作为一个方法。

change

上面说过了，select是选中文本框的内容时触发的，那当我选中下拉列表中的某一项时会触发什么事件？

这就是change事件，change事件包含：

单选框/复选框选中某一项

下拉列表选中某一项

注意，这里是三个场景。

我们怎么选取单选框？

使用属性选择器即可。

我们怎么选取表单元素的属性？

使用attr()方法无法获取时，使用prop()方法获取。

一般来说，表单元素的checked、selected、disabled这些属性，都是使用prop()方法获取的。

我们怎么选取表单元素中的属性值？

使用val()方法即可。

编辑事件

在JQ中，编辑事件就一个：contextmenu事件，也就是右键菜单。

语法：$().contextmenu(function () { })

一般都是用来保护版权的，很少用。

滚动事件

滚动，一般都是跟页面的滚动有关系。

页面的滚动一般都有滚动条，而跟页面滚动条有关系的，一般都是回到顶部。

语法：$().scroll(function () { })

不过，为了更好地使用，一般是配合着scrollTop()方法一起使用。

注意，scrollTop()方法返回的是一个数字；scrollTop()方法不仅可以获取高度，也可以设置高度。

---

下面进入到事件进阶部分内容。

事件进阶

什么是事件进阶，这是我一直百思不得其解的问题。

事件基础里面介绍的事件都有一定的限制，基本都是某些元素特有的事件。

绑定事件

除了使用“基本事件”的方式为元素添加事件以外，还可以使用“绑定事件”的方式。

我们可以使用on()方法为元素绑定一个事件，或者多个事件。

JQ中的on方法跟JS中addEventListener()方法——添加事件监听器类似。

语法：$().on(type, fn)

这是简略语法，type是必选参数，是一个字符串，表示事件类型；fn也是必选参数，是一个匿名函数。

在JQ中，除了使用“基本事件”可以为元素添加事件以外，还可以使用“绑定事件”。

on()方法不仅可以给已经存在的元素添加事件，还可以给动态创建的元素添加事件。

解绑事件

有绑定事件，就有解绑事件，这两个是一同出现的。

语法：$().off(type)

type是可选参数，是一个字符串，表示事件类型。

on和off是相对的，我们可以使用英文来记忆；所以说，这两个一个是绑定事件，一个是解绑事件。off()方法跟我们之前常见的remove()方法是不一样的，跟remove相对的是add。

off()方法不仅可以解除“基本事件”添加的事件，也可以解除“绑定事件”添加的事件。

合成事件

合成，顾名思义就是两个及其以上的事件合为一个。

之前的在“基本事件”中就有两个非常适合合成的事件，那就是“鼠标移入”和“鼠标移出”事件。

这跟我们认识中的hover是非常类似的，所以说这两个事件可以合并成hover事件。

而hover就是合成事件里面的一个例子。

语法：$().hover(fn1, fn2)

fn1表示mouseenter——鼠标移入所触发的处理函数，fn2表示mouseleave——鼠标移出所触发的处理函数。

沃特，为什么不是mouseover和mouseout？

如果mouseover和mouseout能够合成hover()方法，那我们为什么还要在前面学习？

当然啦，正经的解释应该是事件冒泡。

这里补充一下，什么叫做事件冒泡。

事件冒泡

冒泡是啥？

我们知道，泡泡在水里是一直往上移动的，慢慢变大，然后浮出水面，就爆掉了。

而事件冒泡其实就跟泡泡在水里向上移动有一定的关系。

mouseover——当鼠标进入到某个元素时触发函数，而如果这个元素的父元素A也有mouseover事件，就会一并触发；而如果这个父元素A也有父元素B，且父元素B也有mouseover事件，也会一并触发；然后继续向上寻找父元素，以及父元素内部的mouseover，然后触发该mouseover事件；这个特性就被称为冒泡。

OK，这就是事件冒泡，在JS、JQ两本书中，没提过这个概念。

所以，这里作为补充。

多看书，看不同的书，多去思考是有用的。

hover的意思是经过。

一般来说，经过这个动作只触及到该元素，而不会触及到该元素的父元素，所以我们这里只需要

所以说，我们在介绍鼠标事件的时候，是不是没学到mouseenter()和mouseleave()？

一次事件

一次事件，也就是说，只触发一次的事件。

在JQ中，我们使用one()方法来实现一次事件。

one，简单且直白。

语法：$().one(type, fn)

type是必选参数，它是一个字符串，表示事件类型。

fn也是必选参数，它是一个匿名函数，表示事件的处理函数。

实际上，one()方法也可以使用on()和off()方法进行模拟。

直接在on()方法的内部，调用off()方法即可。

自定义事件

在JQ中，我们可以使用on()方法来自定义一个事件，然后使用trigger()方法来触发自定义事件。

语法：

$().on(type, fn)

$().trigger(type)

type方法是自定义类型，fn是处理函数。

实际上，使用trigger()方法不仅可以触发自定义函数，还可以触发任意JQ事件。

Event对象

跟JS中的Event对象是一样的，都是用于保存这个事件有关的所有详细信息。

Event对象常用的属性：

type	事件类型
target	事件元素
which	鼠标左、中、右键
pageX、pageY	鼠标坐标
shiftKey	是否按下Shift键
ctrlKey	是否按下Ctrl键
altKey	是否按下Alt键
keyCode	键码值

语法：e.属性

e.target用于获取触发事件的元素。

在JS中，事件是“冒泡”的，所以this是可以变化的，但是e.target是不会变化的，因为e永远指向触发事件的元素。

一般来说，$(this)和$(e.target)是等价的。

e.which的返回值是一个数字，其中1表示左键，2表示中键，3表示右键。

e.pageX和e.pageY分别表示鼠标相对于页面左上角的坐标，该坐标是以页面作为参考点，不随着滚动条的移动而变化。

这两个返回值都是数字，而不是字符串。

keyCode

用于获取在键盘上按下的是哪个键，可以使用e对象的keyCode属性。

返回值是数值，而不是字符。

而shiftKey、ctrlKey、altKey这三个返回值是true或false。

this

在JQ中，this始终指向触发当前事件的元素。

---

写在最后

OK，这就是事件了。

事件里面最重要的就是那个自定义事件了。

别的，其实很少用到，除非你打算做游戏。