javascript

CHAPTER 10 ■ SCRIPTING BOM
410
In addition to binding press() for the mousedown event, we want to add a jump member to both
elements. For the one of the right class, jump will contain -10. On the other hand, jump will be 10
for the of the left class. During an animation, JavaScript will add jump to slide.style.left. That is
to say, pressing down on the right arrow will decrement left for slide by 10 pixels, while pressing down
on the left arrow will increment left for slide by 10 pixels. That happens in just 15 milliseconds, mind
you.
Anyway, this is where re earns its keep. Remember from Chapter 2 that RegExp.test() returns true
if the regular expression matches the string parameter and false if not. If we pass re.test() the value of
the class attribute for both arrows, it will return true for the right arrow and false for the left arrow.
With this in mind, we can initialize jump to the appropriate value by making the call to RegExp.test() the
boolean expression prior to the ? token of the conditional operator:
function prepScrollers() {
var elements = findClass("scroller");
for (var i = elements.length; i --; ) {
(function (scroller) {
var wrapper = findClass("wrapper", scroller)[0];
var slide = findClass("slide", scroller)[0];
var w1 = parseInt(queryCascade(wrapper, "width"));
var w2 = parseInt(queryCascade(slide, "width"));
var timer = null;
slide.style.left = queryCascade(slide, "left");
for (var arrows = findClass("arrow", scroller), i = arrows.length, re = /\bright\b/; i -
-; ) {
addListener(arrows[i], "mousedown", press);
arrows[i].jump = (re.test(arrows[i].className)) ? -10 : 10;
}
})(elements[i]);
}
}
Adding the Press Event Listener
Now on to the event listener press(), which will execute whenever a mousedown event fires on an arrow
. Define an e parameter for the DOM event object. Then if JavaScript defaults e to undefined, assign
window.event to e. Remember, window.event is where Internet Explorer will save details about the
mousedown event. One of those tidbits, window.event.srcElement, will refer to the left or right arrow
. DOM-savvy browsers call that member target. So in Internet Explorer, initialize a new
window.event.target member that refers to window.event.srcElement. That way, e.target refers to an
arrow cross-browser:
function prepScrollers() {
var elements = findClass("scroller");
for (var i = elements.length; i --; ) {
(function (scroller) {
var wrapper = findClass("wrapper", scroller)[0];
var slide = findClass("slide", scroller)[0];
var w1 = parseInt(queryCascade(wrapper, "width"));
var w2 = parseInt(queryCascade(slide, "width"));
var timer = null;
slide.style.left = queryCascade(slide, "left");
for (var arrows = findClass("arrow", scroller), i = arrows.length, re = /\bright\b/; i -
-; ) {