浏览器兼容笔记（2）

最新推荐文章于 2024-05-02 13:59:17 发布

原创最新推荐文章于 2024-05-02 13:59:17 发布 · 539 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#浏览器 #dom

javascript笔记专栏收录该内容

14 篇文章

订阅专栏

内容参考自慕课网
dom中的事件对象event

type表示事件的类型。
target表示来自哪一个元素的
stopPropagation()阻止事件的冒泡行为
preventDefault()阻止事件的默认行为

IE里面的事件对象

type属性，用于获得事件的类型
srcElement属性，用于获得事件的对象，和dom不一样，可以在声明时定义event = event||window.event和object = element.target||element.srcElement
cancelBubble属性，true阻止冒泡
returnValue属性，阻止事件的默认行为

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浏览器兼容-事件处理程序2</title>
</head>
<body>
    <div id="box">
        <input id="btn1" type="button" value="这是按钮一" />
        <a href="浏览器兼容-事件处理程序.html" id="link1">gotobaidu</a>
    </div>

    <script type="text/javascript">
        var btn1 = document.getElementById("btn1");
        var link1 = document.getElementById("link1");       
        var box = document.getElementById("box");       
        function showMessage(e){
            alert("button被点击");
        }
        function showBoxMessage(e){
            alert("BOX盒子冒泡");
        }
        //封装函数
        var eventUtil={
            //添加句柄
            addHandler: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;
                }
            },
            //移除句柄
            removeHandler: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;
                }
            },
            //获得事件
            getEvent:function(event){
                return event?event:window.event;
            },
            //获得事件的类型
            getType:function(event){
                return event.type;
            },
            //获得事件来自哪个元素
            getElement:function(){
                return event.target||event.srcElement;
            },
            //阻止默认的行为
            preventDefault:function(event){
                if(event.preventDefault){
                    event.preventDefault();
                }else{
                    event.returnValue=false;
                }
            },
            //阻止事件的冒泡行为
            stopPropagation:function(){
                if(event.stopPropagation){
                    event.stopPropagation();
                }else{
                    event.cancelBubble();
                }
            }
        }
        eventUtil.addHandler(box,'click',showBoxMessage);
        eventUtil.addHandler(btn1,'click',showMessage);
        eventUtil.addHandler(link1,'click',function(e){
            e = eventUtil.getEvent(e);
            //上面的也可以写 e= e||window.event;
            alert(eventUtil.getElement(e));
            eventUtil.preventDefault(e);
            eventUtil.stopPropagation(e);
        });
    </script>
</body>
</html>