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;
　　　}
}