什么是事件和事件处理器？

什么是事件？

网页由各种元素组成，例如按钮、文本框、段落、链接、图片、表单等。用户通过执行多种操作与这些元素进行交互。这些操作包括但不限于点击元素、在文本框中输入文字、将鼠标悬停在元素上。这些操作都是网页上发生的事件示例。

事件 是用户执行的某个动作，该动作会触发网页的响应。

下图展示了 jQuery 中不同类型的事件。我们主要关注鼠标和键盘相关的事件。

什么是事件处理器？

如上所述，用户可以在网页上执行无数种事件。这引出了两个关键问题：

• 如何检测某个特定事件是否被触发？
• 如何对已触发的事件进行响应？

这时就用到了事件处理器。

事件处理器 会持续监听指定元素上的特定事件。一旦事件被触发，事件处理器就会执行定义在函数中的响应动作。

下面的示意图展示了一个具体例子。

定义事件处理器

在 jQuery 中，我们可以这样为元素绑定事件处理器：

1$('selector').eventName(function(eventObj){
2    // 事件响应代码写在这里
3});

也可以使用 on 方法实现相同效果：

1$('selector').on('eventName', function(eventObj){
2    // 事件响应代码写在这里
3});

下面的代码中，为按钮元素添加了一个 click 事件处理器，用于监听按钮点击行为。当按钮被点击时，事件处理器会弹出一个提示框。

在事件处理器内部，可以通过 $(this) 访问当前触发事件的元素。下面的例子中，点击按钮后会更改按钮的文本内容，这里 $(this) 就非常有用。

事件对象

事件处理器函数默认会接收一个事件对象作为参数。该对象包含多个可访问的属性，可在事件处理函数中使用。事件对象及其属性可用于完成许多重要任务。

下面的代码中，我们打印了事件对象的一些有用属性。当你点击按钮时，这些属性信息会立即显示在控制台中。