Page 1 of 1

prototype event handler/listener

Posted: Tue May 01, 2007 3:02 pm
by GeXus
I'm at square one, but this is what I would like to ultimately accomplish...

Have an event lister that calls a function onmouseover of all <a> elements within a specific div id, for example

Code: Select all

<div id="div1">
 <a href="#" id="o1">option 1</a>
 <a href="#" id="o2">option 2</a>
 <a href="#" id="o3">option 3</a>
</div>
Here I would want to have an onmouseover (or onclick) event that triggers a function passing the elements ID..

So, if a user mouses over the first link, it will call myFunction(id){} -- id being the ID of the <a> element moused over...

Any help would be amazing! Thank you :)

Posted: Tue May 01, 2007 3:14 pm
by feyd
I'm not sure what your problem is.

Posted: Tue May 01, 2007 3:37 pm
by GeXus
Well... I don't know how to have an event listener be attached only to <a> elements within the div is the #1... #2, I don't know how to have that event listener get the id of the <a> tag

Posted: Tue May 01, 2007 4:13 pm
by Weirdan

Code: Select all

function doSomething(id) {
   alert('id is: ' + id);
}

$$('div.div1 a').each(function(elt) {
   Event.observe(elt, 'click', function(e) {
        doSomething(elt.id);
   });
});

Posted: Tue May 01, 2007 4:32 pm
by GeXus
Weirdan wrote:

Code: Select all

function doSomething(id) {
   alert('id is: ' + id);
}

$$('div.div1 a').each(function(elt) {
   Event.observe(elt, 'click', function(e) {
        doSomething(elt.id);
   });
});
Sweet.. do I have to put that inside anything particular? It doesn't work as-is....

Posted: Wed May 02, 2007 10:09 am
by Kieran Huggins
jQuery to the rescue!

You must include jQuery, then:

Code: Select all

$('div.div1 a').mouseover(function(){
   yourFunctionName($(this).attr('id'));
})