2024-05-31 了解 JavaScript 的 addEventListener() click 事件處理器，用 console.log 追踪

發表於 更新於 分類於 閱讀次數：
2024-05-31 了解 JavaScript 的 addEventListener() click 事件處理器，用 console.log 追踪

2024-05-31 了解 JavaScript 的 addEventListener() click 事件處理器，用 console.log 追踪

javascript 程式碼如下 ，：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

// 程式碼說明, FAQ 的展開與晰合 ：
// 抓取所有 類別選取器 為 collapsible 的元素，
// 抓到之後 ，跑 for 迴圈
// 利用addEventListener 監聽當使用者按下「某個問題」的 click 事件時
// 呼叫調用函式 ，
// 調用情境(this) ，這個程式的 this 就是 button 元素，
//  button 元素自動偵測是否帶有該class 並做切換"active" class
// 下一步，判斷此 button 的下一個元素，其樣式名稱為 maxHeight, 
// 如果maxHeight 有值,表示目前這個問題的答案是「展開的」，要將它「閉合」
//反之 ，則「展開」,並賦予scrollHeight 高度的值

var coll = document.querySelectorAll('.collapsible');

var coll = document.querySelectorAll('.collapsible');
var i;
console.log( coll);


for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");

    console.log(this);

    var content = this.nextElementSibling;

    console.log('this.nextElementSibling: ' , this.nextElementSibling
    )

    if (content.style.maxHeight){
      content.style.maxHeight = null;
      console.log('展開變閉合: '+ content.style.maxHeight)
    } else {
  
      content.style.maxHeight = content.scrollHeight + "px";
      console.log('閉合變展開: '+ content.style.maxHeight)
    } 
  });
}


用 console.log（）追踪 ：




…