JS 對於使用者的操作做出響應,就必須對DOM元素繫結事件處理函式

事件繫結

　1、在DMO中直接繫結事件

<input type="button" value="click me" onclick="hello()"/>
<script>
    function hello(){alert("Hello world!");}
</script>

　2、在js程式碼中繫結事件

<input type="button" value="click me" id="btn" />
<script>
    document.querySelector("#btn"
 
).onclick = function(){
        alert("Hello world!");
    }
</script>

備註：
　１、只會在事件冒泡中執行；一個元素一次只能繫結一個事件處理函式，新繫結的事件處理函式會覆蓋舊的事件處理函式；實際程式碼中很少使用；
　２、處理事件時，this關鍵字引用的是當前元素

事件監聽

語法：
　element.addEventListener(event, function, useCapture)
　event : （必需）事件名，支援所有 DOM事件 。
　function：（必需）指定要事件觸發時執行的函式。
　useCapture：（可選）指定事件是否在捕獲或冒泡階段執行。true，捕獲。false，冒泡。預設false。
　
備註：
　1、同一個事件處理函式可以繫結2次，一次冒泡,一次捕獲；相同的事件處理函式可以繫結多次，並且順序執行

<input type="button" value="click me" id="btn" />
<script>
    document.querySelector("#btn").addEventListener("click",function(){
        alert("Hello world!");
    },false);
    document.querySelector("#btn").addEventListener("click",function(){
        alert("Hello world!");
    },true
 
);
</script>

2、在事件處理函式內部，this關鍵字引用當前元素
３、IE不支援，你必須使用IE的attachEvent函式替代： element.attachEvent(‘onclick’, function(){});

事件委託

　事件委託：利用冒泡原理，將事件加到父元素或者祖先元素上

<div id="parent">
    <span id="item_1">呵呵噠</span>
    <span id="item_2">呵呵噠</span>
    <div id="item_3">呵呵噠</div>
    <p id="item_4">呵呵噠</p>
</div>
<script>
    //等價於 $('#parent').on('click',function(e).......
    document.querySelector('#parent').addEventListener('click',function(e){
        //e.target 真正發生事件的DOM元素 e.currentTarget 當前事件發生的DOM元素
        if(e.target && e.target.nodeName == 'SPAN'){
            var idName = e.target.id;
            console.log(idName + "was clicked!");
        }
    });
</script>

備註：
動態為新新增的DOM元素新增事件

事件執行順序

DOM事件流
　將事件分為三個階段：捕獲階段–>目標階段–>冒泡階段
　
　事件函式執行順序結論：捕獲階段的處理函式最先執行，其次是目標階段的處理函式，最後是冒泡階段的處理函式。目標階段的處理函式，先註冊的先執行，後註冊的後執行。
阻止事件冒泡和捕獲
　e.stopPropagation()
阻止預設行為
　e.preventDefault()
onclick,click,on()事件觸發順序
　onclick>click>on()
　.click() 、on(‘click’) 區別
　　.click(): 只支援繫結靜態元素
　　on(‘click’): 支援動態繫結元素(selector必須是目標繫結元素的父元素)
　　 $(selector).on(‘click’,function(){});