Jonathan Snook, Aaron Gustafson, Stuart Langridge, and Dan Webb
"Accelerated DOM Scripting with Ajax, APIs, and Libraries"
If users have
JavaScript disabled, they can still navigate to the page.
The this Keyword
In that last bit of code, you see the this keyword, which enables you to refer to the current
object. In this case, the
element is the current object. As you get into more advanced event
handling and object-oriented programming techniques, the this keyword will play a prominent
role.
Unobtrusive JavaScript
I previously mentioned the three pillars of separation: HTML from CSS from JavaScript. In the
case of inline event handlers, you??™re not much better off than with style attributes. However,
you can centralize all the behavior in external files and apply them to each document as
required.
You do this by attaching event handlers to the objects via JavaScript. For example, if you
want to run some code after the page loads, you can do this:
window.onload = function()
{
foo();
bar();
}
CHAPTER 2 n HTML, CSS, AND JAVASCRIPT 40
If you want to create a rollover on an image, you can do something like this:
image.onmouseover = function()
{
this.src = 'newimage.gif';
}
Of course, you??™ll want to change it back when you roll out:
image.onmouseout = function()
{
this.src = 'oldimage.gif';
}
Remember that you can store properties in an element to use them later? Let??™s make a
more generic rollout script. You need to adjust the rollover script at the same time:
image.onmouseover = function()
{
this.
Pages:
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92