用js写一个事件侦听器的方法

用js写一个事件侦听器的方法,第1张

用js写一个事件侦听器的方法
<body>  <div>    <span id="a">点击</span>    <a href="#" id="b">超链接</a>    <button id="d" onclick="remove()">点击移除事件绑定</button>    <button onclick="add()">点击添加事件绑定</button>  </div>  <script>    var eventTool = {      //获取事件 window.event兼容ie      getEvent: function (e) {        return e || window.event      },      //获取事件触发元素 srcElement ie独有      getTarget: function (e) {        return e.target || e.srcElement      },      addListener: function (e, type, hander) {        if (e.addEventListener) {          //兼容ie ie没有事件捕获的说法 因此设为false          //dom2e.addEventListener(type, hander, false);        } else if (e.attachEvent) {          //IE          e.attachEvent('on' + type, hander)        } else {          //dom0          e['on' + type] = hander        }      },      removeListener: function (e, type, hander) {        if (e.removeEventListener) {          e.removeEventListener(type, hander, false)        } else if (e.detachEvent) {          e.detachEvent('on' + type, hander)        }        else { e['on' + type] = null }      },      //阻止事件冒泡      stopPropagation: function (e) {        if (e.stopPropagation) {          // ie以外阻止冒泡          e.stopPropagation()        }        else {          //ie独有阻止冒泡 新版本的chrome等浏览器也支持          e.cancelBubble = true        }      },      // 阻止事件相关元素的默认事件      preventDefault: function (e) {        if (e.preventDefault) {          e.preventDefault()        }        else {          //ie的阻止默认事件方式          e.returnValue = false;        }      }    }    var btn = document.getElementById('a');    var link = document.getElementById('b');    var fun = function (e) {      var e = eventTool.getEvent(e);      var t = eventTool.getTarget(e);      console.log(e)      console.log(t)      eventTool.stopPropagation(e)    }    var add = function () {      eventTool.addListener(btn, 'click', fun)      eventTool.addListener(link, 'click', fun)    }    var remove = function () {      console.log(btn)      eventTool.removeListener(btn, 'click', fun)    }  </script></body>

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zaji/4931916.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-11-12
下一篇 2022-11-12

发表评论

登录后才能评论

评论列表(0条)

保存