一。捕获、添加事件
由于有着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;
- }
- }