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;

function stopBubble(e) { 
//如果提供了事件對象，則這是一個非IE瀏覽器 
if ( e && e.stopPropagation ) 
    //因此它支持W3C的stopPropagation()方法 
    e.stopPropagation(); 
else 
    //否則，我們需要使用IE的方式來取消事件冒泡 
    window.event.cancelBubble = true; 
}

 

 阻止默認事件：

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

//阻止瀏覽器的默認行為 
function stopDefault( e ) { 
    //阻止默認瀏覽器動作(W3C) 
    if ( e && e.preventDefault ) 
        e.preventDefault(); 
    //IE中阻止函數器默認動作的方式 
    else 
        window.event.returnValue = false; 
    return false; 
}

return false:

javascript的return false只會阻止默認行為，而是用jQuery的話則既阻止默認行為又防止對象冒泡。