zoukankan      html  css  js  c++  java
  • JS事件

    // 封装添加事件监听程序
    function addEvent(ele,type,hander){
    if(ele.addEvenetListener){
    ele.addEventListener(type,hander,false);
    } else if(ele.attachEvent){
    ele.attachEvent('on'+type,hander)
    }else{
    ele['on'+type]=hander;
    }
    }

    //封装删除事件监听程序
    function removeEvent(ele,type,hander){
    if(ele.removeEventListener){
    ele.removeEventListener(type,hander,false);
    }else if(ele.detachEvent){
    ele.detachEvent('on'+type,hander);
    }else{
    ele.['on'+type]=null;
    }
    }

    阻止特定事件的默认行为:点击链接不跳转

    <body>

    <a href="001.html" id="mylink">点击</a>
    <script type="text/javascript">
    var link=document.getElementById("mylink");
    link.onclick=function(e){
    if(e.preventDefault){
    e.preventDefault();
    }else{
    e.returnValue=false;
    }
    }
    </script>
    </body>

    阻止事件冒泡

    <body>
    <input type="button" id="btn" value="denglu">
    <script>
    var btn=document.getElementById("btn");
    btn.onclick=function(e){
    alert("hello");

    if(e.stopPropagation){
    e.stopPropagation();
    }

    else{
    e.cancelBubble=true;
    }

    }
    document.body.onclick=function(e){
    alert("body is clicked");
    }
    </script>
    </body>

    如果不添加e.stopPropagation();就会在单击时弹出两个警告框。添加之后,由于阻止冒泡行为,click事件根本不会传播到document.body,因此就不会触发注册在这个元素上的 onclick事件处理程序。

    跨浏览器程序

    var EventUtil = {
    addHandler: function(element, type, handler){
    //省略的代码
    },
    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;
    }
    },
    removeHandler: function(element, type, handler){
    //省略的代码
    },
    stopPropagation: function(event){

    if (event.stopPropagation){
    event.stopPropagation();
    } else {
    event.cancelBubble = true;
    }
    }
    };

  • 相关阅读:
    Native Boot 从一个 VHD 引导系统的相关说明
    bind()函数的深入理解及两种兼容方法分析
    四、CentOS 6.5 上传和安装Nginx
    jQuery 常见操作实现方式
    “贷券” 信贷系统
    注册 Ironic 裸金属节点并部署裸金属实例
    hover()方法
    Uncaught SyntaxError: Inline Babel script: Unexpected token
    Uncaught Error: The `style` prop expects a mapping from style properties to values, not a string
    jquery bind事件
  • 原文地址:https://www.cnblogs.com/autismtune/p/5216119.html
Copyright © 2011-2022 走看看