JavaScript中原生事件

DOM0事件模型：

所有浏览器都支持,只能注册一种事件

1.绑定：

document.getElementById("id").onclick = function(e){};

 解除绑定：

document.getElementById("id").onclick=null;

 2.绑定：

<div id="test" class="test" onclick="func();" ></div>

 DOM2事件模型：

支持同一个dom注册多种事件，增加了捕获和冒泡的概念

捕获：某个元素触发了某个事件，最先得到通知的是window，然后是document，依次而入，直到真正触发事件的那个元素(目标元素)为止

冒泡：事件会从目标元素开始起泡，再依次而出，直到window对象为止

绑定:

addEventListener(事件名称，事件回调，捕获/冒泡)；false为冒泡，true为捕获

var x=document.getElementById("id");
if(x.addEventListener){
 addEventListener("click",function(e){},false);//IE8及IE8以下版本不支持
}else if(x.attachEvent){
  x.attachEvent("onclick",function(e){});   //IE8及IE8以下版本支持
}

 取消绑定：

e.removeEventListener(event_type,event_name,捕获/冒泡);
e.detachEvent(event_type,event_name);

 阻止事件冒泡：

    假如外层div和内层div都是注册的冒泡事件，点击内层div时，一定是内层div事件先执行，原理相同。

     细心的读者会发现，对于div嵌套的情况，如果点击内层的div，外层的div也会触发事件，这貌似会有问题！

     点击的明明是内层div，但是外层div的事件也触发了，这的确是个问题。

其他主浏览器：e.stopPropagation();
IE浏览器： e.calcelBubble=true;

 阻止默认事件：

其他主浏览器：e.preventDefault();
IE浏览器:e.returnValue=false;

return false做了三件事情:

1）阻止冒泡：e.stopPropagation();
2）阻止默认事件：e.preventDefault();
3）停止回调函数执行并立即返回。