这在 DOM 和事件监听器中

Question

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

我已经将e（事件）传递给回调函数并实现了：
e.target.classList.toggle("活跃");
var 面板 = e.target.nextElementSibling;

我实施的方法奏效了。但是我想知道 benefit/why 你会在显示的上下文中使用“this”，它似乎不像 e.target 那样具有声明性。这是函数绑定问题吗？

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

我从 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 是 altered/reloads =>
循环运行=>
在每个 html 集合元素上添加一个事件侦听器=>
如果 HTML 元素被点击 == true（或者）事件被触发
class 切换为活动
下面的 if 语句被执行，样式可能会也可能不会内联应用到 html 元素。这似乎是一种计算量大的添加事件侦听器的方法。

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

Answer 1

这是一个简单的 HTML 布局：

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

这里是 JavaScript 使用称为 Event Delegation 的编程范例：

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.
 }

下面的示例与之前的解释几乎相同的委托方案，除了使用 adjacent sibling combinator:

的额外 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>

这在 DOM 和事件监听器中

this in the DOM and event listeners

html

javascript

dom

loops

dom-events