JS添加事件公共类兼容Chrome，IE 等

最新推荐文章于 2020-08-05 16:20:10 发布

不务正业的菜鸟

最新推荐文章于 2020-08-05 16:20:10 发布

阅读量167

点赞数

分类专栏： JS公共方法文章标签： js

本文链接：https://blog.csdn.net/weixin_47553555/article/details/106325601

版权

JS公共方法专栏收录该内容

1 篇文章 0 订阅

订阅专栏

步骤1：新建eventTool.js 代码如下：

/**
 * 事件操作类，兼容各种主流浏览器
 * DingSH 
 * 2020-05-22
 */
var EventUtil={
/*添加事件 */
addHandler: function(element,type ,handler){
    if(element.addEventListener){
        element.addEventListener(type,handler);
    }else if (element.attachEvent){
        element.attachEvent("on"+type,handler);
    }else{
        element["on"+type]=handler;
    }
},
/*获取事件对象 */
getEvent: function(event){
    return event ? event : window.event;

},
/*获取事件对象的目标对象 */
getTarget: function(event){
    return event.target || event.srcElement;
},
/*阻止元素的默认事件行为 */
preventDefualt: function(event){
    if (event.preventDefualt){
        event.preventDefualt();
    }else{
        event.returnValue = false ;
    }

},
/*删除事件 */
removeHandler: function(element,type,handler){
 if(element.removeEventListener){
     element.removeEventListener(type,handler,false);
 }else if (element.detachEvent){
     element.detachEvent("on"+type,handler);
 }else{
     element["on"+type]=null;
 }
},
/**停止事件捕获行为 */
stopPropagation: function(event){
    if(event.stopPropagation){
        event.stopPropagation();
    }else{
        event.cancelBubble = true ;
    }
}

}

步骤2：新建test.html 代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>测试EventUtil类</title>
</head>
<body>
    <input type="button" value="点击试试" id="myBtn"/>
    <script src="eventTool.js"></script>
    <script src="test.js"></script>
</body>
</html>

步骤3: 新建test.js 代码如下

var handler= function(){
    alert("你好,JS");
}
var btn = document.getElementById("myBtn") ;
      if(btn){
        EventUtil.addHandler(btn,"click",handler);
      }

验证

在这里插入图片描述

不务正业的菜鸟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS添加事件公共类兼容Chrome，IE 等

步骤1：新建eventTool.js 代码如下：/** * 事件操作类，兼容各种主流浏览器 * DingSH * 2020-05-22 */var EventUtil={/*添加事件 */addHandler: function(element,type ,handler){ if(element.addEventListener){ element.addEventListener(type,handler); }else if (element.atta
复制链接

扫一扫