DOM事件流

Myth丶恋晨 2024-04-19 10:37 15阅读 0赞

DOM事件流所描述的就是从页面中接受事件的顺序，有三个阶段

### 事件捕获阶段（Capture Phase） ###

事件的第一个阶段是捕获阶段。事件从文档的根节点出发，随着 DOM 树的结构向事件的目标节点流去。途中经过各个层次的 DOM 节点，并在各节点上触发捕获事件，直到到达事件的目标节点。捕获阶段的主要任务是建立传播路径，在冒泡阶段，事件会通过这个路径回溯到文档跟节点。

### 目标阶段（Target Phase） ###

当事件到达目标节点的，事件就进入了目标阶段。事件在目标节点上被触发，然后会逆向回流，直到传播至最外层的文档节点。

### 冒泡阶段（Bubble Phase） ###

事件在目标元素上触发后，并不在这个元素上终止。它会随着 DOM 树一层层向上冒泡，直到到达最外层的根节点。也就是说，同一个事件会依次在目标节点的父节点，父节点的父节点...直到最外层的节点上被触发。

冒泡过程非常有用。它将我们从对特定元素的事件监听中释放出来，相反，我们可以监听 DOM 树上更上层的元素，等待事件冒泡的到达。如果没有事件冒泡，在某些情况下，我们需要监听很多不同的元素来确保捕获到想要的事件。

### 阻止冒泡 ###

很多时候其实不需要事件冒泡，比如一个按钮绑定一个”click”事件，并不希望事件冒泡到父级元素

function stopBubble(e) { 
    //如果提供了事件对象，则这是一个非IE浏览器 
    if ( e && e.stopPropagation ) 
        //因此它支持W3C的stopPropagation()方法 
        e.stopPropagation(); 
    else 
        //否则，我们需要使用IE的方式来取消事件冒泡 
        window.event.cancelBubble = true; 
    }

### 阻止默认事件 ###

//阻止浏览器的默认行为 
    function stopDefault( e ) { 
        //阻止默认浏览器动作(W3C) 
        if ( e && e.preventDefault ) 
            e.preventDefault(); 
        //IE中阻止函数器默认动作的方式 
        else 
            window.event.returnValue = false; 
        return false; 
    }

javascript的return false只会阻止默认行为，而是用jquery的话则既阻止默认行为又防止对象冒泡 document.getElementById("a").onclick = function()\{return false;\}; // 阻止默认行为

$("\#a").on('click',function()\{return false;\}); //阻止默认行为又防止对象冒泡