动态添加事件监听器

Question

我有一个包含数百个html页面的网站。 现在，我想将事件侦听器添加到正文中，例如所有html页面中的onload和onunload。 我不想手动更改每个监听器，因此我在考虑是否可以动态添加这些监听器。 我的想法是编写JavaScript代码，该代码查找body的DOM节点并将侦听器添加到此节点。 这有没有可能？ （它不一定是跨浏览器的解决方案。该代码将在Firefox上运行。）

谢谢！ 保罗

Answer 1

如果要添加JavaScript，最终将需要以一种或另一种方式修改网站。

可能您将进行全局搜索并替换并查找：

</head>

并将其更改为

<script type="text/javascript" src="/global.js"></script>
</head>

然后在您网站的根目录中创建一个名为global.js的文件，并将其放入其中：

window.onload = function() {
   // onload code here
}

window.onunload = function() {
   // onunload code here
}

您想做什么事情？ 如果您要添加大量事件处理程序，那么对于jQuery或其他库的建议是一个不错的建议，但是如果您只需要添加一些JS块，那么一个库可能就显得过高了。

Answer 2

是的，很简单..但是您将如何在其中获取JavaScript？ 如果您已经在所有页面中加载了一个JavaScript库，从而可以使用该方法，则可以使用

window.onload = function() {};

和

window.onunload = function() {};

..但如果您有选择的话，我强烈建议您使用jQuery之类的库，对您隐藏所有这些问题。

---

保罗要求澄清。 这是示例代码：

var hi = function() {
  alert('hi there.');
};

var bye = function() {
  alert('bye!');
};

if(window.addEventListener) {
  window.addEventListener('load', hi, false);
  window.addEventListener('unload', bye, false);
} else if(window.attachEvent) {
  window.attachEvent('load', hi);
  window.attachEvent('unload', bye);
}

Answer 3

有两种解决方案：

1. 您可以使用jQuery ready事件
2. 或者您可以使用window.onload

Answer 4

好吧，您可以做以下四件事之一：

• 使用PHP，Python或ASP.Net等脚本语言来构建这些页面的前端，从而添加所需的代码
• 使用grep和sed类的工具进行全部替换
• 从中央“主页”将提到的页面加载到框架中，并使用DOM Manipulation添加所述事件侦听器（尽管我相信body.onLoad ）
• 如果所有页面都已经加载了一些 javascript，只需将您的监听器扔在那里。

Answer 5

在firefox中添加事件的常规方法是obj.addEventListener（type，fn，false）。 因此，唯一要做的是：

window.addEventListener('load', yourFunction, false );

没有理由为此使用jquery。

Answer 6

由于只需要在Firefox中使用它，就应该侦听DOMContentLoaded事件（这意味着HTML已加载，不包括图像）。

document.addEventListener("DOMContentLoaded", function () {
    // your code here; document.body is available
}, false);