JavaScript 事件

JavaScript 事件:

HTML DOM 事件允许 Javascript 在 HTML 文档元素中注册不同事件处理程序。 事件通常与函数结合使用，函数不会在事件发生前被执行！ (如用户点击按钮)。

1、鼠标事件:

实例：

鼠标事件：当指针移动到元素上方时，改变其颜色；当指针移出文本后，会再次改变其颜色。

效果：由图一转变为图二现象：

图一：

图二：

2、键盘事件

3、框架/对象（Frame/Object）事件

4、表单事件

5、剪贴板事件

6、打印事件

7、拖动事件

二、Javascript 事件的三种写法

Ø 在 DOM 元素中直接绑定（事件属性）：

一般我们都是在事件里面调用一个函数，而不是写大量 js 代码

Ø 在 JavaScript 代码中绑定：

Ø 使用事件监听绑定事件 addEventListener(event, function, useCapture)

三、事件对象

在 DOM 中发生事件时，所有相关信息都会被收集并存储在一个名为 event 的对象 中。这个对象包含了一些基本信息，比如导致事件的元素、发生的事件类型，以及可能与特 定事件相关的任何其他数据。例如，鼠标操作导致的事件会生成鼠标位置信息，而键盘操作 导致的事件会生成与被按下的键有关的信息。所有浏览器都支持这个 event 对象，尽管支 持方式不同。

鼠标/键盘事件对象

属性：

 

方法：

四、事件的委派

定义：

将事件统一绑定给元素共同的祖先元素（后代元素事件触发时，通过冒泡，祖先元素响 应触发事件并执行函数），这样可以只绑定一次，即可应用到多个元素上。事件的委派利用 了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能，event 中的 target 表示的 触发事件的对象，使用它对触发事件的元素进行判断。

例: 利用事件的委派获取无序列表中每一个点击的 a 标签的 href 属性值