P
Patrik Spieß
Hi,
According to http://www.quirksmode.org/js/events_advanced.html it is
possible to add event handlers to DOM nodes of links (A-Tags) with the
function addEventListener(...). The following minimal example does not
work in Firefox 2. It is a HTML page with a link and a text area. When
the mouse enters or leaves the link, a line should be added to the
text area.
This works when I directly assign the event handler to the nodes
onmouseover field, but not if I use the addEventListener method. Am I
doing anything wrong here or is it not supported by Firefox 2?
Best,
Patrik
<html lang="en"><head>
<script language="javascript">
function init() {
for (var i=0;i<document.links.length;i++) {
// does not work:
//document.links.addEventListener("onmouseover", handleEvent,
true);
//document.links.addEventListener("onmouseout", handleEvent,
true);
// works:
document.links.onmouseover = handleEvent;
document.links.onmouseout = handleEvent;
}
}
function handleEvent(e) {
if (!e) return false;
document.forms['test'].elements['log'].value = e.type + '\n' +
document.forms['test'].elements['log'].value;
return false;
}
</script></head><body class="testpage" onLoad="init()">
This is <a href="#">the test link</a>
<form name="test">
<textarea name="log" rows="10"></textarea>
<input value="Clear log"
onclick="document.forms[0].elements['log'].value = ''" type="button">
</form>
body></html>
According to http://www.quirksmode.org/js/events_advanced.html it is
possible to add event handlers to DOM nodes of links (A-Tags) with the
function addEventListener(...). The following minimal example does not
work in Firefox 2. It is a HTML page with a link and a text area. When
the mouse enters or leaves the link, a line should be added to the
text area.
This works when I directly assign the event handler to the nodes
onmouseover field, but not if I use the addEventListener method. Am I
doing anything wrong here or is it not supported by Firefox 2?
Best,
Patrik
<html lang="en"><head>
<script language="javascript">
function init() {
for (var i=0;i<document.links.length;i++) {
// does not work:
//document.links.addEventListener("onmouseover", handleEvent,
true);
//document.links.addEventListener("onmouseout", handleEvent,
true);
// works:
document.links.onmouseover = handleEvent;
document.links.onmouseout = handleEvent;
}
}
function handleEvent(e) {
if (!e) return false;
document.forms['test'].elements['log'].value = e.type + '\n' +
document.forms['test'].elements['log'].value;
return false;
}
</script></head><body class="testpage" onLoad="init()">
This is <a href="#">the test link</a>
<form name="test">
<textarea name="log" rows="10"></textarea>
<input value="Clear log"
onclick="document.forms[0].elements['log'].value = ''" type="button">
</form>
body></html>