本文针对MDN上的事件调用模块进行了代码部分的摘要，对代码块进行了改造或合并，如果想要更详细的介绍说明，可以跳转MDN进行学习。
click点击事件
<button id="button">请点击我</button>
<div id="container" class="container" />
<script>
// 修改颜色逻辑
const handleChangeColor = () => {
const r = Math.floor(Math.random() * (255 + 1));
const g = Math.floor(Math.random() * (255 + 1));
const b = Math.floor(Math.random() * (255 + 1));
const container = document.getElementById("container");
container.style.backgroundColor = `rgb(${r},${g},${b})`;
};
// 按钮元素绑定事件，改变颜色
const button = document.getElementById("button");
// 方法1
button.addEventListener("click", handleChangeColor);
// 方法2 事件前加on，直接绑定事件
// button.onclick = handleChangeColor
</script>
<style>
.container {
width: 100px;
height: 100px;
border: 1px solid #999;
}
</style>
事件移除
btn.removeEventListener("click", handleChangeColor);
const controller = new AbortController();
button.addEventListener("click", handleChangeColor, {
signal: controller.signal,
});
controller.abort(); // 移除任何/所有与该控制器相关的事件处理器
事件绑定多个方法
// 😄 三个操作都会被执行
button.addEventListener("click", functionOne);
button.addEventListener("click", functionTwo);
button.addEventListener("click", functionThree);
// 😰 属性被覆盖，执行最后的操作
button.onclick = functionOne
button.onclick = functionTwo
button.onclick = functionThree
需要注意的是：使用addEventListener的时候，click事件被触发，三个事件都会被调用。但是使用属性进行赋值时，属性会被覆盖，只执行覆盖的操作。
event
<div id="container" class="container" />
<script>
// 修改颜色逻辑
const handleChangeColor = (event) => {
const r = Math.floor(Math.random() * (255 + 1));
const g = Math.floor(Math.random() * (255 + 1));
const b = Math.floor(Math.random() * (255 + 1));
event.target.style.backgroundColor = `rgb(${r},${g},${b})`;
};
// 按钮元素绑定事件，改变颜色
const button = document.getElementById("container");
button.addEventListener("click", handleChangeColor);
</script>
<style>
.container { width: 100px; height: 100px; border: 1px solid #999; }
</style>
我们将上述的案例进行一个改造，在事件内部，使用event进行调用元素，可以看出，其实event.target就是指向了事件触发的元素本身。
keydown获取按键
<input id="input" type="text" />
<div id="output"></div>
<script>
const textBox = document.getElementById("input");
const output = document.getElementById("output");
textBox.addEventListener("keydown", (event) => {
output.textContent = `You pressed "${event.key}".`;
});
</script>
可以看出，在keydown这个事件中，event中包含了一个key，这个值就是按下按键的值。
阻止默认事件
<form>
<div>
<label for="name">name: </label>
<input id="name" type="text" />
</div>
<div>
<label for="age">age: </label>
<input id="age" type="text" />
</div>
<div>
<input id="submit" type="submit" />
</div>
</form>
<script>
const form = document.querySelector("form");
const name = document.getElementById("name");
const age = document.getElementById("age");
form.addEventListener("submit", (event) => {
if (!name.value || !age.value) {
event.preventDefault(); // 阻止默认事件
console.error("校验失败");
return;
}
alert("校验通过");
});
</script>
阻止事件冒泡
<body>
<div id="container" class="container">
<button>我是按钮</button>
</div>
<pre id="output"></pre>
</body>
<script>
const output = document.querySelector("#output");
function handleClick(event) {
event.stopPropagation(); // 阻止事件冒泡
output.textContent += `${event.currentTarget.tagName} 元素被点击\n`;
}
const container = document.querySelector("#container");
const button = document.querySelector("button");
document.body.addEventListener("click", handleClick);
container.addEventListener("click", handleClick);
button.addEventListener("click", handleClick);
</script>
<style>
.container { width: 100px; height: 100px; border: 1px solid #999; }
</style>
这时候点击按钮的时候，会触发body、container、button三个事件，发生了事件冒泡，这时候，就需要对冒泡事件进行拦截，可以使用event.stopPropagation()
事件委托：父元素监听子元素事件
<div id="container" class="container">
<div class="tile" />
<div class="tile" />
<div class="tile" />
</div>
<script>
const random = () => Math.floor(Math.random() * 255);
const bgChange = () => `rgb(${random()}, ${random()}, ${random()})`;
const container = document.querySelector("#container");
container.addEventListener("click", (event) => {
event.target.style.backgroundColor = bgChange();
});
</script>
<style>
.container { height: 100px; width: 300px; display: flex; }
.tile { height: 100px; width: 100px; border: 1px solid #999; }
</style>
效果： 这个案例在父元素添加点击事件，实现了子元素点击时候，修改了子元素块样式。
解析： 在父元素添加监听事件，子元素点击的时候，会发生事件冒泡，但是event.target还是指向了当前点击的元素，这时候通过js修改当前元素样式。
