javascript中的事件机制_js的事件鼠标悬浮于页面的某个热点之上-优快云博客

本文链接：https://blog.youkuaiyun.com/shenmill/article/details/61923313

本文详细介绍了JavaScript中的事件机制，包括事件流的概念、不同类型的事件绑定方法及其区别、事件对象的属性与方法、事件委托的原理及优缺点。并对比了Chrome与IE浏览器中事件机制的不同。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.事件

javascript与html页面之间的交互是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。事件是可以被 JavaScript 侦测到的行为，比如我们要实现下面的效果就需要绑定相应的事件：

鼠标点击
页面或图像载入
鼠标悬浮于页面的某个热点之上
在表单中选取输入框
确认表单
键盘按键

下面主要从事件流，事件绑定，事件对象以及事件委托四个方面来总结一下js中的事件机制。

二.事件流

事件流描述的是从页面中接受事件的顺序，事件发生时会在元素节点与根节点之间按照特定的顺序传播，路径所经过的所有节点都会收到该事件。

下面这个图清晰地展示了事件流的过程：

这里写图片描述

其中1~5描述的是事件捕获过程，5~6描述的是目标过程，6~10描述的是冒泡过程。

捕获阶段：事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。首先window会捕获到事件，之后会是document，body，之后body中的dom会一层一层捕获到目标元素。即从dom树的根到叶子。

目标阶段：真正的触发元素会发生两次事件，一次捕获，一次冒泡。

冒泡阶段：事件开始时由最具体的元素接受，然后逐级向上传播到较为不具体的节点。由具体元素一层一层冒泡到window，类似于捕获阶段的逆过程。即从dom树的叶子到根。

三.事件绑定

事件绑定（用click事件举例）有这么几种方法：

1.嵌入绑定形式

<div onclick="clickEvent()"></div>

2.js中利用dom直接绑定

element.onclick = function(){
    ...
}

3.利用addEventListener绑定

element.addEventListener('click',function(){
    ...
},false);

元素直接绑定和addEventListener的区别：

1.onclick只有冒泡过程，而addEventListener既可以有冒泡过程也可以有捕获的过程。addEventListener接受三个参数，第一个为事件，第二个为执行的函数，第三个为选择冒泡还是捕获的过程（默认为false冒泡，true为捕获）。

2.重复绑定。比如直接绑定两个onclick事件，第一个事件将会被第二个覆盖。而addEventListener可以重复绑定相同事件，并且都可以得到执行。

另：不管是直接绑定还是addEventListener都有一个好处是里面的this都指向当前对象。

四.事件对象

在触发dom上的某个事件时，会产生一个事件对象event，这个对象包含着所有与事件有关的信息。包括导致事件的元素，事件的类型以及其他与特定事件相关的信息。常见的事件对象成员有以下几个：

属性/方法	类型	读/写	说明
bubbles	Boolean	只读	表示事件是否冒泡
cancelable	Boolean	只读	表明是否可以取消事件的默认行为
currentTarget	Element	只读	其事件处理程序当前正在处理事件的那个元素
defaultPrevented	Boolean	只读	为true表示已经调用了preventDefault
detail	Integer	只读	与事件相关的细节信息
eventPhase	Integer	只读	调用事件处理程序的阶段：1表示捕获阶段，2表示“处于目标”，3表示冒泡阶段
preventDefault（）	Function	只读	取消事件的默认行为。如果cancelable是true，则可以使用这个方法
stopImmediatePropagation	Function	只读	取消事件的默认行为。如果cancelable是true，则可以使用这个方法
stopPropagation()	Function	只读	取消事件的进一步捕获或冒泡。如果bubbles为true，则可以使用这个方法
target	Element	只读	事件的目标
trusted	Boolean	只读	为true表示事件是浏览器生成的。为false表示事件是由开发人员通过javascript创建的
type	String	只读	被触发的事件类型
view	AbstractView	只读	与事件关联的抽象视图。等同于发生时间的window对象

五.事件委托

利用冒泡的原理，把事件加到父级上，触发执行效果。当网页中需要触发事件的对象比较多的时候，为了避免内存泄漏，我们把事件委托到其父对象上，借助事件冒泡机制，可以将事件委托到body，document等元素上，这样等于一个页面就只有一个事件触发，避免直接把事件添加到多个对象上。

举一个小例子：

点击li弹出对应的innerHTML的值，就减少了给每一个li绑定事件的操作。

<body>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
    </ul>
    <script type="text/javascript">
    document.body.onclick = function (event) {
        if(event.target.tagName === 'LI'){
            alert(event.target.innerHTML);
        }

    };
    </script>
</body>