码迷,mamicode.com
首页 > 其他好文 > 详细

IE中的事件对象

时间:2015-01-13 14:11:33      阅读:119      评论:0      收藏:0      [点我收藏+]

标签:

IE中的事件对象

1)type属性 用于获取事件类型

2)srcElement属性 用于获取事件的目标

3)cancelBubble属性 用于阻止事件冒泡

  设置为true表示阻止事件冒泡  设置为false表示不阻止冒泡

4)returnValue属性 用于阻止事件的默认行为

    设置为false表示阻止事件的默认行为

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <script src="script.js"></script>
    <script src="event.js"></script>
    

<script type="text/javascript">
//dom中的事件对象:
    //type属性获取事件类型
    //target获取事件目标
    //stopPropagation阻止事件冒泡(最具体的元素接收)
    //preventDefault()阻止事件的默认行为

// window.onload=function(){
//     var btn2=document.getElementById(‘btn2‘);
//     btn2.onclick=function(){
//         alert(‘这个是dom0级添加的事件‘)
//     }
// btn2.onclick=null;
   // var btn3=document.getElementById(‘btn3‘);
   /*  btn3.addEventListener(‘click‘,showMessage,false);
    btn3.addEventListener(‘click‘,function(){
        alert(this.value)
    },false);*/
    // btn3.removeEventListener(‘click‘,showMessage,false);
    // btn3.attachEvent(‘onclick‘,showMessage)
    
// }
// function showMessage(event){
//     event=event || window.event;
//     var ele=event.target||event.srcElement;
//     alert(ele);
//     //alert(ev.target.nodeName);//目标节点名称//target获取事件目标//type获取事件类型
//     ev.stopPropagation();//阻止事件冒泡(最具体的元素接收)
// } 
// function showBox(){
//     alert("这是一个box")
// }  
// function stopGoto(event){
//     event.stopPropagation();
//     event.preventDefault();
// }


</script>
</head>
<body>
<div id="box">
    <input type="button"  value="按钮" id="btn" onclick="showMessage()"/>
    <input type="button" value="按钮2" id="btn2"/>
    <input type="button" value="按钮3" id="btn3"/>
    <a href="evnt.html" id="go">跳转</a>
</div>
<script>
// var btn3=document.getElementById(‘btn3‘);
// var box=document.getElementById(‘box‘);
// eventUtil.addHandler(btn3,‘click‘,showMessage);
// eventUtil.addHandler(box,‘click‘,showBox);
// eventUtil.addHandler(go,‘click‘,stopGoto);
// eventUtil.removeHandler(btn3,‘click‘,showMessage);
</script>
</body>

</html>
window.onload=function(){
    var go=document.getElementById(‘go‘),
        box=document.getElementById(‘box‘);
    eventUtil.addHandler(box,‘click‘,function(){
        alert(‘我是整个父盒子‘);
    });
    eventUtil.addHandler(go,‘click‘,function(e){//接收事件event
        //e=e||window.event;
        e=eventUtil.getEvent(e);//返回event
        alert(eventUtil.getElement(e).nodeName);
        eventUtil.preventDefault(e);
        eventUtil.stopPropagation(e);
    });
}
var eventUtil={
        //添加句柄
        // var element,type,handler;
        addHandler:function(element,type,handler){
            if(element.addEventListener){//dom二级
                element.addEventListener(type,handler,false)
            }else if(element.attachEvent){//IE
                element.attachEvent(‘on‘+type,handler);
            }else{//dom0级
                element[‘on‘+type]=handler;//element.onclick===element[‘onclick‘]
            }
        },//对象的属性用“,”分隔
    
    //删除句柄
        removeHandler:function(element,type,handler){
            if(element.removeEventListener){//dom二级
                element.removeEventListener(type,handler,false)
            }else if(element.detachEvent){//IE
                element.detachEvent(‘on‘+type,handler);
            }else{//dom0级
                element[‘on‘+type]=null;//element.onclick===element[‘onclick‘]
            }
        },
        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;
            }
        }
    }
    

 

IE中的事件对象

标签:

原文地址:http://www.cnblogs.com/xl900912/p/4221068.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!