<div 增加單擊事件</div>
<div>div 是 HTML 中一個常用的元素，用于創建塊級元素。它具有一些常見的屬性，如寬度、高度、背景顏色等，可以通過 CSS 進行樣式定制。除了通過 CSS 進行樣式控制，div 還可以通過 JavaScript 添加交互功能。其中，一項常用的功能是為 div 元素添加單擊事件。</div>
<div>div 是 HTML 中一個常用的元素，用于創建塊級元素。它具有一些常見的屬性，如寬度、高度、背景顏色等，可以通過 CSS 進行樣式定制。除了通過 CSS 進行樣式控制，div 還可以通過 JavaScript 添加交互功能。其中，一項常用的功能是為 div 元素添加單擊事件。</div>
下面將通過幾個代碼案例詳細解釋如何為 div 添加單擊事件。
案例一：
<html>
<head>
<style>
#myDiv {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="myDiv"></div>
<br>
<script>
let div = document.getElementById("myDiv");
div.addEventListener("click", function() {
div.style.backgroundColor = "blue";
});
</script>
</body>
</html>在上述案例中，我們創建了一個 id 為 myDiv 的 div 元素，并添加了一個 click 事件監聽器。當用戶單擊該 div 元素時，監聽器中的回調函數將會被觸發。在回調函數中，我們修改了該 div 的背景顏色為藍色。因此，當用戶單擊該 div 元素時，背景顏色將會變為藍色。
案例二：
<html>
<head>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>點擊下方的按鈕</p>
<button onclick="highlightDiv()">單擊</button>
</div>
<br>
<script>
function highlightDiv() {
let divs = document.getElementsByTagName("div");
for (let i = 0; i < divs.length; i++) {
divs[i].classList.add("highlight");
}
}
</script>
</body>
</html>在上述案例中，我們創建了一個包含按鈕的 div 元素。當用戶單擊按鈕時，會觸發 onclick 事件中指定的 highlightDiv 函數。該函數通過使用 getElementsByTagName 方法獲取所有的 div 元素，并通過添加類名 "highlight" 實現對 div 元素的高亮效果。
通過以上案例的詳細解釋，我們可以清楚地了解如何為 div 元素添加單擊事件。這種方式可以增加用戶與網頁的交互性，為網頁的功能和體驗提供更多可能性。