处理浏览器事件的指南

大多数网页都是交互式的，用户可以在网页上执行操作。例如，点击链接、提交表单，甚至滚动浏览网页。

有时，您可能希望页面在用户执行特定操作时以特定方式运行。例如，当用户点击按钮时，您可能希望显示一个模态框。或者，当用户在页面上填写表单时，您可能希望向用户显示输入是否有效。这些操作就是浏览器事件。

在本文中，我们将讨论如何处理浏览器中发生的事件。我们还将讨论如何阻止默认操作以及什么是事件传播。让我们立即开始吧。

事件处理程序简介

当事件发生时，我们可以通过事件处理程序来告诉浏览器如何响应。事件处理程序是一个在事件发生时运行的函数。添加事件处理程序的方式有三种：

1. 使用 HTML 属性的内联事件处理程序
2. DOM 属性
3. 使用 addEventListener 方法

内联事件处理程序

可以使用 HTML 属性设置处理程序。例如，如果我们希望按钮在用户点击时弹出“hi”提示，可以这样做：

<button onclick="alert('hi')">Say Hi</button>

我们还可以使用相同的语法对许多其他事件执行此操作。

在 HTML 元素中编写大量代码可能不太方便。我们也可以在脚本中编写函数，并在on<event>属性中调用该函数。

<button onclick="sayHi()">Say Hi</button>

<script>
    function sayHi() {
        console.log('Hi')
    }
</script>

DOM 属性

处理事件的另一种方法是使用 DOM 属性。让我们使用上面的例子来做到这一点。

<button>Say Hi</button>

<script>
    var button = document.querySelector('button');
    button.onclick = () => {
        console.log('hi')
    }
</script>

这会产生与以前的方法相同的结果。

当我们将内联事件处理程序和 JavaScript 处理程序应用于同一元素时会发生什么？

<button onclick="console.log('hi')">Say Hi</button>

<script>
    var button = document.querySelector('button');
    button.onclick = () => {
        console.log('no')
    }
</script>

JavaScript 处理程序优先于内联处理程序，因此记录“否”。

addEventListener 方法

我们可以使用 addEventListener 方法监听特定 DOM 元素上的事件。通过此方法，我们提供了一个处理此类事件的方法。此方法的一个优点是，它允许您在一个元素上注册尽可能多的事件。

这是 addEventListener 方法的语法。

target.addEventListener(type, function, useCapture)

目标是您想要监听事件的元素。

Type 是要监听的事件类型。比如是按钮，就可以监听点击事件。

该函数是事件处理程序。它指定在事件发生时执行的函数。

useCapture 是可选的。它是一个布尔值，用于指定事件应该在捕获阶段还是冒泡阶段使用。如果为 true，则在捕获阶段使用。如果为 false（默认值），则在冒泡阶段使用。我们稍后会详细介绍这一点。

下面是使用此方法的一个示例。

<button>Say Hi</button>

<script>
    let button = document.querySelector('button');
    button.addEventListener('click', () => {
        console.log('Hi') //Hi
    })
</script>

在这种情况下，button是我的目标，事件类型是click，箭头函数是此代码运行时执行的函数。运行此代码后，每次点击按钮时，控制台都会显示“Hi”。

命名函数也可以作为回调函数传递。

事件对象

当事件发生时，浏览器会创建一个事件对象并将其作为参数传递给事件处理程序。此事件对象包含事件的详细信息。例如，您可能想知道点击了哪个按钮、按下了哪个键，或者事件发生时的鼠标坐标。您可以从事件对象中获取所有这些信息。

使用上面的例子，我们可以这样做：

<button>Say Hi</button>

<script>
    let button = document.querySelector('button');
    button.addEventListener('click', (event) => {
        console.log(event.clientX) //41
        console.log(event.clientY) //19
    })
</script>

它打印事件发生地点的 x 和 y 坐标，在本例中分别为 41 和 19。

事件中存储的信息取决于发生的事件类型。要获取事件对象的完整详细信息，可以将该event对象记录到控制台console.log(event)。无论如何，它始终具有一个type属性，用于指示发生的事件的类型。

默认操作

当某些元素上发生事件时，会默认执行一些操作。例如，点击链接时，页面会跳转到链接的目标页面。点击表单内的按钮时，表单会被提交。这些都是浏览器的默认操作。

