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

집

웹 프론트엔드

JS 튜토리얼

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

青灯夜游

Feb 01, 2021 pm 05:50 PM

javascript이벤트 위임

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）的事件。

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

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">。单击按钮时，父元素的侦听器将会捕获<strong>冒泡事件</strong>（还记得前面所说事件传播吗？）。<p>使用事件委托需要3个步骤：</p> <h4 id="步骤-确定要监视事件的元素的父级元素">步骤1：确定要监视事件的元素的父级元素</h4> <p>在上面的例子中， <code><div id="buttons"> 是按钮的父元素。<h4 id="步骤-把事件侦听器附加到父元素">步骤2：把事件侦听器附加到父元素</h4> <p><code>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}`인 경우 리스너가 이벤트를 수신합니다. 🎜캡처 단계🎜.

🎜다음 코드를 사용하면 요소에서 발생하는 캡처 단계 클릭 이벤트를 수신할 수 있습니다. 🎜rrreee🎜이 Codesandbox 데모, 버튼을 클릭하세요. 콘솔에서 이벤트가 어떻게 전파되는지 확인할 수 있습니다. 🎜🎜그렇다면 이벤트 전파가 여러 버튼 이벤트를 캡처하는 데 어떻게 도움이 될까요? 🎜🎜알고리즘은 간단합니다. 이벤트 리스너를 버튼의 부모에 연결하고 버튼을 클릭할 때 버블링 이벤트를 캡처합니다. 이것이 이벤트 위임이 작동하는 방식입니다. 🎜

3. 이벤트 위임 🎜🎜이벤트 위임을 사용하여 여러 버튼의 클릭을 캡처해 보겠습니다. 🎜rrreee🎜Open Codesandbox Demo를 클릭한 다음 아무 버튼이나 클릭하면 `'클릭!'`이 표시됩니다. > 메시지가 콘솔에 기록됩니다. 🎜🎜이벤트 위임의 개념은 간단합니다. 대리자 이벤트 리스너를 버튼에 직접 연결할 필요는 없으며 대신 상위 리스너 <div id="buttons">를 위임할 수 있습니다. 버튼을 클릭하면 상위 요소의 리스너가 🎜버블 이벤트🎜를 캡처합니다(앞서 이벤트 전파에 관해 말한 것을 기억하시나요?). 🎜🎜이벤트 위임을 사용하려면 3단계가 필요합니다. 🎜<h4 id="단계-이벤트를-모니터링할-요소의-상위-요소-결정">1단계: 이벤트를 모니터링할 요소의 상위 요소 결정</h4>🎜위 예에서 <code><div id="buttons">는 버튼의 상위 요소입니다. 🎜<h4 id="단계-상위-요소에-이벤트-리스너-연결">2단계: 상위 요소에 이벤트 리스너 연결</h4>🎜<code>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">。<p>现在，你可以看到事件委托模式的好处：事件委托仅需要一个事件侦听器，而不必像本文最初那样将侦听器附加到每一个按钮上。</p> <h2 id="总结">总结</h2> <p>当发生点击事件（或传播的任何其他事件）时：</p> <ul> <li>事件从 <code>window、document、根元素向下传播，并经过目标元素的祖先（捕获阶段）；

事件发生在目标（目标阶段）上；

最后，事件在目标祖先之间冒出气泡，直到根元素 document 和 window（冒泡阶段）。

该机制称为事件传播。

事件委托是一种有用的模式，因为你可以只需要用一个事件处理程序就能侦听多个元素上的事件。

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

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

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

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

성명

이 기사는 51cto에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

관련 기사

JavaScript가 C로 작성 되었습니까? 증거를 검토합니다Apr 25, 2025 am 12:15 AM

예, JavaScript의 엔진 코어는 C로 작성되었습니다. 1) C 언어는 효율적인 성능과 기본 제어를 제공하며, 이는 JavaScript 엔진 개발에 적합합니다. 2) V8 엔진을 예를 들어, 핵심은 C로 작성되며 C의 효율성 및 객체 지향적 특성을 결합하여 C로 작성됩니다.

JavaScript의 역할 : 웹 대화식 및 역동적 인 웹Apr 24, 2025 am 12:12 AM

JavaScript는 웹 페이지의 상호 작용과 역학을 향상시키기 때문에 현대 웹 사이트의 핵심입니다. 1) 페이지를 새로 고치지 않고 콘텐츠를 변경할 수 있습니다. 2) Domapi를 통해 웹 페이지 조작, 3) 애니메이션 및 드래그 앤 드롭과 같은 복잡한 대화식 효과를 지원합니다. 4) 성능 및 모범 사례를 최적화하여 사용자 경험을 향상시킵니다.

