事件代理是一種將事件處理委托給父元素或祖先元素來管理的技術。當子元素觸發特定事件時，該事件不會直接在子元素上進行處理，而是會冒泡到父元素或祖先元素，并在那里進行處理。這樣做的好處是可以減少事件處理函數的數量，提高性能，并且可以動態添加或刪除子元素而無需重新綁定事件處理函數。
以下是一個使用事件代理的示例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Delegation Example</title>
<style>.container {border: 1px solid #ccc;padding: 20px;}.item {cursor: pointer;margin-bottom: 10px;}
</style>
</head>
<body><div class="container" id="container"><div class="item">Item 1</div><div class="item">Item 2</div><div class="item">Item 3</div>
</div><script>
// 獲取父元素
const container = document.getElementById('container');// 添加事件監聽器到父元素上
container.addEventListener('click', function(event) {// 檢查點擊的元素是否為子元素if (event.target.classList.contains('item')) {// 如果是子元素，輸出其文本內容console.log('Clicked item:', event.target.textContent);}
});
</script></body>
</html>
在這個示例中，我們將點擊事件綁定在父元素 .container 上。當點擊子元素 .item 時，事件會冒泡到父元素，然后在父元素上進行處理。這樣做的好處是無論我們添加或刪除子元素，點擊事件都能被正確地處理，而不需要重新綁定事件處理函數。
)
將Object類型轉換成String類型)
