if no "onmouseover" in HTML, how can javascript do an link id - dependent action?

Discussion in 'Javascript' started by metasilk, Sep 1, 2004.

  1. metasilk

    metasilk Guest

    Situation:
    Many links with hrefs & some have ids in the HTML.
    External javascript file.

    Wanted:
    When the mouse is hovering over a link with a certain id, do something
    (such as display one particular image; which image depends on which
    link).
    Do this without having onmouseover attributes in the HTML.

    Question:
    Can I use addEventListener/attachEvent to make the script perceive
    WHICH link is hovered over, and feed that link's id to some variable?
    If so, HOW?

    Note: If I specify "look for this link" (with
    document.getElementById('link_id'), the script can listen for the
    event. However, when I have more than one specified link_id, only the
    last one has any effect. Also, if I write a for loop, so far the same
    issue (only the last id has any effect, all the rest are ignored).

    Hope this makes sense.

    --metasilk
    metasilk, Sep 1, 2004
    #1
    1. Advertising

  2. On 1 Sep 2004 06:42:31 -0700, metasilk <> wrote:

    [snip]

    > Can I use addEventListener/attachEvent to make the script perceive WHICH
    > link is hovered over, and feed that link's id to some variable?


    It's possible with addEventListener, but not with attachEvent. I'll
    explain in a moment.

    > If so, HOW?


    Just like with intrinsic events specified in HTML, the this operator
    refers to the element to which the listener is attached. Once you have a
    reference to the element, you can get the id attribute. A demo can be
    found at:

    <URL:http://www.mlwinter.pwp.blueyonder.co.uk/clj/metasilk/this.html>

    So, why won't this work with attachEvent? Because IE doesn't set the this
    operator properly. Instead of referencing the element, it used the global
    (window) object. To get around this, you can fall back onto the old,
    on<event name>, properties if addEventListener isn't available.

    Just in case you didn't know, the old event properties don't allow you to
    add multiple listeners to a single element without a lot of extra code. On
    top of that, any existing listeners specified in the HTML will be
    overridden:

    <span id="test" onclick="alert('foo');">Test</span>

    Clicking the above will display "foo" as expected, but:

    <span id="test" onclick="alert('foo');">Test</span>

    document.getElementById('test').onclick = function() {
    alert('bar');
    };

    the above result in "bar". If you used addEventListener, you would get
    both (foo, first).

    That "extra code" is used by the demo above.

    [snip]

    Hope that helps,
    Mike

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail.
    Michael Winter, Sep 1, 2004
    #2
    1. Advertising

  3. metasilk

    Mike Foster Guest

    Mike Foster, Sep 4, 2004
    #3
    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. Joe Bloggs
    Replies:
    1
    Views:
    743
    Sudsy
    Aug 3, 2003
  2. curwen
    Replies:
    3
    Views:
    36,301
    Wendy S
    Oct 9, 2003
  3. rjweytens
    Replies:
    6
    Views:
    16,080
    rjweytens
    Jun 25, 2004
  4. vyshu
    Replies:
    1
    Views:
    2,547
    Richard Senior
    Apr 27, 2007
  5. puzzlecracker
    Replies:
    1
    Views:
    518
    James Kanze
    Aug 7, 2008
Loading...

Share This Page