2024-05-30 How TO - Collapse

發表於 更新於 分類於 閱讀次數：
How TO - Collapse ,JavaScript 的 addEventListener() 事件

2024-05-30 How TO - Collapse

通常用在 FAQ 常見問題集的頁面 ， 點擊問題按鈕時，才會出現回答，
須要配合 javascript 的addEventListner()事件。
Javascript 的程式碼大概的意思是：
抓取所有 collapsible 選擇器， 並為其添加 click 事件，
當事件 click 啓動後，檢查 content 選擇器 屬性為 maxHeight 是有數字的(就是不為 0 或 null),
就把maxHeight 設為 null 「閉合」，反之則「展開」

w3cSchool 的示範程式如下:

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #555;
}

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}
</style>
</head>
<body>

<h2>Animated Collapsibles</h2>

<p>Collapsible Set:</p>
<button class="collapsible">Open Section 1</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="collapsible">Open Section 2</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="collapsible">Open Section 3</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<script>
var coll = document.getElementsByClassName("collapsible");
var i;


for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
  });
}
</script>

</body>
</html>

…

2024-05-30 JavaScript 的 addEventListener() 事件

addEventListener()

可以作為事件目標的任何物件,包含Window 和 Document 物件以 Elements,都定義有一個名為 addEventListener()的方法,你可以用它來 冊事件處理器。addEventListener()接受三個引數。第一個是要為之註冊 類型。事件類型(或事件名稱)是一個字串,它不包含設定事件處理器 「on」前綴。
addEventListener()的第二個引數是指定類型的事件發生時應該被調用的函式。第三個引數是選擇性的,並且會在下面解釋。

下列程式碼為一個<button>元素上的「click」事件註冊了兩個處理器。 兩種技巧之間的差異:

1
2
3
4
5
6
7
8
9
<button id="mybutton">Click me</button>

<script>

let b = document.querySelector("#mybutton");

b.onclick = function() { console.log("Thanks for clicking me!"); }; b.addEventListener("click", () => { console.log("Thanks again!"); });

</script>

以”click” 作為其第一引數來呼叫 addEventListener()並不會影響到 onclick特性的值。
這段程式碼中,一次按鈕點擊(button click)會在開發人員主控台記錄兩個訊息。
如果我們先呼叫 addEventListener()然後再設定 onclick,我們仍然會看到兩個訊息，只是順序相反。
更重要的是,你可以多次呼叫 addEventListener()以在同一個物件上為相同的事件類型註冊一個以上的處理器函式,
當一個事件在一個物件上發生,為那個註冊的所有處理器都會被調用,並以它們當初註冊的順序進行。
在同一個物件以上以相同的引數調用 addEventListener()超過一次,不會有什麼效果,該處理器函式仍然只註冊了一次,
而這種重複調用並不會改變處理器被調用的順序。

摘錄 JavaScript 大全第七版 第456頁

…