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的话则既阻止默认行为又防止对象冒泡。