DOM事件详解及调用(跨浏览器事件处理程序，判断语句)

来源：互联网发布：怎样推广淘宝店铺编辑：程序博客网时间：2024/05/16 10:31

1.HTML

</pre><img src="" alt="" /><p></p><h2>1.html页面</h2><p></p><pre code_snippet_id="1724146" snippet_file_name="blog_20160622_2_8465552" name="code" class="html"><html> <head>   <title>事件流</title>   <meta charset="utf-8">   <script src="js/event.js"></script>   <script src="js/script.js"></script>   <body>      <div id="box">         <input type="button" value="按钮" id="btn" onclick="showMes()">         <input type="button" value="按钮2" id="btn2">         <input type="button" value="按钮3" id="btn3">         <a href="event.html" id="go">跳转</a>      </div>   </body> </head>

2.evet.js

<pre name="code" class="javascript">var eventUtil={         // 添加句柄         addHandler:function(element,type,handler){               if(element.addEventListener){                 element.addEventListener(type,handler,false);//DOM2级事件处理程序               }else if(element.attachEvent){                 element.attachEvent('on'+type,handler);//IE事件处理程序               }else{                 element['on'+type]=handler;//DOM0级事件处理程序               }         },         // 删除句柄         removeHandler:function(element,type,handler){               if(element.removeEventListener){                 element.removeEventListener(type,handler,false);               }else if(element.detachEvent){                 element.detachEvent('on'+type,handler);               }else{//<element.onclick=element["onclick"]完全等价                 element['on'+type]=null;               }         },          getEvent:function(event){            return event?event:window.event;          },          getType:function(event){            return event.type;          },          getElement:function(event){            return event.target || event.srcElement;          },          preventDefault:function(event){            if(event.preventDefault){              event.preventDefault();            }else{              event.returnValue=false;            }          },         stopPropagation:function(event){           if(event.stopPropagation){             event.stopPropagation();           }else{             event.cancelBubble=true;           }         }  }

3.script.js

window.onload=function(){  var go=document.getElementById('go'),      box=document.getElementById('box');  eventUtil.addHandler(box,'click',function(){  alert('我是整个父盒子');  });  eventUtil.addHandler(go,'click',function(e){  //e=eventUtil.getEvent(e);  e=e || window.event;  alert(eventUtil.getElement(e).nodeName);  eventUtil.preventDefault(e);  eventUtil.stopPropagation(e);  });}

0 0