1.事件繫結分三種常用的方法:
(1)在DOM元素中直接繫結
(2)在js程式碼中繫結;
(3)繫結事件監聽函式

DOM元素中直接繫結:

<input type='button' onclick='fn()'>
    <script>
        function fn(){
            console.log('hello');
    }           
    </script>

在js程式碼中直接繫結:
看起來方便，不用再去看html了

    document.getElementById('btn'
 
).onclick = function(){
    console.log('hello');
}

繫結事件監聽函式addEventListener()或attachEvent()

事件監聽：分別定義了3個事件階段，依次是捕獲階段，目標階段，冒泡階段

事件監聽chrome瀏覽器下:
element.addEventListener(DOM事件名，事件觸發時執行函式，指定是否是冒泡執行,false是冒泡)

document.getElemengById('btn1').addEventListener('click',aaa);
function aaa(){
    console.
 
log('aaaa');
}

IE標準:
DOM事件名，必須加’on’

element.attachEvent('onclick',aaa);
function aaa(){
    console.log('aaaa');
}

事件監聽的優點:
1.可以繫結多個事件

普通事件繫結：

<script>
    var btn = document.getElementById('btn3');
    btn.onmouseover = function(){
        console.log('這個不會執行，被下面的覆蓋');
    }
    btn.onmouseover = function
 
(){
        console.log('這個會把上面的繫結事件覆蓋，只執行這個')
    } 
</script>

監聽事件繫結：addEventListener DOM事件名不加on
attachEvent DOM事件名加on

var btn = document.getElementById('#btn');
    btn.addEventListener('click',a1);
    btn.addEventListener('click',a2);
    function a1(){
        console.log('兩個事件都執行');
    }
    function a2(){
        console.log('兩個事件都執行');
    }

解除繫結：

這樣a2就不執行了
function a2(){
        console.log('不執行了');
    }
btn.removeEventListener('click',a2);

封裝完美監聽事件

function listen(ele,type,fn){
    if(ele.addEventListener){
        //chrome
        ele.addEventListener(type,fn);
    }else{
        //ie
        ele.attachEvent('on'+type,fn);
    }
}

事件委託:
把事件委託給父元素上，利用冒泡原理，簡化程式碼，提高執行效果,提高處理速度，減少記憶體佔用

var btn = document.getElementById('btn');
document.onclick = function(event){
    event = event || window.event;
    var target = event.target || event.srcElement;
    if(target == 3){
        alert(2);
        alert(1);
    }
}

委託:

var li1 = document.getElementById('li1');
var li2 = document.getElementById('li2');
document.addEventListener('click',function(event){
    var target = event.target;
    if(target == li2){
        alert('li2');
    }
})

可以對動態建立的DOM元素進行事件繫結:
正常遍歷繫結事件是無法對新建立的元素進行事件繫結的
而委託卻可以

    document.addEventListener('click',function(event){
        var target = event.target;
        if(target.nodeName == 'LI'){
            alert(target.innerHTML);
        }
    })
    //動態新增li
    var node=document.createElement("li");
    var textnode=document.createTextNode("item4");
    node.appendChild(textnode);
    list.appendChild(node);
    //點選item4是有反應的，所以對動態建立的元素有效