Scribd
Upload
11 views

17-Events

Uploaded by

geromsaid889
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
11 views

17-Events

Uploaded by

geromsaid889
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

1 Events

CS380
The keyword this
2

this.fieldName // access field


this.fieldName = value; // modify field
this.methodName(parameters); // call method
JS

 all JavaScript code actually runs inside of an object


 by default, code runs inside the global window
object
 all global variables and functions you declare become
part of window
 the this keyword refers to the current object
CS380
Event handler binding
3

function pageLoad() {
$("ok").onclick = okayClick; // bound to okButton
here
}
function okayClick() { // okayClick knows what DOM object
this.innerHTML = "booyah"; // it was called on
}
window.onload = pageLoad; JS

 event handlers attached unobtrusively are bound to


the element
 inside the handler, that element becomes this (rather
than the window)
CS380
Fixing redundant code with this
4

<fieldset>
<label><input type="radio" name="ducks"
value="Huey" /> Huey</label>
<label><input type="radio" name="ducks"
value="Dewey" /> Dewey</label>
<label><input type="radio" name="ducks"
value="Louie" /> Louie</label>
</fieldset> HTML
function processDucks() {
if ($("huey").checked) {
alert("Huey is checked!");
} else if ($("dewey").checked) {
alert("Dewey is checked!");
} else {
alert("Louie is checked!");
}
alert(this.value + " is checked!");
CS380
} JS
More about events
5

abort blur change click dblclick error focus


mousedow mousemov
keydown keypress keyup load mouseout
n e
mouseover mouseup reset resize select submit unload
 the click event (onclick) is just one of many events
that can be handled
 problem: events are tricky and have
incompatibilities across browsers
 reasons:fuzzy W3C event specs; IE disobeying web
standards; etc.
 solution: Prototype includes many event-related
features and fixes
Attaching event handlers the
6
Prototype way
element.onevent = function;
element.observe("event", "function");
JS
// call the playNewGame function when the Play button is
clicked
$("play").observe("click", playNewGame);
JS
 to use Prototype's event features, you must attach the
handler using the DOM element
 object's observe method (added by Prototype)
 pass the event of interest and the function to use as
the handler
 handlers must be attached this way for Prototype's
event features to work
The Event object
7

function name(event) {
// an event handler function ...
} JS

 Event handlers can accept an optional parameter to


represent the event that is occurring. Event objects
have the following properties / methods:
method / property name description
what kind of event, such as "click" or
type
"mousedown"
the element on which the event
element() *
occurred
stop() ** cancels an event
stopObserving() removes an event handler
Mouse events
8

user presses/releases mouse button on


click
this element
user presses/releases mouse button
dblclick
twice on this element
user presses down mouse button on
mousedown
this element
user releases mouse button on this
mouseup
element

CS380
Mouse events
9

mouse cursor enters this


mouseover
element's box
mouse cursor exits this element's
mouseout
box
mouse cursor moves around
mousemove
within this element's box

CS380
Mouse event objects
10

CS380
Mouse event objects
11

property/method description
clientX, clientY coordinates in browser window
screenX, screenY coordinates in screen
offsetX, offsetY coordinates in element
pointerX(),
coordinates in entire web page
pointerY() *
isLeftClick() ** true if left button was pressed
* replaces non-standard properties pageX and pageY
** replaces non-standard properties button and which

CS380
The Event object
12

<pre id="target">Move the mouse over me!</pre>


HTML

window.onload = function() {
$("target").observe("mousemove", showCoords);
};
function showCoords(event) {
this.innerHTML =
"pointer: (" + event.pointerX() + ", " +
event.pointerY() + ")\n"
+ "screen : (" + event.screenX + ", " +
event.screenY + ")\n"
+ "client : (" + event.clientX + ", " +
event.clientY + ")";
JS

CS380

You might also like