JS의 이벤트 위임에 대한 심층 분석-JS 튜토리얼-php.cn

JS의 이벤트 위임에 대한 심층 분석

이벤트 위임이 왜 필요한가요?

먼저 작은 기능을 구현합니다. HTML 버튼을 클릭한 후 콘솔에 메시지를 출력합니다.

이 작은 기능을 구현하려면 버튼을 선택한 다음 addEventListener() 메서드를 사용하여 이벤트 리스너를 연결해야 합니다. addEventListener() 方法来附加事件监听器：

<button id="buttonId">Click me</button>

<script>
  document.getElementById(&#39;buttonId&#39;)
    .addEventListener(&#39;click&#39;, () => console.log(&#39;Clicked!&#39;));
</script>

로그인 후 복사

以上就是侦听单个元素（尤其是按钮）上事件的方式。

如果需要监听多个按钮上的事件呢？下面是一种可能的实现：

<div id="buttons">
  <button class="buttonClass">Click me</button>
  <button class="buttonClass">Click me</button>
  <!-- buttons... -->
  <button class="buttonClass">Click me</button>
</div>

<script>
  const buttons = document.getElementsByClassName(&#39;buttonClass&#39;);
  for (const button of buttons) {
    button.addEventListener(&#39;click&#39;, () => console.log(&#39;Clicked!&#39;));
  }
</script>

로그인 후 복사

你可以在 Codesandbox 上查看它是怎样工作的。

按钮列表被迭代为 for (const button of buttons) ，并且每个按钮都被附加了一个新的侦听器。另外在列表中的按钮被添加或删除后，你必须还要手动删除或附加事件监听器。

有没有更好的方法？

幸运的是，如果我们使用“事件委托”模式的话，侦听多个元素上的事件只需要一个事件侦听器。

事件委托使用事件传播机制的细节。想要要了解事件委托的工作原理，应该先了解什么是事件传播。

事件传播

当你单击下面 html 中的按钮时：

<html>
  <body>
    <div id="buttons">
      <button class="buttonClass">Click me</button>
    </div>
  </body>
</html>

로그인 후 복사

点击事件会触发多少个元素？毫无疑问，按钮本身会收到单击事件。而且所有按钮的祖先，甚至包括 document 和 window 对象也会收到。

点击事件的传播分三个阶段：

捕获阶段 —— 从window，document 和根元素开始，事件向下扩散至目标元素的祖先
目标阶段 —— 事件在用户单击的元素上触发
冒泡阶段——最后，事件冒泡通过目标元素的祖先，一直到根元素 document 和 window。

JS의 이벤트 위임에 대한 심층 분석

addEventListener 方法的第三个参数 captureOrOptions：

element.addEventListener(eventType, handler[, captureOrOptions]);

로그인 후 복사

使你可以捕获来自不同阶段的事件。

如果缺少 captureOrOptions 参数，或者参数为 false 或 {capture：false}，那么侦听器将捕获目标（target）和冒泡阶段（bubble phases）的事件
如果参数是 true 或 {capture：true}，那么侦听器将会侦听捕获阶段（capture phase）的事件。

通过下面的代码，你会侦听到在 <body> 元素上发生的捕获阶段的点击事件：

document.body.addEventListener(&#39;click&#39;, () => {
  console.log(&#39;Body click event in capture phase&#39;);
}, true);

로그인 후 복사

在这个 Codesandbox 演示中，单击按钮时，你可以在控制台中查看事件的传播方式。

那么事件传播是怎样帮助捕获多个按钮事件的呢？

该算法很简单：把事件侦听器附加到按钮的父级，并在单击按钮时捕获冒泡事件。这就是事件委托的工作方式。

3.事件委托

让我们用事件委托来捕获多个按钮上的点击：

<div id="buttons"> <!-- Step 1 -->
  <button class="buttonClass">Click me</button>
  <button class="buttonClass">Click me</button>
  <!-- buttons... -->
  <button class="buttonClass">Click me</button>
</div>

<script>
  document.getElementById(&#39;buttons&#39;)
    .addEventListener(&#39;click&#39;, event => { // Step 2
      if (event.target.className === &#39;buttonClass&#39;) { // Step 3
        console.log(&#39;Click!&#39;);
      }
    });
</script>

로그인 후 복사

打开Codesandbox 演示，然后单击任意按钮，你会看到 'Click!' 消息被记录到控制台。

事件委托的思想很简单。你不需要把委托事件监听器直接附加到按钮上，而是可以委托父监听 <div id="buttons">。单击按钮时，父元素的侦听器将会捕获冒泡事件（还记得前面所说事件传播吗？）。

使用事件委托需要3个步骤：

步骤1：确定要监视事件的元素的父级元素

在上面的例子中， <div id="buttons"> 是按钮的父元素。

步骤2：把事件侦听器附加到父元素

document.getElementById('buttons') .addEventListener('click', handler)

// ...
.addEventListener(&#39;click&#39;, event => {
    if (event.target.className === &#39;buttonClass&#39;) {      
        console.log(&#39;Click!&#39;);
    }
});

로그인 후 복사

위는 이벤트를 수신하는 방법입니다. 단일 요소(특히 버튼) 방식.

여러 버튼의 이벤트를 들어야 한다면 어떻게 해야 할까요? 가능한 구현은 다음과 같습니다. 🎜rrreee🎜Codesandbox에서 어떻게 작동하는지 확인하세요. 🎜🎜버튼 목록은 for (const 버튼 of 버튼)으로 반복되며 새 리스너가 각 버튼에 연결됩니다. 또한 목록에서 버튼을 추가하거나 제거한 후에는 이벤트 리스너도 수동으로 제거하거나 연결해야 합니다. 🎜🎜더 좋은 방법이 있나요? 🎜🎜 다행히 "이벤트 위임" 패턴을 사용하는 경우 여러 요소에서 이벤트를 수신하려면 하나의 이벤트 리스너만 있으면 됩니다. 🎜🎜이벤트 위임에 사용되는 🎜이벤트 전파🎜메커니즘에 대한 세부정보입니다. 이벤트 위임이 작동하는 방식을 이해하려면 먼저 이벤트 전파가 무엇인지 이해해야 합니다. 🎜

이벤트 전파🎜🎜아래 HTML에서 버튼을 클릭하면: 🎜rrreee🎜클릭 이벤트가 실행되는 요소는 몇 개입니까? 의심할 바 없이 버튼 자체가 클릭 이벤트를 수신합니다. 그리고 모든 버튼 조상, 심지어 `document` 및 `window` 객체도 이를 수신합니다. 🎜🎜클릭 이벤트 전파는 세 단계로 나뉩니다: 🎜
🎜🎜캡처 단계🎜 - `창`에서, `문서` 및 루트 요소에서 시작하여 이벤트는 대상 요소의 조상으로 아래로 전파됩니다🎜
🎜🎜대상 단계🎜 - 이벤트는 사용자가 클릭한 요소에서 트리거됩니다🎜
🎜🎜버블링 단계🎜 - 마지막으로 이벤트는 대상 요소의 조상을 통해 루트 요소 `document` 및 `window`까지 버블링됩니다. 🎜
🎜🎜🎜🎜🎜`addEventListener` `captureOrOptions` 메소드의 세 번째 매개변수: 🎜rrreee🎜를 사용하면 여러 단계의 이벤트를 캡처할 수 있습니다. 🎜
`captureOrOptions` 매개변수가 누락되었거나 `false` 또는 `{capture: false}`인 경우 리스너는 캡처합니다. 🎜타겟 및 버블 단계의 이벤트🎜
매개변수가 `true` 또는 `{capture: true}`인 경우 리스너가 이벤트를 수신합니다. 🎜캡처 단계🎜.
🎜다음 코드를 사용하면 `<body>` 요소에서 발생하는 캡처 단계 클릭 이벤트를 수신할 수 있습니다. 🎜rrreee🎜이 Codesandbox 데모, 버튼을 클릭하세요. 콘솔에서 이벤트가 어떻게 전파되는지 확인할 수 있습니다. 🎜🎜그렇다면 이벤트 전파가 여러 버튼 이벤트를 캡처하는 데 어떻게 도움이 될까요? 🎜🎜알고리즘은 간단합니다. 이벤트 리스너를 버튼의 부모에 연결하고 버튼을 클릭할 때 버블링 이벤트를 캡처합니다. 이것이 이벤트 위임이 작동하는 방식입니다. 🎜

3. 이벤트 위임 🎜🎜이벤트 위임을 사용하여 여러 버튼의 클릭을 캡처해 보겠습니다. 🎜rrreee🎜Open Codesandbox Demo를 클릭한 다음 아무 버튼이나 클릭하면

'클릭!' 메시지가 콘솔에 기록됩니다. 🎜🎜이벤트 위임의 개념은 간단합니다. 대리자 이벤트 리스너를 버튼에 직접 연결할 필요는 없으며 대신 상위 리스너 <div id="buttons">를 위임할 수 있습니다. 버튼을 클릭하면 상위 요소의 리스너가 🎜버블 이벤트🎜를 캡처합니다(앞서 이벤트 전파에 관해 말한 것을 기억하시나요?). 🎜🎜이벤트 위임을 사용하려면 3단계가 필요합니다. 🎜1단계: 이벤트를 모니터링할 요소의 상위 요소 결정
🎜위 예에서 <div id="buttons"&gt ; 는 버튼의 상위 요소입니다. 🎜2단계: 상위 요소에 이벤트 리스너 연결
🎜document.getElementById('buttons') .addEventListener('click', handler) 이벤트 리스너 연결 상위 요소는 다음에 연결됩니다. 버튼. 🎜버튼 클릭 이벤트가 상위 요소를 통해 버블링되기 때문에 🎜(이벤트 전파로 인해) 이 이벤트 리스너는 버튼 클릭에도 반응합니다. 🎜步骤3：用 event.target 选择目标元素
单击按钮时，将会用event 对象参数调用处理函数。属性 event.target  访问在其上调度了事件的元素，在例子中是一个按钮：
// ...
.addEventListener(&#39;click&#39;, event => {
    if (event.target.className === &#39;buttonClass&#39;) {      
        console.log(&#39;Click!&#39;);
    }
});
로그인 후 복사
로그인 후 복사
顺便说明一下，event.currentTarget 指向事件侦听器直接附加到的元素。在例子中，event.currentTarget 是  <div id="buttons">。
现在，你可以看到事件委托模式的好处：事件委托仅需要一个事件侦听器，而不必像本文最初那样将侦听器附加到每一个按钮上。

总结
当发生点击事件（或传播的任何其他事件）时：

事件从 window、document、根元素向下传播，并经过目标元素的祖先（捕获阶段）；
事件发生在目标（目标阶段）上；
最后，事件在目标祖先之间冒出气泡，直到根元素 document 和 window（冒泡阶段）。

该机制称为事件传播。
事件委托是一种有用的模式，因为你可以只需要用一个事件处理程序就能侦听多个元素上的事件。
使用事件委托需要三个步骤：

确定要监视事件的元素的父级元素
把将事件侦听器附加到父元素
用 event.target 选择目标元素

更多计算机编程相关知识，请访问：编程视频！！

위 내용은 JS의 이벤트 위임에 대한 심층 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!