Newbe question

Discussion in 'Javascript' started by ampeloso@gmail.com, Nov 8, 2006.

  1. Guest

    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>
    <li>
    <a href="images/coffee.jpg" title="A cup of black coffee"
    >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
     
    , Nov 8, 2006
    #1
    1. Advertising

  2. wrote:

    > 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.


    --

    Martin Honnen
    http://JavaScript.FAQTs.com/
     
    Martin Honnen, Nov 8, 2006
    #2
    1. Advertising

  3. Guest

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


    Martin Honnen wrote:
    > wrote:
    >
    > > 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.
    >
    >
    > --
    >
    > Martin Honnen
    > http://JavaScript.FAQTs.com/
     
    , Nov 8, 2006
    #3
  4. Guest

    Exactly.

    This is the entire js:(Its 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);
     
    , Nov 8, 2006
    #4
  5. Randy Webb Guest

    said the following on 11/8/2006 10:51 AM:
    > Exactly.
    >
    > This is the entire js:(Its a little confusing to me,still, how you
    > "attach" the event.


    <snip>

    > 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:

    <a .. onclick="showPic(this)">

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


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

    --
    Randy
    Chance Favors The Prepared Mind
    comp.lang.javascript FAQ - http://jibbering.com/faq
    Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
     
    Randy Webb, Nov 8, 2006
    #5
  6. wrote:

    > 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:

    > Martin Honnen wrote:
    >> wrote:
    >>
    >>> links.onclick = function() {
    >>> return showPic(this);
    >>> }

    >>




    --

    Martin Honnen
    http://JavaScript.FAQTs.com/
     
    Martin Honnen, Nov 8, 2006
    #6
  7. Guest

    Great!
    Thanks
    Mike
    Martin Honnen wrote:
    > wrote:
    >
    > > 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:
    >
    > > Martin Honnen wrote:
    > >> wrote:
    > >>
    > >>> links.onclick = function() {
    > >>> return showPic(this);
    > >>> }
    > >>

    >
    >
    >
    > --
    >
    > Martin Honnen
    > http://JavaScript.FAQTs.com/
     
    , Nov 8, 2006
    #7
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?UnlhbiBTbWl0aA==?=

    Easy SQL Question - Newbe

    =?Utf-8?B?UnlhbiBTbWl0aA==?=, Jan 5, 2005, in forum: ASP .Net
    Replies:
    1
    Views:
    325
    Bob Lehmann
    Jan 5, 2005
  2. =?Utf-8?B?b3o=?=

    Newbe question ---- response.writefile

    =?Utf-8?B?b3o=?=, Jan 9, 2005, in forum: ASP .Net
    Replies:
    1
    Views:
    314
    =?Utf-8?B?b3o=?=
    Jan 9, 2005
  3. =?Utf-8?B?UnlhbiBTbWl0aA==?=

    Newbe Question

    =?Utf-8?B?UnlhbiBTbWl0aA==?=, Sep 9, 2005, in forum: ASP .Net
    Replies:
    3
    Views:
    393
  4. Daniel Bello Urizarri

    Newbe question about location of assemblies.

    Daniel Bello Urizarri, Sep 30, 2005, in forum: ASP .Net
    Replies:
    1
    Views:
    311
    Daniel Bello Urizarri
    Sep 30, 2005
  5. Replies:
    7
    Views:
    361
Loading...

Share This Page