【前端每日基础】day25—

【前端每日基础】day25——事件处理

事件处理
事件处理允许网页响应用户的交互，例如点击、键盘输入、鼠标移动等。

添加事件监听器
可以使用addEventListener来添加事件监听器：

let button = document.getElementById("myButton");// 添加点击事件监听器
button.addEventListener("click", function() {alert("Button clicked!");
});// 添加鼠标悬停事件监听器
button.addEventListener("mouseover", function() {console.log("Mouse over button!");
});

移除事件监听器
可以使用removeEventListener来移除事件监听器：

function handleClick() {alert("Button clicked!");
}button.addEventListener("click", handleClick);// 移除点击事件监听器
button.removeEventListener("click", handleClick);

事件对象
事件处理函数通常会接收一个事件对象，它包含了与事件相关的信息：

button.addEventListener("click", function(event) {// 阻止默认行为（例如，阻止链接跳转）event.preventDefault();// 阻止事件冒泡event.stopPropagation();// 获取事件目标let target = event.target;console.log("Clicked element:", target);
});

事件委托
事件委托是一种将事件监听器添加到父元素上，通过检查事件目标来处理子元素事件的方法。这样可以减少事件监听器的数量，提高性能：

let list = document.getElementById("list");list.addEventListener("click", function(event) {if (event.target && event.target.nodeName === "LI") {console.log("List item clicked:", event.target.textContent);}
});

常见事件类型
鼠标事件：click、dblclick、mouseover、mouseout、mousemove、mousedown、mouseup
键盘事件：keydown、keyup、keypress
表单事件：submit、change、input、focus、blur
窗口事件：load、resize、scroll、unload
示例：创建一个交互式网页
以下是一个示例，通过DOM操作和事件处理创建一个简单的交互式网页：

<!DOCTYPE html>
<html>
<head><title>Interactive Page</title><style>.highlight {background-color: yellow;}</style>
</head>
<body><h1 id="header">Interactive Page</h1><button id="changeColorButton">Change Color</button><button id="addParagraphButton">Add Paragraph</button><ul id="list"><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul><script>let header = document.getElementById("header");let changeColorButton = document.getElementById("changeColorButton");let addParagraphButton = document.getElementById("addParagraphButton");let list = document.getElementById("list");// 改变标题颜色changeColorButton.addEventListener("click", function() {header.classList.toggle("highlight");});// 添加段落addParagraphButton.addEventListener("click", function() {let newParagraph = document.createElement("p");newParagraph.textContent = "This is a new paragraph.";document.body.appendChild(newParagraph);});// 处理列表项点击list.addEventListener("click", function(event) {if (event.target && event.target.nodeName === "LI") {alert("Clicked item: " + event.target.textContent);}});</script>
</body>
</html>