i'm having trouble understanding Simon Willison's addLoadEvent()

[Jake Barnes]

I thought I understood this article:

http://simon.incutio.com/archive/2004/05/26/addLoadEvent

It seems like a smart, insightful function:


function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}

He gives these examples:

addLoadEvent(nameOfSomeFunctionToRunOnPageLoad);
addLoadEvent(function() {
/ * more code to run on page load * /
});


Oddly, the first example doesn't work for me at all. I can try

addLoadEvent("checkForm()");

and:

addLoadEvent("checkForm");

but the second form works for me just fine:


addLoadEvent(function() {
//Attaching the onSubmit event to the login form
if (document.getElementById('cmsform')) {
var loginForm = document.getElementById('cmsform');
loginForm.onsubmit = function () {
checkFormForEmptyFields(this);
return false;
}
}
});



However, I want to add an event to several of the event handlers of
this form. Yet when I try, the code stops working, and I get the
amazing error message that loginForm has no properties.

This doesn't work, but I can't imagine why:

addLoadEvent(function() {
//Attaching the onSubmit event to the login form
if (document.getElementById('cmsform')) {
var loginForm = document.getElementById('cmsform');
loginForm.onclick = function () {
updateLivePreview(this);
return false;
}
}
});

addLoadEvent(function() {
//Attaching the onSubmit event to the login form
if (document.getElementById('cmsform')) {
var loginForm = document.getElementById('cmsform');
loginForm.onkeydown = function () {
updateLivePreview(this);
return false;
}
}
});

addLoadEvent(function() {
//Attaching the onSubmit event to the login form
if (document.getElementById('cmsform')) {
var loginForm = document.getElementById('cmsform');
loginForm.onchange = function () {
updateLivePreview(this);
return false;
}
}
});

addLoadEvent(function() {
//Attaching the onSubmit event to the login form
if (document.getElementById('cmsform')) {
var loginForm = document.getElementById('cmsform');
loginForm.onblur = function () {
updateLivePreview(this);
return false;
}
}
});


Why is that?

 

[Janwillem Borleffs]

Oddly, the first example doesn't work for me at all. I can try

addLoadEvent("checkForm()");

and:

addLoadEvent("checkForm");

Try: addLoadEvent(checkForm); (which passes the actual function reference,
not a string)


JW

 

[Jake Barnes]

Try: addLoadEvent(checkForm); (which passes the actual function reference,
not a string)

Thanks much. I guess if I'd been thinking clearly I would have realized
the parameter has to be function, not a string.

Any idea why this code would fail if I try to override two event
handlers on one page element? This works fine:

addLoadEvent(function() {
var refToBody = document.body;
refToBody .onclick= function () {
updateLivePreview(this);
return false;
}
});


but this does not:


addLoadEvent(function() {
var refToBody = document.body;
refToBody .onclick= function () {
updateLivePreview(this);
return false;
}
});

addLoadEvent(function() {
var refToBody = document.body;
refToBody .onblur= function () {
updateLivePreview(this);
return false;
}
});

 

[Thomas 'PointedEars' Lahn]

Any idea why this code would fail if I try to override two event
handlers on one page element? This works fine:

addLoadEvent(function() {
var refToBody = document.body;
refToBody .onclick= function () {
updateLivePreview(this);
return false;
}
});


but this does not:

addLoadEvent(function() {
var refToBody = document.body;
refToBody .onclick= function () {
updateLivePreview(this);
return false;
}
});

addLoadEvent(function() {
var refToBody = document.body;
refToBody .onblur= function () {
updateLivePreview(this);
return false;
}
});

<URL:http://www.jibbering.com/faq/faq_notes/pots1.html#ps1DontWork>
<URL:http://jibbering.com/faq/#FAQ4_43>

BTW, the `refToBody' variable is redundant.


PointedEars