事件绑定的几种方式及区别

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是有反应的，所以对动态创建的元素有效