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

最新推荐文章于 2021-07-05 23:19:25 发布

qq_26676207

最新推荐文章于 2021-07-05 23:19:25 发布

阅读量302

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qq_26676207/article/details/51731988

版权

js 专栏收录该内容

53 篇文章 2 订阅

订阅专栏

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" οnclick="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.οnclick=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.οnlοad=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);
  });

}