一。捕获、添加事件
由于有着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){
- 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(开心菠菜)