JS事件處理模型

01 前言

1. 事件冒泡：結構上（非視覺上）嵌套關系的元素，會存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素（自底向上）
2. 事件捕獲：結構上（非視覺上）嵌套關系的元素，會存在事件捕獲的功能，即同一事件，自父元素捕獲至子元素（事件源元素）（自頂向下）
3. 一個物件的一個事件型別系結一個處理函式只能遵循一個事件模型，但是若一個物件的一個事件型別系結兩個處理函式，那么觸發順序：先捕獲，后冒泡，
4. element.addEventListener(event-type, function, false/true)方法用于向指定元素添加事件句柄，IE8 及更早IE版本不支持該方法，

02 事件冒泡

• 同一事件，自子元素冒泡向父元素，即 自底向上 ，
• 標準的方法：元素.addEventListener(event-type,function,false)
• 注：focus, blur, change, submit, reset,select 等事件不冒泡，

2.1 實體

冒泡（結構自底向上）

• html代碼如下：

<div class="wrapper">
    <div class="content">
        <div class="box"></div>
    </div>
</div>

• css代碼如下：

.wrapper {
    width: 300px;
    height: 300px;
    background-color: red;
}

.content {
    width: 200px;
    height: 200px;
    background-color: green;
}

.box {
    width: 100px;
    height: 100px;
    background-color: yellow;
}

• JavaScript代碼如下：

wrapper.addEventListener('click', function () {
    console.log('wrapper');
}, false); // wrapper
content.addEventListener('click', function () {
    console.log('content');
}, false); // content  wrapper
box.addEventListener('click', function () {
    console.log('box');
}, false); // box  content  wrapper

• 代碼運行效果如下：
  
  

2.2 取消冒泡

• W3C標準 event.stopPropagation();（不支持IE9以下版本）
• IE獨有 event.cancelBubble = true;（谷歌其實也實作了）

div.onclick = function (e) {
    // e 事件物件
    e.stopPropagation(); //事件物件提供了一個可以取消冒泡的方法
    // e.cancelBubble = true; 這個也可
};

注：在每一個事件處理函式里面可以寫一個形參，如上面代碼中的形參e（一個就可以了，多了沒用），雖然我們不能傳遞資料，但是系統會自動幫我們傳一個事件物件，這個事件物件有很多屬性，每一個屬性記載了這個事件發生時的一些關鍵性資料和資訊，如事件型別，事件時刻，滑鼠的一些坐標點等等，系統會將其打包來供我們使用（注：IE里面會失效，但是IE里面有window.event來記錄）

• 封裝取消冒泡的函式stopBubble(event)

function stopBubble(event) {
    if (event.stopPropagation) {
        event.stopPropagation();
    } else {
        e.cancelBubble = true;
    }
}

03 事件捕獲

• 同一事件，自父元素捕獲至子元素，即 自頂向下 ，
• 標準的方法：元素.addEventListener(event-type,function,true)

3.1 實體

捕獲 （結構自頂向下）

• html代碼如下：

<div class="wrapper">
    <div class="content">
        <div class="box"></div>
    </div>
</div>

• css代碼如下：

.wrapper {
    width: 300px;
    height: 300px;
    background-color: red;
}

.content {
    width: 200px;
    height: 200px;
    background-color: green;
}

.box {
    width: 100px;
    height: 100px;
    background-color: yellow;
}

• JavaScript代碼如下：

wrapper.addEventListener('click', function () {
    console.log('wrapper');
}, true); // wrapper
content.addEventListener('click', function () {
    console.log('content');
}, true); // wrapper  content 
box.addEventListener('click', function () {
    console.log('box');
}, true); // wrapper  content  box

• 代碼運行效果如下：
  
  

04 阻止默認事件

• 默認事件：瀏覽器通過HTML標簽或DOM元素提供的一些功能性的默認行為，包括表單提交，a標簽跳轉，右鍵呼出選單(contextmenu是右鍵出選單事件)等，

• 所以我們可以通過js取消或更改這些默認事件：
  （1） return false; （以物件屬性的方式注冊的事件才生效，雖然兼容性非常好，但只有句柄方式(‘on’)系結的事件才能好用 ，）
  （2） event.preventDefault(); （W3C標準，IE9以下不兼容）
  （3） event.returnValue = false; （兼容IE）

• 封裝阻止默認事件的函式cancelHandler(event);

// 封裝函式cancelHandler
function cancelHandler(event) {
    if (event.preventDefault) {
        event.preventDefault();
    } else {
        event.returnValue = false;
    }
}

// 測驗實體如下：

// 方式一：呼叫函式---阻止右鍵呼出選單事件
document.oncontextmenu = function (e) {
    console.log('a');
    cancelHandler(e);
}

// 方式二：對句柄方式系結的事件采用return false;
var a = document.createElement('a');
a.innerHTML = 'www.baidu.com';
a.href = '#';
document.body.appendChild(a);
//阻止a標簽跳轉事件
a.onclick = function () { 
    return false;
}

個人筆記，歡迎大家交流探討！