原生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";    };})