Clever Geek Handbook

JavaScript中事件委托的简单说明

问候。我提请您注意Dmitri Pavlutin于2020年7月14日发表的文章“ JavaScript中的事件委托的简单解释”的翻译





在本文中，Dmitry Pavlutin解释了处理DOM事件的基本模式之一。



1.为什么要进行事件委托？



让我们编写一个脚本，单击HTML按钮时，它将向控制台发送一条消息。



, JavaScript addEventListener() .



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

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


. , .



, ? :



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

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


, , CodeSandbox



, for (const button of buttons) , . , , .



?



, " ", .



" ". , , .



2.



HTML-:



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


click? , . , , ( document window).



3 :



  1. / (capturing phase) – window, document , DOM- ,
  2. (target phase) – ,
  3. (bubble phase) – , , , document window




captureOrOptions addEventListener:



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


.



  • captureOrOptions , false `{ capture: false }, " " " "
  • captureOrOptions true `{ capture: true }, " ()"


<body> " ":



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


CodeSandbox, , , .



, ?



: , , . .



3.



, :



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

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


– "Click!".



. , <div id="buttons">. , , ( ?).



3 :



1.

<div id="buttons"> .



2.

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



3. event.target

, - : event. event.target , ( – ):



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


, , event.currentTarget. event.currentTarget <div id="buttons">.



: , , , .



4.



( ):



  • window, document, ( / )
  • ( )
  • , , , , document window ( )


.



事件委托是一种有用的模式，因为它允许您仅使用一个处理程序就可以跨多个元素跟踪事件。



为了使事件委派起作用，您需要3个步骤：



  1. 定义元素的父级以跟踪事件
  2. 附加一个事件处理程序
  3. 使用event.target选择目标项目


More articles:


All Articles