(007)dom_dom事件对象

什么是dom事件对象？

在触发dom上的事件时都会产生一个对象

 

dom中的事件对象

type属性：用于获取事件类型

target属性：用于获取事件目标 

stopPropagation:阻止事件冒泡

preventDefault:阻止默认行为

 

<html>
    <head>
    </head>
    <body>
        <div id="box">
            <input type="button" value="button" id="btn" onclick="showMsg()">
            <input type="button" value="dom0 button" id="btn2">
            <input type="button" value="dom2 button" id="btn3">
            <a href="http://www.baidu.com" id="gotoA">goto</a>
        </div>
        <script type="text/javascript">
            // function showMsg() {
            //     alert("hello");
            // }

            function showMsg(event) {
                //alert(event.type);
                alert(event.target.nodeName);
                event.stopPropagation();
            }

            function gotoBaidu() {
                event.stopPropagation();
                event.preventDefault();
            }

            function showBox() {
                alert("showBox");
            }

            function dom2Event() {
                alert("this is dom2 click event");
            }

            var btn2 = document.getElementById("btn2");
            btn2.onclick = function() {
                alert("this is dom0 click event");
            };

            var boxDiv = document.getElementById("box");

            var aNode = document.getElementById("gotoA");

            //btn2.onclick = null;

            //Chrome,Firefox下
            // var btn3 = document.getElementById("btn3");
            // btn3.addEventListener("click",dom2Event,false);
            //btn3.removeEventListener("click",dom2Event,false);

            //IE下
            // var btn3 = document.getElementById("btn3");
            // btn3.attachEvent("onclick",dom2Event);
            // btn3.detachEvent("onclick",dom2Event);

            var eventUtil = {
                addEventHandler: function(element,type,handler) {
                    if(element.addEventListener) {
                        element.addEventListener(type,handler,false);
                    }
                    else if(element.attachEvent) {
                        element.attachEvent("on" + type, handler);
                    }
                    else {
                        element["on" + type] = handler;
                    }
                },

                removeEventHandler: function(element,type,handler) {
                    if(element.removeEventListener) {
                        element.removeEventListener(type,handler,false);
                    }
                    else if(element.detachEvent) {
                        element.detachEvent("on" + type, handler);
                    }
                    else {
                        element["on" + type] = null;
                    }
                }

                
            };

            eventUtil.addEventHandler(btn3,"click",showMsg);
            //eventUtil.removeEventHandler(btn3,"click",showMsg);
            eventUtil.addEventHandler(boxDiv,"click",showBox);
            eventUtil.addEventHandler(aNode,"click",gotoBaidu);

        </script>
    </body>
</html>

 

ie中的事件对象

type属性：用于获取事件类型

srcElement属性：用于获取事件目标

cancelBubble属性:用于阻止时间冒泡，设置为true表示阻止冒泡，设置未false表示不阻止冒泡

returnValue属性：设置未为false用于阻止事件的默认行为

 

posted @ 2015-02-08 21:56  雪中飞雁  阅读(185)  评论(0)    收藏  举报