您的位置：首页 > 其它

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

2016-06-22 09:56 771 查看

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);
});

}



                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航