跨浏览器事件处理程序

玛丽大

于 2019-10-13 10:15:15 发布

阅读量131

点赞数

文章标签： JavaScript HTML JS事件浏览器兼容 Event

本文链接：https://blog.csdn.net/qq_36937220/article/details/102530051

版权


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>跨浏览器事件处理程序</title>
</head>
<body>
  <button id="btn">点击我</button>
  <div id="parent">
    <div id="child">父亲儿子</div>
  </div>
  <a href="www.baidu.com">跳转链接</a>
  <input type="text" id="input">
  <script type="text/javascript">
    //兼容所有浏览器事件
    var EventUtil = {
      //绑定事件
      addHandler:function(element,type,handler){
        if(element.addEventListener){   
          //DOM2级事件，主流浏览器下添加事件，如chrome,firfox
          element.addEventListener(type, handler,false);
        }else if(element.attachEvent){  
          //IE8以下浏览器添加事件
          element.attachEvent("on"+type,handler);
        }else{
          //DOM0级事件
          element["on"+type] = handler;
        }
      },     //注意方法之间用逗号隔开
      //解除绑定事件
      removeHandler:function(element,type,handler){
        if(element.removeEventListener){ 
          //主流浏览器下解除绑定事件，如chrome  
          element.removeEventListener(type, handler,false);
        }else if(element.detachEvent){ 
          //IE8以下浏览器解除绑定事件 
          element.detachEvent("on"+type,handler);
        }else{
          element["on"+type] = handler;
        }
      },
      //event事件源
      getTarget:function(event){
        //target为主流浏览器，srcElement为IE8以下浏览器
        return event.target || event.srcElement; 
      },
      //阻止默认行为
      preventDefault:function(event){
        if(event.preventDefault){
          //主流浏览器下阻止默认行为
          event.preventDefault();   
        }else{
          //IE8以下浏览器阻止默认行为,false为阻止
          event.returnValue = false; 
        }
      },
      //阻止事件冒泡
      stopPropagation:function(event){
        if(event.stopPropagation){
          //主流浏览器下阻止事件冒泡
          event.stopPropagation();   
        }else{
          //IE8以下浏览器阻止事件冒泡
          event.cancelBubble = true; 
        }
      },
      //获得键盘按下的键值
      getCharCode:function(event){
        if(event.charCode == "number"){
          return event.charCode;
        }else{
          return event.keyCode;
        }
      }

    }
    var btn = document.getElementById("btn");
    var child = document.getElementById("child");
    var parent = document.getElementById("parent");
    var a = document.getElementsByTagName("a")[0];
    var input = document.getElementById("input");
    //事件元素element，事件处理类型type，handler事件句柄（事件处理函数）
    var handler = function(){
      alert(1);
    }
    //为按钮添加事件
    EventUtil.addHandler(btn,"click",handler);
    //为按钮移除事件
    EventUtil.removeHandler(btn,"click",handler);
    //点击父亲儿子获取事件源
    EventUtil.addHandler(child,"click",function(event){
      var target = EventUtil.getTarget(event);
      console.log(target);
    })
    //阻止a跳转
    EventUtil.addHandler(a,"click",function(event){
      EventUtil.preventDefault(event);
    })
    //阻止冒泡
    EventUtil.addHandler(child,"click",function(event){
      alert("儿子被触发了");
      EventUtil.stopPropagation(event);
    })
    EventUtil.addHandler(parent,"click",function(event){
      alert("父亲被触发了");
    })
    //获得键盘按下的键值
    EventUtil.addHandler(input,"keypress",function(event){
      console.log(EventUtil.getCharCode(event));
    })
  </script>
</body>
</html>

玛丽大

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
跨浏览器事件处理程序

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>跨浏览器事件处理程序</title></head><body> <button id="btn">点击我</button&gt...
复制链接

扫一扫