javascript 事件机制_wangjie9623 csdn-优快云博客

本文深入解析JavaScript事件机制，包括事件流的三个阶段：捕获、目标和冒泡。阐述了事件捕获与冒泡的区别，并提供了addEventListener函数的使用方法及兼容写法。同时，介绍了如何阻止事件流。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js 事件机制

前端在面试的时候经常会遇到js事件机制的原理和使用方法，我呢，开始也是一直都比较模糊，仔细看了一下文档，总结一下我学习到的。

事件流是一个事件沿着特定数据结构传播的过程。冒泡和捕获是事件流在DOM中两种不同的传播方法。

事件流有三个阶段：
1.事件捕获阶段
2.处于目标阶段
3.事件冒泡阶段

什么是捕获和冒泡

举个栗子：

<div id="div1">
        <div id="div2"></div>
    </div>
    
    <script>
        let div1 = document.getElementById('div1');
        let div2 = document.getElementById('div2');
        
        div1.onClick = function(){
            alert('1')
        }
        
        div2.onClick = function(){
            alert('2');
        }
    
    </script>

当点击 div2时，会弹出两个弹出框。在 ie8/9/10、chrome浏览器，会先弹出"2"再弹出“1”，这就是事件冒泡：事件从最底层的节点向上冒泡传播。事件捕获则跟事件冒泡相反。
W3C的标准是先捕获再冒泡， addEventListener的第三个参数决定把事件注册在捕获（true）还是冒泡(false)

addEventListener 函数反正记住 true 是捕获，false 是冒泡

obj.addEventListener("click", func, true); // 捕获方式
obj.addEventListener("click", func, false); // 冒泡方式

但是IE9以下不支持 addEventListener函数，IE浏览器要使用 attachEvent函数代替。

兼容写法

if(window.addEventListener){
        //chrom firefor ...
        object.addEventListener('click',function(){
        },false);
    }
    else if(window.attachEvent){
        //IE
        object.attachEvent('onclick',function(){})
    }
    else{
        object.onclick = function(){}
    }

事件流阻止

event.stopPropagation();就是阻止事件的冒泡

event.stopImmediatePropagation(); 可以用来阻止捕获