this 在 DOM 和事件监听器中

Question

有人可以告诉我如何重构没有“this”的 JavaScript 以解释在浏览器上下文中使用“this”的方式吗？ （以下问题请不要用jQuery解答）

我已经将 e（事件）传递给回调 function 并实现了：
e.target.classList.toggle("active");
var panel = e.target.nextElementSibling;

我实施的措施奏效了。 但是我想知道在显示的上下文中使用“this”有什么好处/为什么，它似乎不像 e.target 那样具有声明性。 这是 function 绑定问题吗？

（片段下方的其他片段相关问题）

我从 W3schools 中获取了以下代码片段，它用于创建手风琴菜单：

 var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { /* Toggle between adding and removing the "active" class, to highlight the button that controls the panel */ this.classList.toggle("active"); /* Toggle between hiding and showing the active panel */ var panel = this.nextElementSibling; if (panel.style.display === "block") { panel.style.display = "none"; } else { panel.style.display = "block"; } }); }

 /* Style the buttons that are used to open and close the accordion panel */.accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; text-align: left; border: none; outline: none; transition: 0.4s; } /* Add a background color to the button if it is clicked on (add the.active class with JS), and when you move the mouse over it (hover) */.active, .accordion:hover { background-color: #ccc; } /* Style the accordion panel. Note: hidden by default */.panel { padding: 0 18px; background-color: white; display: none; overflow: hidden; }

 <button class="accordion">Section 1</button> <div class="panel"> <p>Lorem ipsum...</p> </div> <button class="accordion">Section 2</button> <div class="panel"> <p>Lorem ipsum...</p> </div> <button class="accordion">Section 3</button> <div class="panel"> <p>Lorem ipsum...</p> </div>

有人可以解释一下循环和事件侦听器之间的关系吗？

按照我的理解，我希望：
每次更改/重新加载 DOM =>
循环运行=>
在每个 html 集合元素上添加一个事件侦听器=>
如果 HTML 元素被点击 == true（或）事件被触发
class 切换为活动
执行以下 if 语句，并且 styles 可能会或可能不会内联应用于 html 元素。 这似乎是一种计算量大的添加事件侦听器的方法。

如果不完全是发生了什么，我写的上述陈述是否正确？
有没有更有效的方法来编写事件监听器循环片段？
即在包含元素上使用事件冒泡？

Answer 1

这是一个简单的 HTML 布局：

<main>
  <div class='A'></div>
  <section></section>
  <div class='B'></div>
  <section></section>
  <div class='C'></div>
</main>

这是使用称为事件委托的编程范例的 JavaScript：

document.querySelector('main').addEventListener('click', eventHandler);

因为大多数事件冒泡（点击气泡），事件监听器应该注册到你想通过事件控制的标签的祖先标签（在这个例子中是<main> ）（在这个例子中是.A ， .B和.C ）。 现在事件处理程序：

function eventHandler(event) {
  const listener = event.currentTarget; // or `this` points to `<main>`
  const clicked = event.target; // This is the tag user actually clicked
    ....

我们需要准确控制什么对点击有反应，什么在点击时没有反应。 我们可以使用if/if else或switch()甚至三元来将事件委托给我们想要的，同时排除我们不想要的。 在eventHandler(e)中继续......

....
  // All <section>s and even <main> is excluded
  if (clicked.matches('div')) {
    
    if (clicked.matches('.A')) {
       clicked.style.background = 'red';
    }
    if (clicked.matches('.C') {
       clicked.style.background = 'blue';
    }
  }
  // .B was never mentioned with any specific intructions so it's also excluded.
 }

下面的示例与之前的解释几乎相同的委托方案，除了带有相邻兄弟组合器的额外 CSS 技巧：

.accordion.active+.panel {
  display: block;
}

每当一个按钮是.active时，它后面的.panel就会消失。

 document.body.addEventListener("click", togglePanel); function togglePanel(e) { const clk = e.target; if (clk.matches('.accordion')) { clk.classList.toggle("active"); } };

 .accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; text-align: left; border: none; outline: none; transition: 0.4s; }.active, .accordion:hover { background-color: #ccc; }.panel { padding: 0 18px; background-color: white; display: none; overflow: hidden; }.accordion.active+.panel { display: block; }

 <button class="accordion">Section 1</button> <div class="panel"> <p>Lorem ipsum...</p> </div> <button class="accordion">Section 2</button> <div class="panel"> <p>Lorem ipsum...</p> </div> <button class="accordion">Section 3</button> <div class="panel"> <p>Lorem ipsum...</p> </div>