zoukankan      html  css  js  c++  java
  • 事件对象兼容

    <body>
    <a href="#">链接</a>
    <script type="text/javascript">
        // event.preventDefault() 阻止事件的默认行为
        var oA=document.querySelector('a');
        var EventUtil={
            //添加事件
            addEvent:function (ele,type,handler) {
                if(ele.addEventListener){
                    ele.addEventListener(type,handler,false);
                }else if(ele.attachEvent){
                    ele.attachEvent(type,handler);
                }else {
                    ele['on'+type]=handler;
                }
            },
            //获取事件对象event
            getEvent:function (event) {
                return event?event:window.event;
            },
            //获取触发事件的目标
            getTarget:function (event) {
                return event.target||event.srcElement;
            },
            //阻止默认事件
            preventDefault:function (event) {
                if(event.preventDefault){
                    event.preventDefault();
                }else {
                    event.returnValue=false;
                }
            },
            //删除事件
            deleteEvent:function (ele,type,handler) {
                if(ele.removeEventListener){
                    ele.removeEventListener(type,handler,false);
                }else if(ele.detachEvent){
                    ele.detachEvent(type,handler);
                }else{
                    ele['on'+type]=null;
                }
            },
            //取消事件冒泡
            stopPropagation:function (event) {
                if(event.stopPropagation){
                    event.stopPropagation();
                }else{
                    event.cancelable=true;
                }
            }
        };
        function aa(event) {
            event= EventUtil.getEvent(event);       //获取事件对象
            var target=EventUtil.getTarget(event);  //获取触发事件的目标
            target.style.color='red';
            EventUtil.preventDefault(event);        //阻止默认事件(a链接跳转)
    
        }
        EventUtil.addEvent(oA,'click',aa);
    
    </script>
    
    </body>
    
  • 相关阅读:
    Redis面试题
    redis基本操作
    pwd命令和cd命令
    ls命令详解
    Python时间操作所相关
    Nginx
    网络相关知识
    LeetCode 刷题记录(6-10题)
    绕过校园网Web认证
    Java相关知识
  • 原文地址:https://www.cnblogs.com/sakura-sakura/p/6791607.html
Copyright © 2011-2022 走看看