事件代理、事件冒泡、事件捕获

作者: 一土二月鸟 | 来源:发表于2020-12-18 17:59 被阅读0次

Javascript 事件代理、冒泡和捕获
事件代理及常用的 HTML 事件
事件冒泡、事件捕获、事件代理
事件代理、事件冒泡、事件捕获
2022-01-09 浏览器相关面试知识点
zj9 事件
事件冒泡、事件捕获、事件委托
DOM事件
DOM-BOM-EVENT（7）
前端知识二

<!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>