大多数事件的事件处理程序都会在默认操作发生之前被调用。可以使用event.preventDefault()方法来阻止默认操作。此方法会阻止默认操作的发生。以下是一个例子：

<a href="https://sarahchima.com">Sarah Chima</a>

<script>
    let link = document.querySelector('a');
    link.addEventListener('click', (event) => {
        console.log("Nope, you ain't visiting her today")
        event.preventDefault()
    })
</script>

单击此链接时，它不会将您带到预期的 URL，而是将语句记录到控制台中。

这也可以用于在页面或上下文菜单上实现键盘快捷键。

但是，为了获得良好的用户体验，最好避免拦截元素的预期行为。这样的操作可能会让用户认为你的网站有问题。

事件和传播

当元素上发生事件时，目标元素上的事件处理程序首先运行。然后，其直接父元素（如果有）的处理程序运行，再运行其父元素的父元素的处理程序，一直运行到最外层有处理程序的元素。这称为传播。

这里举个例子会有所帮助。

<style>
    * {
        border: 1px solid green;
        margin: 15px
    }
</style>
<div onclick="alert('div')"> DIV
    <p onclick="alert('p')"> P 
        <span onclick="alert('span')"> SPAN</span>
    </p>
</div>

我添加了一点样式来区分各个元素。运行这段 HTML 代码并点击 span 元素，你会注意到触发了三个处理程序。首先是 上的处理程序span，其次是 上的处理程序p，最后是 上的处理程序div。这是因为当事件发生时，它会传播到外部元素，并且它们的处理程序也会被触发。

元素中可以发生两种类型的传播：冒泡和捕获。我们之前在讨论 addEventListener 方法的语法时已经见过这两种类型。

冒泡和捕获的区别在于，在冒泡阶段，事件是向外传播的。也就是说，最内层元素上的处理程序首先被触发，然后是父元素，一直向上。

在捕获事件时，情况正好相反。最外层元素上的处理程序首先被触发，然后是子处理程序，一直到事件发生的元素。这与我们示例中发生的情况相反。

对于事件处理程序，冒泡是默认设置，但如果将捕获参数设置为 true，则会发生捕获。要了解更多信息，您可以阅读这篇文章。

您可能不希望在点击元素时发生这种传播行为。幸运的是，JavaScript 提供了一种方法来实现这一点。要停止传播，您可以调用该event.stopPropagation()方法。此方法可阻止事件传播。

在我们前面的例子中，我们可以这样做：

<div onclick="alert('div')"> DIV
    <p onclick="alert('p')"> P 
        <span> SPAN</span>
    </p>
</div>

<script>
    var span = document.querySelector('span');
    span.addEventListener('click', (event) => {
        alert('span')
        event.stopPropagation();
    }
</script>

如果您运行此代码，您会注意到只有跨度上的处理程序被触发。

与所有默认行为一样，只有在必要时才应阻止传播。

我们走之前还有最后一件事。

删除事件监听器

可以使用removeEventListener方法来移除事件监听器。它的使用方法与 的方法相同addEventListener。我们以相同的方式传入类型和函数。但是，函数必须存储在变量中才能正常工作。

这是一个例子

<button>Say Hi</button>

<script>
    let button = document.querySelector('button');

    function sayHi() {
        console.log('Hi')
    }
    button.addEventListener('click', sayHi)
    button.removeEventListener('click', sayHi)
</script>

运行此代码，你会发现事件监听函数从未运行。这是因为 eventListener 已被移除。

如果我们不像下面的例子那样将函数存储在变量中，它就removeEventListener不会起作用。

<button>Say Hi</button>

<script>
    let button = document.querySelector('button');
    button.addEventListener('click', () => {
        console.log('hi')
    })
    button.removeEventListener('click',  () => {
        console.log('hi')
    })
</script>

结论

我们讨论了如何使用 HTML 属性、DOM 属性和 addEventListener 方法处理事件。我们还了解到可以使用该event.preventDefault方法来阻止默认操作。我们还学习了事件传播。

处理事件可以帮助您控制浏览器响应用户操作的方式，我们已经讨论过如何做到这一点。在下一篇文章中，我将讨论您可以在浏览器中监听的常见事件。

有任何疑问或补充？欢迎留言。

感谢您的阅读😊。