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

  • 相关阅读:
    php redis 操作大全
    迟到的2017读书计划
    将博客搬至CSDN
    maven安装教程
    liunx centOS6.5安装jdk教程
    centOS6.0虚拟机ip配置
    html网页调用本地exe程序的实现方法:
    org.springframework.beans.factory.BeanCreationException 解决异常错误
    sqlserver查看锁表进程及对锁定的表进行解锁
    tomcat免安装版做成windows系统服务
  • 原文地址:https://www.cnblogs.com/autismtune/p/5216119.html
Copyright © 2011-2022 走看看