题解 | 事件委托
事件委托
https://www.nowcoder.com/practice/02866b3ce7f8420c8b5d22f483c5fcc0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul {
list-style-type: none;
}
</style>
</head>
<body>
<ul>
<li>.</li>
<li>.</li>
<li>.</li>
</ul>
<script>
// 获取DOM元素
const ul = document.querySelector('ul');
// querySelector()方法返回文档中匹配指定选择器的第一个元素
// 这里的选择器是'ul'，表示选择文档中的第一个ul元素
// 将获取到的ul元素赋值给变量ul
ul.onclick = function(e){
e.target.innerHTML +='.';
// e.target表示触发事件的元素，这里是点击的li元素
// innerHTML属性获取或设置元素的HTML内容
// 这里将li元素的HTML内容拼接上一个"."符号
}
</script>
</body>
</html>
HTML5基础结构
- 文档声明 ： <!DOCTYPE html> ，简化的HTML5标准声明
- 根元素 ： <html lang="en"> ，指定页面语言
- 基本结构 ： head （元数据） + body （内容）
- 列表元素 ： <ul> （无序列表）和 <li> （列表项）的基本使用
CSS基础样式
- 内嵌样式 ：使用 <style> 标签在HTML文件中直接定义样式
- 列表样式 ： list-style-type: none 移除列表项默认标记
- 选择器 ：元素选择器（如 ul ）选中所有对应元素
JavaScript DOM操作
- 元素获取 ： document.querySelector('ul') 根据CSS选择器获取元素 返回匹配的第一个元素支持各种CSS选择器语法
- 内容修改 ：innerHTML ：获取或设置元素HTML内容（含HTML标签）textContent ：获取或设置元素纯文本内容（更安全、高效）
DOM0级事件模型
- 定义 ：通过直接赋值给元素事件属性来绑定事件处理函数
- 语法 ： element.onclick = function(event) { /* 处理逻辑 */ }
- 特点 ： 简单易用，兼容性好同一事件只能绑定一个处理函数（后续绑定会覆盖之前的）移除事件： element.onclick = null
事件委托机制
- 原理 ：利用 事件冒泡 （事件从触发元素向上传播到父元素）
- 实现 ：将事件监听器绑定到父元素，处理子元素事件
- 优势 ：减少事件监听器数量，提升性能支持动态添加的子元素自动响应事件简化代码结构 6. 事件对象（Event）
- 获取 ：事件处理函数的第一个参数
- 核心属性 ：target ：触发事件的 实际元素 （如点击的 <li> ）currentTarget ：绑定事件监听器的 元素 （如 <ul> ）type ：事件类型（如 "click" ）
- 事件冒泡流程 ： e.target → 父元素 → ... → document → window
事件类型判断
- 需求 ：确保只有点击特定元素时才执行操作
- 实现 ：通过 e.target.tagName 判断元素类型
- 示例 ： if (e.target.tagName === 'LI') { /* 处理逻辑 */ }
- 注意 ： tagName 返回值为大写（如 "LI" ）
