HTML and CSS Reference
In-Depth Information
You can register more than one event for a target if the events or capture parameters
are different. Now we register another event listener to the same element as follows:
var div1 = document.getElementById("mydiv");
div1.addEventListener("click",bigFont,false);
div1.addEventListener("click",smallFont, true);
So which event takes place first? The W3C model does not state which event handler
is fired first so we will check in Example 15.21. However, if multiple identical event lis-
teners are registered on the same target with the same parameters, the event listener will
only be called once and the duplicate instances discarded.
Using
this
within the Handler.
As we have seen in many examples throughout this
text, the
this
keyword normally represents a reference to an object passed to a function,
but the
this
keyword, when used with W3C event handlers, is a reference to the HTML
element from which the event handler was fired, giving you easy access to the element.
function changeStyle() {
this.style.backgroundColor = '#cc0000';
}
EXAMPLE
15.20
<html>
<head><title></title>
<script type="text/javascript">
window.onload=function(){
1
var paraHandle = document.getElementById("mypara");
2
paraHandle.addEventListener('click',alterText, false);
function alterText(){
3
this.style.backgroundColor ="tan";
this.style.fontFamily ="fantasy";
this.style.fontWeight ="bold";
}
}
</script>
</head>
<body>
4
<
p id="mypara"
>
There was an old lady who lived
in a shoe.<br />
She had so many children, she
didn't know what to do.<br />
</p>
</body>
</html>
