Javascript事件工作原理

Posted on by

事件如何在 Javascript 中工作

我们在前端应用程序中使用 Javascript 的原因是因为它可以处理用户事件。用户事件是指每当用户与网页交互时，这可能意味着从点击到滚动的任何事情。

Javascript中的事件附加到特定的 HTML 元素。这意味着它们与 HTML 中的特定标签相关。这给了我们很大的灵活性，我们可以做什么。让我们深入探讨如何去做。

Javascript 支持哪些事件？#

Javascript 支持许多不同的事件。以下是我们可以使用的一些基本事件：

事件事件说明
click当用户用鼠标点击页面时。
scroll当用户向下滚动页面时。
resize当用户调整窗口大小时。
dblclick当用户双击时。
hover当用户向下滚动页面时。
mouseup, mousedown, mousemove当用户单击 ( mousedown )、释放鼠标按钮 ( mouseup ) 并在按下时移动鼠标 ( mousemove )。
mouseleave, mouseout用于处理用户将鼠标移出元素时的情况。mouseout只会触发一次，而mouseleave会为它离开的每个 div 触发。
touchstart, touchend, touchmove当用户触摸触摸设备时 (touchstart) 以及当他们抬起手指时 (touchend)。
pointerdown, pointerup, pointermove这复制了touchdown/mousedown、 touchup /mouseup和touchmove/mousemove。
pointerout, pointerleave, pointerenterpointerout 和 pointerleave 复制mouseout/mouseleave。pointerenter是当用户的指针进入特定元素时。

我们如何使用事件？#

要使用事件，我们需要先选择 HTML 元素。您可以在此处详细了解如何执行此操作。事件分别附加到每个 HTML 标记，这意味着如果有多个按钮，我们需要循环遍历它们。

让我们从一个简单的例子开始。假设我们有一个按钮，其 ID 为“ my-id ”，我们想为其添加一个点击事件。我们使用函数addEventListener，像这样：

let element = document.getElementById('my-id');

element.addEventListener('click', function(e) {
    // Whenever the user clicks on 'my-id', this function will run.
});

现在我们有了一个简单的函数，它会在用户点击按钮时运行。我们可以为元素附加任意数量的事件。让我们再举一个例子，我们有多个元素使用querySelectorAll. 在这种情况下，querySelectorAll返回一个我们可以迭代的NodeList 。您可以在此处阅读有关 NodeLists 的更多信息。

let elements = document.querySelectorAll('.button');

elements.forEach(function(item) {
    item.addEventListener('click', function(e) {
        // Whenever the user clicks on this particular .button, this function will run.
    });
    item.addEventListener('hover', function(e) {
        // Whenever the user hovers over this particular .button, this function will run.
    });
})

事件#

您可能已经注意到，当我们调用我们的函数时，我们提到了一个名为e的变量——您可能还会看到它被写为event或evt。

// ...
// Notice how we have function(e)..
item.addEventListener('hover', function(e) {
// ...

当我们将事件添加到 HTML 标记时，您的浏览器会跟踪有关该事件的大量信息。Javascript 将所有这些传递到一个变量中，我们可以通过e访问它。如果你想要一个关于它是如何工作的思想实验，基本上 Javascript 运行我们定义的函数，并将所有事件数据传递到变量中，有点像这样：

// Notice how we have function(e)..
item.addEventListener('hover', function(e) {
// ...
// The function(e) may be run like this in Javascript, where all the event data is passed into the place of the e.
// That means we can access all this data when we run our events.
hoverCallbackFunction({ "all-event-data-goes-here" })

您可以将此变量用于各种事情。比如在点击事件上，我们可以得到用户点击页面的位置：

document.body.addEventListener('click', function(e) {   
    let xCoord = e.pageX;
    let yCoord = e.pageY;
    document.getElementById('coordinates').textContent = `You clicked on X: ${xCoord}, Y: ${yCoord}!`;
});

You clicked on X: 573, Y: 4715!

虽然我们不会涵盖e变量中包含的所有内容，但最好知道它包含有关用户正在做什么的非常有用的信息。它们都可以通过说 e 来访问。多变的。这里有一些：

  • e.target – 事件在其上执行的 HTML 元素。
  • e.pageX – 用户执行事件的 X 坐标，相对于页面。
  • e.pageY – 用户执行事件的 Y 坐标，相对于页面。
  • e.clientX – 用户执行事件的 X 坐标，相对于视口/窗口。
  • e.clientY – 用户执行事件的 Y 坐标，相对于视口/窗口。

由于addEventListener每次事件完成时都会运行 for 函数，因此我们可以使用此数据来计算用户正在做什么。例如，做我们之前做的，用mousemove，意味着我们有用户鼠标位置的实时坐标：

document.body.addEventListener('hover', function(e) {   
    let xCoord = e.pageX;
    let yCoord = e.pageY;
    document.getElementById('coordinates').textContent = `You hovered over X: ${xCoord}, Y: ${yCoord}!`;
});

You clicked on X: 642, Y: 294!

将相同的函数添加到多个事件处理程序#

想象一下，您想要为hover和click设置相同的事件。您可以使用数组轻松地做到这一点，方法如下：

[ 'click', 'hover' ].forEach(function(eventType) {
    // this forEach will run twice, once for click and once for hover
    // We can access the keywords 'click' and 'hover' through the 'eventType' variable
    document.body.addEventListener(eventType, function(e) {   
        // Our event function goes here
    });
})

推荐阅读：