• 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;
    }
    }
    };

  • 相关阅读:
    (二分)进击的奶牛
    (二分)木材加工
    (简单并查集)The Suspects
    (递归)集合划分
    (简单并查集)How many tables?
    Wireless Network(并查集)
    (并查集)连通块中点的数量
    2019.04.08 电商17 购物车模型
    2019.04.08 电商 16 地址管理2
    2019.04.07 电商15 地址管理
  • 原文地址:https://www.cnblogs.com/autismtune/p/5216119.html
Copyright © 2020-2023  润新知