this在DOM和事件監聽器中

有人可以告訴我如何在沒有“this”的情況下重構 JavaScript，以解釋在瀏覽器背景關系中使用“this”的方式嗎？（請不要用jQuery解決方案回答以下問題）

我已將 e (event) 傳入回呼函式并實作：
e.target.classList.toggle("active");
var panel = e.target.nextElementSibling;

我已經實施的作業。但是我想知道在顯示的背景關系中使用“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 被更改/重新加載 =>
回圈運行 =>
在每個 html 集合元素上添加一個事件偵聽器 =>
如果 HTML 元素單擊 == true （或）事件是觸發
該類被切換為激活
以下 if 陳述句，并且樣式可能會或可能不會行內應用于 html 元素。這似乎是一種添加事件偵聽器的計算成本高昂的方法。

如果不完全是發生了什么，我寫的上述陳述是否正確？
有沒有更有效的方法來撰寫事件監聽器回圈片段？
即在包含元素上使用事件冒泡？

uj5u.com熱心網友回復：

這是一個簡單的 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>

標籤：javascript html 循环 dom dom 事件

上一篇：C#為什么Array.IndexOf回傳-1

下一篇：計算完成時更新for回圈內的輸出