本文深入解析JavaScript中的DOM事件机制，涵盖事件对象的获取与常用属性（如clientX、key等），详细阐述事件流的捕获与冒泡原理，并介绍如何利用事件委托优化性能。通过具体代码案例，演示如何阻止事件流动及默认行为，帮助开发者掌握前端交互的核心技术。
1、事件对象
【获取事件对象】
- 事件对象是一个包含触发事件时相关信息的对象。
- 事件对象的语法
元素.addEventListener('click',function(e){})【事件对象常用属性】
- type：用于获取当前触发的事件类型。
- clientX/clientY：用于获取鼠标光标相对于浏览器可见窗口左上角的坐标位置。
- offsetX/offsetY：用于获取鼠标光标相对于当前DOM元素左上角的坐标位置。
- key：记录用户按下的键盘按键值。
【案例】：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<img src="./images/tianshi.gif" alt="">
<script>
let img = document.querySelector('img')
document.addEventListener('mousemove', function (e) {
img.style.top = e.pageY-40 + 'px'
img.style.left = e.pageX-50 + 'px'
})
</script>
</body>
</html>
2、事件流
【解释】：事件流指的是事件在DOM树中完整执行的流动路径。
【图解】：
【说明】：
- 捕获阶段的事件传播方向是从父元素到子元素。
- 冒泡阶段的事件传播方向是从子元素到父元素。
【什么是事件冒泡】：当某个元素的事件被触发时，相同类型的事件会沿着DOM树向上，依次在该元素的所有祖先元素中触发。
事件冒泡是浏览器默认存在的行为。
【案例解释】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
margin: 100px auto;
width: 500px;
height: 500px;
background-color: pink;
}
.son {
width: 200px;
height: 200px;
background-color: purple;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<script>
let fa = document.querySelector('.father')
let son = document.querySelector('.son')
fa.addEventListener('click', function () {
alert('我是爸爸')
}, true)
son.addEventListener('click', function () {
alert('我是儿子')
}, true)
document.addEventListener('click', function () {
alert('我是爷爷')
}, true)
// btn.onclick = function() {}
</script>
</body>
</html>
【事件捕获概念】：事件从DOM树的根元素开始，向下执行对应的事件处理。
【语法】
DOM.addEventListener(事件类型,事件处理函数,是否使用捕获机制)【说明】
- 在addEventListener的第三个参数中传入true，表示在捕获阶段触发事件。
- 若传入false，则表示在冒泡阶段触发，这也是默认值。
- 早期的事件绑定写法仅支持冒泡阶段，没有捕获机制。
【阻止事件的流动】
语法：
事件对象.stopProPagation()说明：
- 阻止事件流动的方法在捕获和冒泡阶段均有效。
- mouseover和mouseout事件会产生冒泡效果。
- mouseenter和mouseleave事件不产生冒泡效果（推荐使用这两个事件）。
【阻止事件的默认行为】
语法：
e.preventDefault()3、事件委托
【解释】：事件委托是指将子元素的事件处理逻辑委托给父级元素或其他祖先元素来处理。
【优点】：通过给父级元素添加事件监听器，可以极大地优化页面性能，特别是当子元素动态增减时。
【原理】：利用事件冒泡的特性，在父级元素上绑定事件，当子元素触发事件时，事件会冒泡到父级，从而被捕获并处理。
【语法】：通过事件对象的target属性，可以获取到真正触发该事件的原始元素。
4、综合案例
**【需求】：**点击录入按钮，可以增加学生信息。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/user.css">
</head>
<body>
<h1>新增学员</h1>
<div class="info">
姓名：<input type="text" class="uname">
年龄：<input type="text" class="age">
性别: <select name="gender" id="" class="gender">
<option value="男">男</option>
<option value="女">女</option>
</select>
薪资：<input type="text" class="salary">
就业城市：<select name="city" id="" class="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
<option value="曹县">曹县</option>
</select>
<button class="add">录入</button>
</div>
<h1>就业榜</h1>
<table>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>薪资</th>
<th>就业城市</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
//准备好数据后端的数据
let arr = [
{ stuId: 1001, uname: '欧阳霸天', age: 19, gender: '男', salary: '20000', city: '上海' },
{ stuId: 1002, uname: '令狐霸天', age: 29, gender: '男', salary: '30000', city: '北京' },
{ stuId: 1003, uname: '诸葛霸天', age: 39, gender: '男', salary: '2000', city: '北京' },
]
// 获取元素
let tbody = document.querySelector('tbody');
// 获取录入按钮
let add = document.querySelector('.add');
// 获取表单元素
let uname = document.querySelector('.uname')
let age = document.querySelector('.age')
let gender = document.querySelector('.gender')
let salary = document.querySelector('.salary')
let city = document.querySelector('.city')
// 封装渲染数据的函数
function render() {
// 清空原来的数据
tbody.innerHTML = ''
for (let i = 0; i < arr.length; i++) {
// 创建tr
let tr = document.createElement('tr');
// 添加数据
tr.innerHTML = `
<td>${arr[i].stuId}</td>
<td>${arr[i].uname}</td>
<td>${arr[i].age}</td>
<td>${arr[i].gender}</td>
<td>${arr[i].salary}</td>
<td>${arr[i].city}</td>
<td>
<a href="javascript:" id=${i}>删除</a>
</td>
`
tbody.appendChild(tr)
// 复原表单数据
uname.value = age.value = salary.value = ''
}
}
// 调用页面加载函数
render();
// 添加数据操作
add.addEventListener('click', function () {
// 获取表单的数据 添加到数组
arr.push({
stuId: arr[arr.length - 1].stuId + 1,
uname: uname.value,
age: age.value,
gender: gender.value,
salary: salary.value,
city: city.value
})
render();
})
// 删除操作
tbody.addEventListener('click', function (e) {
if (e.target.tagName === 'A') {
arr.splice(e.target.id, 1)
render()
}
})
</script>
</body>
</html>
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注本站的更多内容!