先来复习一下DOM知识:
事件冒泡:即事件最开始由最具体的元素接收,然后逐级向上传播,至最不具体的那个节点(文档)
事件捕获:不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件。
事件处理程序:
HTML事件处理程序(缺点JS和HTML紧耦合,不易于维护,降低性能)
DOM0级别事件处理程序(对这个我比较疑惑,有些资料有这个概念,有写资料没有这个概念,根据JS高级程序设计给出的它只能作为一个历史参考点)
DOM1级事件处理程序
DOM2级事件处理程序(能给一个元素重复定义多个相同事件的不同处理方法)[DOM2之前要自行添加代码实现]
DOM3级事件处理程序
还有IE事件处理程序(要对IE存在正确的仇视心理~)
贴上一个跨浏览器的事件处理代码
1 var eventUtils = { 2 3 getEvent:function(event){ 4 return event?event:window.event; 5 }, 6 7 getType:function(event){ 8 return event.type; 9 }, 10 11 getTarget:function(event){ 12 return event.target || event.srcElement; 13 }, 14 15 stopPropagation:function(event){ 16 if(event.stopPropagation){ 17 event.stopPropagation(); 18 } 19 else{ 20 event.cancelBubble = true; 21 } 22 }, 23 24 preventDefault:function(event){ 25 if(event.preventDefault){ 26 event.preventDefault(); 27 } 28 else{ 29 event.returnValue = false; 30 } 31 }, 32 33 addHandler:function(obj,method,fn){ 34 if(obj.addEventListener){ 35 obj.addEventListener(method,fn); 36 } 37 else if(obj.attachEvent){ 38 obj.attachEvent("on"+method,fn); 39 } 40 else{ 41 obj["on"+method] = fn; 42 } 43 }, 44 45 removeHandler:function(obj,method,fn){ 46 if(obj.removeEventListener){ 47 obj.removeEventListener(method,fn); 48 } 49 else if(obj.detachEvent){ 50 obj.detachEvent("on"+method,fn); 51 } 52 else{ 53 obj["on"+method] = null; 54 } 55 } 56 }
以上内容,如有错误请指出,不甚感激。