C 및 JavaScript : 연결이 설명되었습니다Apr 23, 2025 am 12:07 AM

C 및 JavaScript는 WebAssembly를 통한 상호 운용성을 달성합니다. 1) C 코드는 WebAssembly 모듈로 컴파일되어 컴퓨팅 전력을 향상시키기 위해 JavaScript 환경에 도입됩니다. 2) 게임 개발에서 C는 물리 엔진 및 그래픽 렌더링을 처리하며 JavaScript는 게임 로직 및 사용자 인터페이스를 담당합니다.

웹 사이트에서 앱으로 : 다양한 JavaScript 애플리케이션Apr 22, 2025 am 12:02 AM

JavaScript는 웹 사이트, 모바일 응용 프로그램, 데스크탑 응용 프로그램 및 서버 측 프로그래밍에서 널리 사용됩니다. 1) 웹 사이트 개발에서 JavaScript는 HTML 및 CSS와 함께 DOM을 운영하여 동적 효과를 달성하고 jQuery 및 React와 같은 프레임 워크를 지원합니다. 2) 반응 및 이온 성을 통해 JavaScript는 크로스 플랫폼 모바일 애플리케이션을 개발하는 데 사용됩니다. 3) 전자 프레임 워크를 사용하면 JavaScript가 데스크탑 애플리케이션을 구축 할 수 있습니다. 4) node.js는 JavaScript가 서버 측에서 실행되도록하고 동시 요청이 높은 높은 요청을 지원합니다.

Python vs. JavaScript : 사용 사례 및 응용 프로그램 비교Apr 21, 2025 am 12:01 AM

Python은 데이터 과학 및 자동화에 더 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 더 적합합니다. 1. Python은 데이터 처리 및 모델링을 위해 Numpy 및 Pandas와 같은 라이브러리를 사용하여 데이터 과학 및 기계 학습에서 잘 수행됩니다. 2. 파이썬은 간결하고 자동화 및 스크립팅이 효율적입니다. 3. JavaScript는 프론트 엔드 개발에 없어서는 안될 것이며 동적 웹 페이지 및 단일 페이지 응용 프로그램을 구축하는 데 사용됩니다. 4. JavaScript는 Node.js를 통해 백엔드 개발에 역할을하며 전체 스택 개발을 지원합니다.

JavaScript 통역사 및 컴파일러에서 C/C의 역할Apr 20, 2025 am 12:01 AM

C와 C는 주로 통역사와 JIT 컴파일러를 구현하는 데 사용되는 JavaScript 엔진에서 중요한 역할을합니다. 1) C는 JavaScript 소스 코드를 구문 분석하고 추상 구문 트리를 생성하는 데 사용됩니다. 2) C는 바이트 코드 생성 및 실행을 담당합니다. 3) C는 JIT 컴파일러를 구현하고 런타임에 핫스팟 코드를 최적화하고 컴파일하며 JavaScript의 실행 효율을 크게 향상시킵니다.

자바 스크립트 행동 : 실제 예제 및 프로젝트Apr 19, 2025 am 12:13 AM

실제 세계에서 JavaScript의 응용 프로그램에는 프론트 엔드 및 백엔드 개발이 포함됩니다. 1) DOM 운영 및 이벤트 처리와 관련된 TODO 목록 응용 프로그램을 구축하여 프론트 엔드 애플리케이션을 표시합니다. 2) Node.js를 통해 RESTFULAPI를 구축하고 Express를 통해 백엔드 응용 프로그램을 시연하십시오.

JavaScript 및 웹 : 핵심 기능 및 사용 사례Apr 18, 2025 am 12:19 AM

웹 개발에서 JavaScript의 주요 용도에는 클라이언트 상호 작용, 양식 검증 및 비동기 통신이 포함됩니다. 1) DOM 운영을 통한 동적 컨텐츠 업데이트 및 사용자 상호 작용; 2) 사용자가 사용자 경험을 향상시키기 위해 데이터를 제출하기 전에 클라이언트 확인이 수행됩니다. 3) 서버와의 진실한 통신은 Ajax 기술을 통해 달성됩니다.

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

안전한 시험 브라우저

안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.

PhpStorm 맥 버전

최신(2018.2.1) 전문 PHP 통합 개발 도구

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.