事件代理、事件冒泡、事件捕获
2020-12-18 本文已影响0人
一土二月鸟
<!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>
div {
width: 100px;
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body id="body">
<div id="div1"></div>
<script type="text/javascript">
// 事件冒泡 在div上点击后，执行顺序为div>>body>>document>>window 将第三个参数设置为false为冒泡，默认为false
// 事件捕获 在div上点击后，执行顺序为window>>document>>body>>div 将第三个参数设置为true为捕获
div1.addEventListener('click', function () {
console.log(111);
}, false)
window.addEventListener('click', function () {
console.log(2222)
}, true)
// 事件委托、事件代理
// 当div没有添加事件，body添加事件时，通过点击div触发了body的现象叫做事件委托，和冒泡和捕获没有关系，冒泡或捕获影响的只是执行顺序
// 事件委托的经典案例：
// 只让点击li才生效+事件委托
var oUl = document.getElementById("ul1");
oUl.onclick = function (ev) {
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if (target.nodeName.toLowerCase() == 'li') {
alert(123);
alert(target.innerHTML);
}
}
</script>
</body>
</html>
