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

  • 相关阅读:
    基于Metaweblog API 接口一键发布到国内外主流博客平台
    uva144 Student Grants
    Uva 10452
    Uva 439 Knight Moves
    Uva 352 The Seasonal War
    switch语句
    java——基础知识
    我的lua学习2
    codeforces 431 D. Random Task 组合数学
    codeforces 285 D. Permutation Sum 状压 dfs打表
  • 原文地址:https://www.cnblogs.com/autismtune/p/5216119.html
Copyright © 2011-2022 走看看