含義

事件冒泡

事件的觸發順序為，由內而外。直到文件最頂層（document或window）。

事件捕捉

事件的觸發順序為，由外而內。

任何發生在w3c事件模型中的事件，首是進入捕獲階段，直到達到目標元素，再進入冒泡階段。

//使用事件捕捉模式
element1.addEventListener('click',doSomething2,true)
//使用事件冒泡模式（預設）
element2.addEventListener('click',doSomething,false)

阻止冒泡

even.stopPropagation();

//只輸出 a標籤  裡層div,但是超連結依舊跳轉。
//該方法只能阻止冒泡，不能阻止預設行為。
<div
 
 id="parent-div">
   <div id="child-div">
       <a href="#">點選我</a>
   </div>
</div>
<script type="text/javascript">
   $("#parent-div").click(function () {
       console.log("外層div");
   });
   $("#child-div").click(function (even) {
       console.log("裡層div");
       even.stopPropagation();
   });
   $("a"
 
).click(function () {
       console.log("a標籤");
   });
</script>

return false;

//即阻止預設行為，也阻止冒泡
<div id="parent-div">
    <div id="child-div">
        <a href="www.baidu.com">點選我</a>
    </div>
</div>
<script type="text/javascript">
    $("#parent-div").click(function
 
 () {
        console.log("外層div");
    });
    $("#child-div").click(function (even) {
        console.log("裡層div");
        return false;
    });
    $("a").click(function () {
        console.log("a標籤");
    });
</script>

event.preventDefault();

//只阻止預設行為，而不阻止冒泡。
//event.preventDefault()；放在任何一層中，都會阻止。
<div id="parent-div">
    <div id="child-div">
        <a href="www.baidu.com">點選我</a>
    </div>
</div>
<script type="text/javascript">
    $("#parent-div").click(function () {
        console.log("外層div");
    });
    $("#child-div").click(function (even) {
        console.log("裡層div");
    });
    $("a").click(function (even) {
        console.log("a標籤");
        even.preventDefault();
    });
<script>