当前位置: 首页 > 面试题库 >

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

卫嘉谊
2023-03-14
本文向大家介绍用js写一个事件侦听器的方法相关面试题,主要包含被问及用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
          //dom2 
          e.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>
 类似资料:
  • 本文向大家介绍js跨浏览器的事件侦听器和事件对象的使用方法,包括了js跨浏览器的事件侦听器和事件对象的使用方法的使用技巧和注意事项,需要的朋友参考一下 本文特意为跨浏览器实现添加事件侦听器和跨浏览器事件对象的使用方法做了下总结,并把这些方法打包,欢迎大家学习。 打包的一个EventUtil对象 测试代码 以上就是跨浏览器实现添加事件侦听器和跨浏览器事件对象的使用方法,希望对大家的学习有所帮助。

  • 我的代码使用jQuery。我有一个密码输入框,我想要得到输入的密码任何时候。 下面是我的代码: 我确信这是一个正确的代码,因为当我在浏览器的控制台中输入它时,它可以工作,但当我重新加载页面时,它就不工作了 我能做什么?

  • 从元素中移除事件侦听器。 使用 EventTarget.removeEventListener() 从元素中删除一个事件监听器。 省略第四个参数 opts ,则默认使用 false 或者根据添加事件监听器时使用的选项来指定它。 const off = (el, evt, fn, opts = false) => el.removeEventListener(evt, fn, opts); con

  • 我可以在下面的代码中为添加事件侦听器,但不能添加到。 是不是因为twitter做了一些事情不让我这么做?有办法绕过它吗?

  • 有没有办法防止事件链中的一些听众为事件开火,但允许链上的其他人开火? 比如我有这个结构 假设我已经将单击事件监听器连接到body、div#1和div#2。是否有可能在div#2事件监听器上阻止事件进入div#1或介于两者之间的任何其他监听器,并允许事件在body元素上触发? 我这样说是因为我使用谷歌地图和emberjs构建了一系列可以在地图上显示的交互式信息框。问题是ember将事件侦听器附加到b

  • 在用java编写Minecraft插件时,您可以创建一个事件监听器方法,并将其命名为任意名称,但您必须传入事件监听者的类,例如: 我只是想知道,如果Bukkit API中的任何类都不知道该方法的名称,那么该方法是如何在“幕后”执行的?我希望我能很好地解释自己。谢谢