可以使用 Javascript 将多个事件侦听器/处理程序添加到同一个元素吗？

IT技术 javascript dom-events
2021-03-03 07:19:07

我有：

if (window.addEventListener) {
  window.addEventListener('load',videoPlayer,false);
}
else if (window.attachEvent) { 
  window.attachEvent('onload',videoPlayer);
}

然后我有：

if (window.addEventListener) {
  window.addEventListener('load',somethingelse,false);
} else if (window.attachEvent) { 
  window.attachEvent('onload',somethingelse);
}

将它们放在一起是首选/功能吗？喜欢

if (window.addEventListener) {
  window.addEventListener('load',videoPlayer,false);
  window.addEventListener('load',somethingelse,false);
} else if (window.attachEvent) { 
  window.attachEvent('onload',videoPlayer,false);
  window.attachEvent('onload',somethingelse);
}
4个回答

你可以随心所欲地做。它们不必在一起，这取决于代码的上下文。当然，如果您可以将它们放在一起，那么您应该这样做，因为这可能会使您的代码结构更加清晰（在“现在我们正在添加所有事件处理程序”的意义上）。

但有时您必须动态添加事件侦听器。但是，无论您是否使用IE，都无需多次测试。

更好的方法是从中抽象出来并仅测试一次加载页面时哪个方法可用。像这样的东西：

var addEventListener = (function() {
    if(document.addEventListener) {
        return function(element, event, handler) {
            element.addEventListener(event, handler, false);
        };
    }
    else {
        return function(element, event, handler) {
            element.attachEvent('on' + event, handler);
        };
    }
}());

这将测试一次使用哪种方法。然后，您可以使用以下命令在整个脚本中附加事件：

addEventListener(window, 'load',videoPlayer);
addEventListener(window, 'load',somethingelse);
只是风格问题。我将测试视为完全独立于周围代码的东西，因此喜欢将其保存在自己的“容器”/上下文中。但你是对的，在这种情况下没有必要。
2021-04-25 07:19:07
@ChrisLove 谢谢！这一事实将如何改变当前的答案？背景信息：我正在寻找一个解决方案，我想检查一个 jQuery 库是否已经在页面上可用，而不干扰可能存在的 window.load 函数，所以基本上只在那里附加我自己的事件（参见stackoverflow.com /问题/25756378/…）
2021-04-27 07:19:07
为什么这里出现令人费解的函数立即调用模式？会不会更简单if (document.addEventListener) { addEventListener = ... } else { addEventListener = ... }？
2021-04-29 07:19:07
@Flo：移动设备通常运行最新版本的浏览器。我相信它没有桌面那么分散。
2021-05-06 07:19:07
只是要清楚 attachEvent 是旧的，你甚至不应该使用 IE :) 移动定位甚至不用担心检测。
2021-05-07 07:19:07

我使用这个功能：

function addEvent (obj, type, fn) {
  if (obj.addEventListener) {

    obj.addEventListener(type, fn, false);

  } else if (obj.attachEvent) {

    obj.attachEvent('on' + type, function () {

      return fn.call(obj, window.event);

    });
  }
}

/**
 * multipleEventsListeners.js
 * Add the capability to attach multiple events to an element, just like jQuery does
 * https://gist.github.com/juanbrujo/a1f77db1e6f7cb17b42b
 */

multipleEventsListeners(events, func, elem) {
  elem = elem || document;
  var event = events.split(' ');
  for (var i = 0; i < event.length; i++) {
    elem.addEventListener(event[i], func, false);
  }
}

/*
Use: 
var input = document.querySelector('input');
multipleEventsListeners(input, 'keyup change', function(e){
  console.log = this.value;
});
*/

来自：https : //gist.github.com/juanbrujo/a1f77db1e6f7cb17b42b

通过使用命名函数并将其传递到事件侦听器中，您可以避免一遍又一遍地编写相同的代码。

// Setup our function to run on various events
var someFunction = function (event) {
    // Do something...
};

// Add our event listeners
window.addEventListener('click', someFunction, false);
window.addEventListener('mouseover', someFunction, false);

addEventListener 自动将事件对象作为

其它你可能感兴趣的问题
上一篇Highcharts - 关于完整图表宽度的问题 下一篇jQuery 可以更改 css 样式定义吗？（不是每个元素的单独 css）