JS 事件冒泡及阻止事件冒泡和默认行为

一、事件冒泡
1.原理：元素自身的事件被触发后，如果父元素有相同的事件，如click事件，那么元素本身的触发状态就会传递，也就是冒到父元素，父元素的相同事件也会一级一级根据嵌套关系向外触发，直到document/window，冒泡过程结束。
2.使用范围：冒泡事件只是针对于click相关的事件，还有click的分支事件：mouseup、mousedown
3.例：父元素与子元素具有相同的onclick事件，进行事件冒泡
元素及样式：

<div class="block" style="width: 200px;height: 200px;border: 1px solid red;">
    <button class="btn">按钮</button>
</div>

事件冒泡：

var count=0;
    var  b=document.getElementsByClassName("block")[0];
    var btn=document.getElementsByClassName("btn")[0];
    b.onmouseup=function(){
        count++;
        console.log(count);
    };
    btn.onmouseup=function(){
        count++;
        console.log(count);
    };

二、阻止事件冒泡和默认行为
1.event.preventDefault
作用:阻止一个目标元素的默认行为，不阻止事件冒泡。既然是说默认行为，当然是元素必须有默认行为才能被取消，如果元素本身就没有默认行为，调用当然就无效了。

Q：什么元素有默认行为呢？
A：如链接< a >，提交按钮< input type=”submit” >等。
当Event对象的cancelable为false时，表示没有默认行为，这时即使有默认行为，调用 preventDefault也是不会起作用的。

例：阻止右键弹出的搜索框（默认行为）

//oncontextmenu为右键弹出的搜索框
window.oncontextmenu=function (){
            event.preventDefault();
        };

2.event.stopPropagation
作用：阻止目标元素的冒泡事件，但是不阻止默认行为。

Q:什么是冒泡事件？
A:如在一个按钮是绑定一个”click”事件，那么”click”事件会依次在它的父级元素中被触发 ，stopPropagation就是阻止目标元素的事件冒泡到父级元素。

例：onclick事件的冒泡

<div id="div"  onclick="alert('div');" >
    <ul  onclick="alert('ul');">
        <li id="ul-a" onclick="alert('li');">test</li>
    </ul>
</div>

当单击test时，会依次触发alert(“li”),alert(“ul”),alert(“div”)，这就是事件冒泡。
当我们需要阻止冒泡时，就得使用event.stopPropagation

<div id="div"  onclick="alert('div');" >
    <ul  onclick="alert('ul');">
        <li id="ul-a" onclick="alert('li');event.stopPropagation();">test</li>
    </ul>
</div>

这时单击”test”，只会提示alert(‘li’);

3.return false
作用：
（1）在jQuery中使用return false时，相当于同时使用event.preventDefault和event.stopPropagation，它会阻止冒泡，也阻止默认行为；
（2）在原生js中，只阻止默认行为。