DOM 2级事件模型跨浏览器处理

一。捕获、添加事件

由于有着W3C和微软两种捕获、添加事件的方法，所以在涉及较多事件且要实现跨浏览器兼容的情况下，会重复的输入if。。。else。。。语句。一个好的方法就是创建一个可复用的事件处理函数，例如：

function catchEvent(eventObj, event, eventHandler){if(eventObj.addEventListener){//W3C模型eventObj.addEventListener(event,eventHandler,false);}else if(eventObj.attachEvent){//微软模型event = "on" + event;eventObj.attachEvent(event,eventHandler);}}

 

二。取消一个事件

取消一个事件的处理过程也可以写成一个可复用的函数：

function cancelEvent(event){if(event.preventDefault){//W3C模型event.preventDefault();event.stopPropagation();}else{//IE模型event.returnValue = false;event.cancelBubble = true;}}

 

以典型的例子表单验证来说明，在submit事件句柄函数中，可以通过如下的方法停止表单提交

function formFunction(evnt){        var event = evnt ? evnt : window.event;                . . .//一些操作if(event.preventDefault){event.preventDefault();event.stopPropagation();}else{event.returnValue = false;event.cancelBubble = true;}}

 

stopPropagation（）方法遵循DOM LEVEL 2事件处理机制的浏览器上阻止事件冒泡；

cancelBubble = true; 阻止事件冒泡到IE浏览器。

preventDefault（）函数则用来阻止基于该元素和事件的默认行为；

returnValue=false；returnValue属性相当于在函数中显示地返回false值。

W3C模型是两个方法，微软模型是两个属性。

例：阅读以下表单

表单提交前需要检测关键字(input#keywords)是否为空，如为空则不予提交。
请分别用"传统事件绑定"方式及"W3C事件绑定"方式给予事件绑定。

<form method="get" action="index.php" id="search-tuan"> 
关键字：<input type="text" value="xx" id="keywords" name="kw" class="keywords"/> 
<input type="submit" class="button" value="提交"/> 
<input type="hidden" value="search" name="do" id="action"/> 
<input type="hidden" value="beijing" name="city" id="city"/> 
</form> 

 

window.onload = init;  //传统 
function init(){ 
document.getElementById("search-tuan").onsubmit = check; 
} 
function check(){ 
    var keyValue = document.getElementById("keywords").value; 
    if(!keyValue){ 
        alert("值为空"); 
        return false; 
    } 
} 
 
function catchEvent(eventObj,event,eventHandler){//W3C 
    if(eventObj.addEventListener){ 
        eventObj.addEventListener(event,eventHandler,false); 
    }else if(eventObj.attachEvent){ 
        event = "on" + event; 
        eventObj.attachEvent(event,eventHandler); 
    } 
} 
catchEvent(window,"load",setupEvents); 
function setupEvents(evnt){ 
catchEvent(document.getElementById("search-tuan"),"submit",check); 
} 
function check(evnt){ 
    var event = evnt ? evnt : window.event; 
    var keyValue = document.getElementById("keywords").value; 
    if(!keyValue){ 
        cancelEvent(event); 
    } 
} 
function cancelEvent(event){ 
　　　if(event.preventDefault){ 
　　　event.preventDefault(); 
　　　event.stopPropagation(); 
　　　}else{ 
　　　event.returnValue = false; 
　　　event.cancelBubble = true; 
　　　} 
} 
原文链接http://kaixinbocai.blog.51cto.com/3913323/1182036（开心菠菜）