添加多个载入处理程序 [英] Adding multiple onload handlers
问题描述
更具体来说，这是我的html文件：
HTML>
< head>
< title>欢迎来到我们的网站< / title>
< script type =text / javascriptsrc =script1.js> < /脚本>
< script type =text / javascriptsrc =script2.js> < /脚本>
< / head>
< body id =pageBody>
< h2 align =center>
< a href =http://www.whatever.comid =redirect> Wellcome到我们的网站... c'mon in！ < / A>
< / h2>
< / body>
< / html>
它加载两个js文件script1.js和script2.js。
这是这两个脚本的版本，导致（至少由我）意外的行为。
Script1.js：
window.onload = initAll1（）; //附加第一个onload处理程序
函数initAll1（）{
alert（initAll1）;
document.getElementById（redirect）。onclick = foo; //附加onclick处理程序
}
function foo（）{
alert（we are in foo）;
返回false;
}
Script2.js：
addOnloadHandler（initAll2）; //这样我们应该附加一个第二个onload处理程序
function initAll2（）{
alert（initAll2）;
if（linkHasOnclickHandler（document.getElementById（redirect）））{
alert（correct！）;
}
else {
alert（wrong！）;
}
}
函数addOnloadHandler（newFunction）{
var oldevent = window.onload;
if（typeof oldevent ==function）{
window.onload = function（）{
if（oldevent）{
oldevent（）;
}
newFunction（）;
};
}
else {
window.onload = newFunction;
}
}
函数linkHasOnclickHandler（）{
var oldevent = document.getElementById（redirect）onclick;
if（typeof oldevent ==function）{
return true;
}
else {
return false;
}
}
在Script2.js中，我尝试添加第二个onload处理程序使用函数addOnloadHandler（）以非常好的无创方式。该函数对于是否已经有任何onload处理程序附加到窗口对象没有任何假设。它是无创的，因为它应该添加新的处理程序，而不删除以前的。
事实是，当加载addOnloadHandler（）时，initAll2（）不能检测到事实上，document.getElementById（redirect）已经将foo（）作为onclick事件处理程序附加了（参见initAll1（））。警告消息错了！被触发，这对我来说似乎是错误的行为。
当我忘记了addOnloadHandler（）并且在Script1.js中使用以下方式附加了两个onload处理程序：
window.onload = function（）{initAll1（）; initAll2（）;};
那么一切都按预期工作，initAll2（）启动正确！警告消息。
addOnloadHandler（）有什么问题吗？有人会让它工作吗？我真的很喜欢使用它而不是第二种方法。
谢谢！
为了防止未来的人发现这一点，并且正在寻找一种方法来使用多个事件处理程序，当对象本身不支持 addEventListener ， attachEvent 或某种其他形式的侦听器堆叠 - 即它是一个定制的对象，严重执行。然后，您可以执行以下操作：
object.onload =（function（pre）{
return function（）
pre&& pre.apply（this，arguments）;
///在您的监听器中执行您需要的
}
}）（object.onload）;
每次使用上面的代码，以前的 onload 监听器作为参数传入，当您的新侦听器被触发时，它首先运行旧的监听器 - 这意味着您可以像这样堆栈许多监听器，如果您希望 。但是，只要上面的代码总是用于将侦听器添加到对象中，这只能起作用。所有你的努力工作将被撤消，如果其他地方被一个简单的覆盖：
object.onload = function（）{}
作为编码器的注释，如果要实现库，插件或构造函数，它是可能的其他编码人员将接管你的工作。请为多个事件侦听器编写代码。这真的不是那么困难。
I have two js files, each one with its own window.onload handler. Depending on how I attach the two onload handlers to the window object I get a different behaviour on the second handler.
More specifically, here is my html file:
<html>
<head>
<title>Welcome to our site</title>
<script type="text/javascript" src="script1.js"> </script>
<script type="text/javascript" src="script2.js"> </script>
</head>
<body id="pageBody">
<h2 align="center">
<a href="http://www.whatever.com" id="redirect"> Wellcome to our site... c'mon in! </a>
</h2>
</body>
</html>
It loads two js files, script1.js and script2.js.
Here is the version of these two scripts that leads to the (at least by me) unexpected behaviour.
Script1.js:
window.onload = initAll1(); // attach first onload handler
function initAll1() {
alert("initAll1");
document.getElementById("redirect").onclick = foo; // attach an onclick handler
}
function foo() {
alert("we are in foo");
return false;
}
Script2.js:
addOnloadHandler(initAll2); // with this we should attach a second onload handler
function initAll2() {
alert("initAll2");
if (linkHasOnclickHandler(document.getElementById("redirect"))) {
alert("correct!");
}
else {
alert("wrong!");
}
}
function addOnloadHandler (newFunction) {
var oldevent = window.onload;
if (typeof oldevent == "function") {
window.onload = function() {
if (oldevent) {
oldevent();
}
newFunction();
};
}
else {
window.onload = newFunction;
}
}
function linkHasOnclickHandler() {
var oldevent = document.getElementById("redirect").onclick;
if (typeof oldevent == "function") {
return true;
}
else {
return false;
}
}
In Script2.js I tried to add the second onload handler in a nice noninvasive way using function addOnloadHandler(). This function does not make any assumption on whether there is already any onload handler attached to the window object. It is noninvasive because it should add the new handler without deleting previous ones.
The thing is that when loaded with addOnloadHandler(), initAll2() is not capable of detecting the fact that document.getElementById("redirect") already has foo() attached as an onclick event handler (see initAll1()). The alert message "wrong!" is triggered, which to me seems to be the wrong behaviour.
When I forget about addOnloadHandler() and attach both onload handlers in Script1.js using:
window.onload = function () {initAll1(); initAll2();};
then everything works as expected, and initAll2() launches the "correct!" alert message.
Is there something wrong about addOnloadHandler()? Could anybody make it work? I would really like to use it instead of the second method.
Thanks!
Just in case future people find this, and are looking for a way to use multiple event handlers when the object itself doesn't support addEventListener, attachEvent or some other form of listener stacking - i.e. it is a bespoke object, badly implemented. Then you can do the following:
object.onload = (function(pre){
return function(){
pre && pre.apply(this,arguments);
/// do what you need for your listener here
}
})(object.onload);
Each time you use the above code the previous onload listener is passed in as an argument, and when your new listener is triggered it runs the old listener first - meaning you can stack many listeners like this, if you so wish. However, this will only work for as long as the above code is always used to add listeners to your object. All your hard work will be undone if somewhere else it is overridden with a simple:
object.onload = function(){}
As a note to coders, if you are to implement a library, plugin or constructor, and it is possible other coders will take over your work. Please, please code the ability for multiple event listeners. It's really not that difficult.
这篇关于添加多个载入处理程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
