javascript - 如何在同一页面上多次使用 windows.onload 或 a.click 等事件监听器？

Question

我有一些外部 js 脚本可供用户嵌入到他们的网站上。它们单独工作正常，但如果您尝试在同一页面中附加两个，其中一个会崩溃(控制台上没有错误)。我认为问题出在多次调用 windows.onload 上。

下面是两个嵌入代码的样子:

代码1

  <script type="text/javascript" src="http://example.com/widget.js"></script>
  <p><span class="punctis-social-widget"></span></p>

代码2

  <script type="text/javascript" src="http://example.com/poll.js"></script>
  <p><span class="punctis-poll-button"></span></p>

poll.js 和 widget.js 只是两个简单的函数:

poll.js

window.onload = function() {
   alert('IM POLL.js');
}

widget.js

window.onload = function() {
   alert('IM WIDGET.js');
}

如果您在同一页面中插入代码 1 和代码 2，则该脚本之一将不会加载。我该如何解决这个问题？

Answer 1

使用EventTarget.addEventListener()

同一页面上不能有两个 window.onload。 第二个将覆盖第一个。要解决您的问题，请改用多个 addEventListener 。它将添加功能而不是替换相同的功能。

只需替换此window.onload=function(){}

通过这个 window.addEventListener("load", function(evt) {/* do some */})

说明:

let el = document.getElementById('a'); // window in your case

el.addEventListener('click', function(evt) { /* do task 1 */ });
el.addEventListener('click', function(evt) { /* do task 2 */ });

//similarily for window
window.addEventListener("load", function(evt) { /* do task 1 */})
window.addEventListener("load", function(evt) { /* do task 2 */})