js之事件处理_js中什么是事件处理-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_31403519/article/details/94362636

本文深入探讨了JavaScript的异步事件驱动模型，解释了事件类型、目标、处理程序及对象的概念，介绍了事件传播的捕获与冒泡过程，以及如何使用addEventListener注册事件处理程序并阻止默认行为。

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

js程序采用了异步事件驱动编程模型，当文档、浏览器、元素和与之相关的对象发生某些有趣的事情时，web浏览器就会产生事件。它们等待事件发生，然后它们响应。

1、一些重要的定义：

事件类型（event type）:是一个用来说明发生什么类型事件的字符串，如click等等
事件目标（event target）：是与发生的事件相关的对象，如window上的load事件，button上的click事件等等
事件处理程序（event handler）：已称为事件监听程序，是处理或响应事件的函数
事件对象（event object）：是与特定事件相关且包含有关该事件详细信息的对象，事件对象做为参数传递给事件处理程序，所有的事件对象都有用来指定事件类型的type属性和指定事件目标的target属性。
事件传播（event propagetion）：是浏览器决定哪个对象触发其事件处理程序的过程，事件传播分为两种形式：事件冒泡和事件捕获。事件冒泡是指从子元素冒泡到祖先级元素上。事件捕获是指在容器元素上注册的特定处理程序由机会在事件传播到真实目标之前拦截（或捕获）它。
一些与事件相关的默认操作：在超链接上发生click事件时，浏览器的默认操作是按照链接加载新页面，事件处理程序可以通过返回一个适当的值、调用事件对象的某人方法或设置事件对象的某个属性来阻止默认操作的发生

2、事件类型

3、DOM事件流

DOM2级事件规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段，首先发生的是事件捕获，为截获事件提供了机会，以下面的页面为例，当点击div时，事件流如下所示：

<html>
    <head></head>
    <body>
        <div></div>
    </body>
</html>

实际的目标（div元素）在捕获阶段不会接收到事件，这意味着在捕获阶段，事件从docement到body后就停止了，下一个阶段是“处于目标”结算，于是事件在div上发生，并在事件处理中被看成冒泡阶段的一部分

3、注册事件处理程序

设置HTML标签属性为事件处理程序：如document.getelementsByTagname('div').οnclick=".........."
使用addEventListener()：使用标签属性注册事件只能注册一个事件，但使用这个可以注册多个事件。接收三个参数：第一个是要注册的事件处理类型（不包括事件处理程序属性的‘on’），第二个是事件处理函数，第三个是一个布尔值，默认false，表示在冒泡阶段调用事件处理程序，如果传递了true，则函数将会注册为捕获事件处理程序，即在捕获阶段调用事件处理程序。
removeEventLister()：移除某个事件处理程序，与addEventListener()一样，有三个参数
4、事件处理程序的调用

下面将从以下几个方面来说明事件处理程序的调用：事件处理程序的参数、调用上下文（this值）、事件处理程序的作用域、事件处理返回值的意义、事件取消、事件传播

参数：通常会把事件对象做为它们的第一个参数，，事件对象提供了有关事件的详细信息
调用上下文：this关键字指的是事件目标
作用域：依然遵循词法作用域，即执行其定义时的作用域，而非调用时的作用域
返回值：返回值false表示取消这个事件相关的默认操作。返回值只有对通过属性注册的事件才有效，如果是addEventListener()则需要调用事件对象的preventDefault()方法
事件取消：事件对象的preventDefault()方法阻止默认操作，stopPropagation()阻止冒泡
事件传播：事件传播的第一阶段发生在目标处理程序调用之前，称为捕获阶段，第二结算是目标对象本身的事件处理程序被调用，第三阶段是事件冒泡。当addEventListener()方法的第三个参数为true时，那么事件处理程序被注册为捕获事件处理程序，捕获阶段是反向的冒泡阶段。最先调用window对象。然后时document对象，接着时body，再然后时dom树下，以此类推，直到调用事件目标的父元素的捕获事件处理程序，在目标对象本身上注册的捕获事件处理程序不会被调用