原生JS的事件绑定

事件添加的三种方式

1. 通过HTML的属性添加事件
2. DOM0级的事件绑定
3. DOM2级的事件绑定

一、通过HTML的属性添加事件

<div onclick="something()">div>

缺点：耦合性大，不易于维护，仅可添加一个事件

二、DOM0级的事件绑定

var target=document.getElementById("target");
target.onclick=function(){
    alert("Hello!");
}

缺点：仅能为当前页面已加载的DOM节点进行事件绑定，若添加多个同类型事件，则后来的事件会覆盖原有的事件

三、DOM2级的事件绑定

var target=document.getElementById("target");
if(target.addEventListener){
    //调用addEventListener方法，获取触发事件的目标节点通过e.target
    target.addEventListener("click",clickFunction,false);
}else{
    //兼容IE,调用attachEvent方法，获取触发事件的目标节点通过e.srcElement
    target.attachEvent("onclick",clickFunction);
}

优点：可为页面后续添加的DOM节点一并绑定事件
应用场景：事件代理，即在需要为拥有共同直接父节点的一类DOM节点绑定相似的事件时，只需给这类DOM节点的父节点绑定事件，利用事件冒泡原理，子节点触发的事件，让它的父元素代替执行。

addEventListener语法

element.addEventListener(event, function, useCapture)

• event 必须。字符串，指定事件名。注意: 不要使用 “on” 前缀。 例如，使用 “click” ,而不是使用 “onclick”。
• function 必须。指定要事件触发时执行的函数。
• useCapture 可选。布尔值，默认为false（事件句柄在冒泡阶段执行），指定事件是否在捕获或冒泡阶段执行。

attachEvent语法

element。attachEvent(event, function)

• event 必须。字符串，指定事件名。注意: 使用 “on” 前缀。 例如，使用 “onclick” ,而不是使用 “click”。
• function 必须。指定要事件触发时执行的函数。

事件代理（事件委托）Demo

<ul id="list">
    <li><a href="#">a>li>
    <li><a href="#">a>li>
    <li><a href="#">a>li>
ul>

//点击表单里的任意一个a标签，将该标签所在的li标签背景色变为红色
var list=document.getElementById("list");
list.addEventListener('click',function(e){
    if (e.target && e.target.nodeName.toUpperCase() == 'A') {
        e.target.parentNode.style.backgroundColor="red";
    };
})