Newbe question

[ampeloso]

Hello,
I have been Reading the DOM Scripting book by FriendsofEd and have a
question.
He separates the the OnClick event from the href by putting it in a js
file that gets loaded when the page gets loaded. He uses the ID
property,BUT he never actually calls the function:

The Markup:
<ul id="imagegallery">
<li>
<a href="images/fireworks.jpg" title="A fireworks
display">Fireworks</a>
</li>

Coffee</a>

</li>
<li>
<a href="images/rose.jpg" title="A red, red rose">Rose</a>
</li>
<li>
<a href="images/bigben.jpg" title="The famous clock">Big Ben</a>
</li>
</ul>

The Function:
function prepareGallery() {
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
if (!document.getElementById("imagegallery")) return false;
var gallery = document.getElementById("imagegallery");
var links = gallery.getElementsByTagName("a");
for ( var i=0; i < links.length; i++) {
links.onclick = function() {
return showPic(this);
}
links.onkeypress = links.onclick;
}
}

How does the function get called, in particular the onclick event,when
the Markup doesnt call the function.Shouldnt the function sit there
unless its called?

Thanks
Mike

 

[Martin Honnen]

links.onclick = function() {
return showPic(this);
}

How does the function get called, in particular the onclick event,when
the Markup doesnt call the function.Shouldnt the function sit there
unless its called?

With DOM scripting you assign a function as an event handler (e.g. as an
onclick handler) and then, when the event (e.g. click event) occurs, the
DOM implementation calls your function.

 

[cottonj]

Martin,
I think our "newbie" Mike is asking the obvious; he does not see where
"...you assign a function as an event handler ...".

links.onclick = function() {
return showPic(this);
}

How does the function get called, in particular the onclick event,when
the Markup doesnt call the function.Shouldnt the function sit there
unless its called?

With DOM scripting you assign a function as an event handler (e.g. as an
onclick handler) and then, when the event (e.g. click event) occurs, the
DOM implementation calls your function.

 

[ampeloso]

Exactly.

This is the entire jsIts a little confusing to me,still, how you
"attach" the event.

function showPic(whichpic) {
if (!document.getElementById("placeholder")) return true;
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
if (!document.getElementById("description")) return false;
if (whichpic.getAttribute("title")) {
var text = whichpic.getAttribute("title");
} else {
var text = "";
}
var description = document.getElementById("description");
if (description.firstChild.nodeType == 3) {
description.firstChild.nodeValue = text;
}
return false;
}

function prepareGallery() {
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
if (!document.getElementById("imagegallery")) return false;
var gallery = document.getElementById("imagegallery");
var links = gallery.getElementsByTagName("a");
for ( var i=0; i < links.length; i++) {
links.onclick = function() {
return showPic(this);
}
links.onkeypress = links.onclick;
}
}

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

addLoadEvent(prepareGallery);

 

[Randy Webb]

(e-mail address removed) said the following on 11/8/2006 10:51 AM:

Exactly.

This is the entire jsIts a little confusing to me,still, how you
"attach" the event.

for ( var i=0; i < links.length; i++) {

The var "links" is a collection of all links in the document.
The for loop goes through each one, one at a time.

links.onclick = function() {

For each link, it adds the "onclick" to it as a function. It is the same
as doing this in your HTML:

return showPic(this);
}
links.onkeypress = links.onclick;

That line assigns the onclick function to the onkeypress event handler.

 

[Martin Honnen]

I think our "newbie" Mike is asking the obvious; he does not see where
"...you assign a function as an event handler ...".

Well that is why I quoted the part of the code that sets onclick:

links.onclick = function() {
return showPic(this);
}

 

[ampeloso]

Great!
Thanks
Mike

I think our "newbie" Mike is asking the obvious; he does not see where
"...you assign a function as an event handler ...".

Well that is why I quoted the part of the code that sets onclick:

(e-mail address removed) wrote:

links.onclick = function() {
return showPic(this);
}