IE中的事件对象

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)