JavaScript事件处理程序–如何在JS中处理事件

什鲁蒂·卡普尔(Shruti Kapoor)
原文地址:https://www.freecodecamp.org/news/javascript-event-handlers/

什么是事件?

事件是用户与页面互动时发生的动作,例如单击元素,输入字段或加载页面。

浏览器会通知系统发生了某些事情,需要对其进行处理。通过注册一个event handler侦听特定类型事件的函数(称为)来处理该事件。

“处理事件”是什么意思?

简单来说,请考虑一下-假设您有兴趣参加本地社区的Web Development聚会活动。

为此,您注册一个名为“ Women Who Code”的本地聚会并订阅通知。这样,每次安排新的聚会时,您都会收到警报。那就是事件处理!

这里的“事件”是新的JS聚会。当发布新的见面会时,网站metup.com会捕获此更改,从而“处理”此事件。然后,它会通知您,从而对事件进行“操作”。

在浏览器中,事件的处理方式类似。浏览器检测到更改,并向正在侦听特定事件的函数(事件处理程序)发出警报。这些功能然后根据需要执行操作。

让我们看一个click事件处理程序的示例:

<div class="buttons">
  <button>Press 1</button>
  <button>Press 2</button>
  <button>Press 3</button>
</div>
const buttonContainer = document.querySelector('.buttons');
console.log('buttonContainer', buttonContainer);

buttonContainer.addEventListener('click', event => {
  console.log(event.target.value)
})

有哪些不同类型的事件?

每当用户与页面交互时,都可以触发事件。这些事件可能是用户滚动页面,单击某项或加载页面。

以下是一些常见事件: onclickdblclickmousedownmouseupmousemovekeydownkeyuptouchmovetouchstarttouchendonloadonfocusonbluronerror onscroll。

事件的不同阶段-捕获,目标,冒泡

当事件在DOM中移动时(无论是冒泡还是下滴),这称为事件传播。该事件通过DOM树传播。

事件分为两个阶段:冒泡阶段和捕获阶段。

在捕获阶段(也称为滴滤阶段),事件“滴落”到导致事件的元素上。

它从根级别元素和处理程序开始,然后向下传播到该元素。事件到达时,捕获阶段完成target

在冒泡阶段,事件被“冒泡”到DOM树。它首先由最内部的处理程序(最接近发生事件的元素的处理程序)捕获并处理。然后,它冒泡(或传播)到更高级别的DOM树,进一步上升到它的父级,最后到它的根。

她是一个技巧,可以帮助您记住这一点:

trickle down, bubble up

这是来自quirksmode的信息图表,对此进行了很好的解释:

               / \
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  | |          |     |
|   -------------------------     |
|        Event BUBBLING           |
-----------------------------------

               | |
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  \ /          |     |
|   -------------------------     |
|        Event CAPTURING          |
-----------------------------------

需要注意的一件事是,无论您在任一阶段都注册了一个事件处理程序,这两个阶段总是会发生。默认情况下,所有事件都会冒泡。

您可以使用函数在阶段,冒泡或捕获中注册事件处理程序addEventListener(type, listener, useCapture)。如果useCapture设置为false,则事件处理程序处于冒泡阶段。否则,它处于捕获阶段。

事件阶段的顺序取决于浏览器。

要先检查哪个浏览器获得荣誉,可以在JSfiddle中尝试以下代码:

<div id="child-one">
    <h1>
      Child One
    </h1>
  </div>

const childOne = document.getElementById("child-one");

const childOneHandler = () => {
console.log('Captured on child one')
}

const childOneHandlerCatch = () => {
console.log('Captured on child one in capture phase')
}

childOne.addEventListener("click", childOneHandler); 
childOne.addEventListener("click", childOneHandlerCatch, true); 

在Firefox,Safari和Chrome中,输出如下:
捕获阶段的事件首先触发

如何听事件

监听事件有两种方法:

  1. addEventListener
  2. 内联事件,例如 onclick
//addEventListener
document.getElementByTag('a').addEventListener('click', onClickHandler);

//inline using onclick
<a href="#" onclick="onClickHandler">Click me</a>

内联事件或哪个更好addEventListener

  1. addEventListener 使您能够注册无限的事件处理程序。
  2. removeEventListener 也可以用于删除事件处理程序
  3. useCapture标志可用于指示是否需要在捕获阶段或捆绑阶段中处理事件。

代码示例和实际操作

您可以在JSFiddle中尝试这些事件以进行处理。

<div id="wrapper-div">
  <div id="child-one">
    <h1>
      Child One
    </h1>
  </div>
  <div id="child-two" onclick="childTwoHandler">
    <h1>
      Child Two
    </h1>
  </div>

</div>

const wrapperDiv = document.getElementById("wrapper-div");
const childOne = document.getElementById("child-one");
const childTwo = document.getElementById("child-two");

const childOneHandler = () => {
console.log('Captured on child one')
}

const childTwoHandler = () => {
console.log('Captured on child two')
}

const wrapperDivHandler = () => {
console.log('Captured on wrapper div')
}

const childOneHandlerCatch = () => {
console.log('Captured on child one in capture phase')
}

const childTwoHandlerCatch = () => {
console.log('Captured on child two in capture phase')
}

const wrapperDivHandlerCatch = () => {
console.log('Captured on wrapper div in capture phase')
}


childOne.addEventListener("click", childOneHandler); 
childTwo.addEventListener("click", childTwoHandler); 
wrapperDiv.addEventListener("click", wrapperDivHandler); 

childOne.addEventListener("click", childOneHandlerCatch, true); 
childTwo.addEventListener("click", childTwoHandlerCatch, true); 
wrapperDiv.addEventListener("click", wrapperDivHandlerCatch, true); 

TL; DR

事件阶段包括捕获(DOM->目标),冒泡(target-> DOM)和目标。
可以使用addEventListener或内联方法(例如)监听事件onclick

    addEventListener can add multiple events, whereas with onclick this cannot be done.
    onclick can be added as an HTML attribute, whereas an addEventListener can only be added within <script> elements.
    addEventListener can take a third argument which can stop the event propagation.

本文来自投稿,不代表微擎百科立场,如若转载,请注明出处:https://www.w7.wiki/develop/4398.html

发表评论

登录后才能评论