Add EventListener to <a href...> tag

[Fabio Cavassini]

I want to clean my html from JavaScript and attach all EventHanding
code as:

document.getElementById('to').addEventListener('onMouseout',delayhidemenu,false);
document.getElementById('s').addEventListener('onMouseout',delayhidemenu,false);

that way, I can work with a clean HTML page and a separate JavaScript
file.

But, I can't make it work with links, having:

<SCRIPT LANGUAGE="JavaScript">
window.onload=function(){
document.getElementById('h').addEventListener('onClick',say,false);
}
function say(){
alert("hello");
}
</SCRIPT>
<a id="h" href="#">hhh</a>

Produces the error: The object doesn't accept this property or method.

How can I add an event handler to a <a> tag?

Best Regards
Fabio Cavassini

 

[Rob Williscroft]

Fabio Cavassini wrote in
in
comp.lang.javascript:

I want to clean my html from JavaScript and attach all EventHanding
code as:

document.getElementById('to').addEventListener('onMouseout',delayhideme
nu,false);
document.getElementById('s').addEventListener('onMouseout',delayhidemen
u,false);

that way, I can work with a clean HTML page and a separate JavaScript
file.

But, I can't make it work with links, having:

<SCRIPT LANGUAGE="JavaScript">
window.onload=function(){
document.getElementById('h').addEventListener('onClick',say,f
alse);
}
function say(){
alert("hello");
}
</SCRIPT>
<a id="h" href="#">hhh</a>

Produces the error: The object doesn't accept this property or method.

How can I add an event handler to a <a> tag?

<script type="text/javascript">
window.addEventListener(
'load',
function()
{
document.getElementById('h').addEventListener('click',say,false);
},
false
);

function say()
{
alert("hello");
}
</script>

Note the lack of an 'on' prefix to the event names.

Internet Explorer will fail with the above as it (currently)
lacks addEventListener, it dose have a proprietry attachEvent
though:

<script type="text/javascript">
function add_listener( on, name, func )
{
if ( on.addEventListener )
{
on.addEventListener(
name.replace( /^on/, ''), func, false
);
}
else if ( on.attachEvent )
{
on.attachEvent( name, func );
}
else
{
on[name] = func;
}
}

add_listener(
window, 'onload',
function()
{
add_listener( document.getElementById('h'), 'onclick', say );
}
);
</script>

Rob.

 

[Fabio Cavassini]

Work perfect, thanks

Year 2005 and still we have to take care of different JavaScript
browser implementations...that's embarrassing....

Regards
Fabio Cavassini

 

[Chris Lieb]

Fabio Cavassini wrote:
[snip]

Year 2005 and still we have to take care of different JavaScript
browser implementations...that's embarrassing....

You have to remember that IE is still stuck back in 2001, while other
browsers like Firefox and Opera are in continual development, which
allows them to keep up with the standards.

Chris Lieb

 

[Fabio Cavassini]

Is it possible to add parameters to this?

For example:

add_listener( document.getElementById('h'), 'onclick',
say(someStaticParameter) );

or

add_listener( document.getElementById('h'), 'onclick',
say(document.getElementById('h')) );

Best Regards
Fabio Cavassini
http://www.pldsa.com

 

[Thomas 'PointedEars' Lahn]

Is it possible to add parameters to this?

To /what/?

<URL:http://jibbering.com/faq/faq_notes/pots1.html#ps1Post>

For example:

add_listener( document.getElementById('h'), 'onclick',
say(someStaticParameter) );

or

add_listener( document.getElementById('h'), 'onclick',
say(document.getElementById('h')) );

I do not understand the question. What is add_listener(), what is say()?


PointedEars

 

[Jonas Raoni]

Is it possible to add parameters to this?

You'll need to make some tricks to achieve this...

Something like works fine:

getHandler = function getHandler(arg1, arg2){
return function(e){
alert([arg1, arg2].join("\n"));
};
}

addEvent(document, "mousedown", getHandler("Mouse was pressed out",
"mousedown"));
addEvent(document, "mouseup", getHandler("Mouse was released",
"mouseup"));

But if you need to remove the handler later, you'll need to do
something like:

addEvent(document, "mousedown", x = getHandler("Mouse was pressed out",
"mousedown"));
addEvent(document, "mouseup", y = getHandler("Mouse was released",
"mouseup"));

:

removeEvent(document, "mousedown", x);
removeEvent(document, "mouseup", y);

 

[Rob Williscroft]

Fabio Cavassini wrote in @z14g2000cwz.googlegroups.com in comp.lang.javascript:

Is it possible to add parameters to this?

For example:

add_listener( document.getElementById('h'), 'onclick',
say(someStaticParameter) );

or

add_listener( document.getElementById('h'), 'onclick',
say(document.getElementById('h')) );

A closeure would solve the problem:

add_listener(
document.getElementById('h'),
'onclick',
function ()
{
say(someStaticParameter);
}
);

If you want to capture the value that "someStaticParameter"
has at the point you call add_listener rather than the value
it will have at some point in the future when the event gets
fired, then you need another level of indirection:

function add_listner_capture_arg( obj, name, f, arg )
{
add_listener(
obj,
name,
function ()
{
f( arg );
}
);
}

Rob.

 

[Fabio Cavassini]

Thanks Rob!!!

It works perfectly, again

Thanks, slowly I'm getting taste of the flexibility of JavaScript....

Best Regards