Javascript DOM Events

spongereasonInternet and Web Development

Nov 12, 2013 (3 years and 9 months ago)

89 views

DOM Events

JS Events Outline


About Events


Introduction


Registering events


Getting information from events


Event order/phases


Preventing default action


Preventing bubble


Events in detail


Click


Keyboard


Mouse



DOM Events


An event system that allows registration of
event listeners



Describes event flow through a tree structure



Provide a common subset of current event
systems used in existing browsers.

What are events?


Events occur when some type of interaction
takes place in a web page.
(Mouse click, mouse move, key
press,
etc
)



Events are also things that happen to the web
browser.
(Loading a page, window resize, scroll window)



With javascript, developers can detect when
certain events happen, and cause things to
happen in response.


CSE 3345

4

How events work


Events can be registered to HTML elements,
window,

and
document

objects.



When an event happens on an element, the web page
checks to see if the element has any event handlers
attached.



If it does, the webpage will call registered event handlers
with references and info for each event that occurred.



Event handlers then act upon the event with whatever code
is specified by the developer.

CSE 3345

5

Event Example

Example
1

<
a

href
=
"http://www.opera.com/"

onclick
=
"alert('Hello')"
>
Say hello
</a
>






Example 2

<script

type
=
"text/
javascript
"
>


var

link
=

documents.getElementsByTagName
(
“a”
)[
0
];


link.addEventListener
(
“click”
,




function
(
event
)

{




alert
(
“Hello”
);



},




false
);

</script>

CSE 3345

6

Evolution of Events


In the early days, events use to be handled
directly by HTML elements.



Uses inline javascript which is very messy and
didn’t allow reusability.


<a
href
="http://www.opera.com/"
onclick
="alert('Hello')">Say hello</a
>





CSE 3345

7

Inline Javascript events


onclick


ondblclick



onmousedown


onmousemove


onmouseover


onmouseout



onmouseup



onkeydown



onkeypress



onkeyup



onabort



onerror



onload



onresize


onscroll


onunload


onblur



onchange


onfocus



onreset



onselect


onsubmit


CSE 3345

8

Next step in event evolution


Apply events in blocks of javascript code.



Code can now be cached and is reusable.


<script

type
=
"text/javascript"
>


document.getElementById
(
"my
-
link"
).
onclick

=

waveToAudience
;


function

waveToAudience
()

{


alert
(
"Waving like I've never waved before!"
);


}

</script>


<a

id
=
"my
-
link"

href
=
"http://www.opera.com/"
>
My link
</a>

CSE 3345

9

Inline Javascript events


You can get/set events using DOM



Each event has an associated node property



Properties get overwritten when new values
are given.


document
.
body
.
onclick

=

function
(
e
)

{
return

1
;}

document
.
body
.
onclick

=

function
(
e
)

{
return

2
;}

//
overidding

any previously set
onclick

values

CSE 3345

10

Later step in event evolution


Introduced in DOM 2 Event spec



Created
addEventListener
()

and
removeEventListener
()



Allows developers to register and remove
listeners on elements


CSE 3345

11

addEventListeners
()

Has three
parameters

1.
type

2.
listener

3.
useCapture



document.body.addEvent
(
type
,

listener
,

useCapture
);



CSE 3345

12

addEventListener
() example




document
.
body
.
addEventListener
(
'click'
,



function
(
event
)

{




console
.
log
(
"hello
"
);


},



false
)
;






document
.
body
.
addEventListener
(
'click'
,

function
(
e
)

{

console
.
log
(
"world
"
);},

false
);



CSE 3345

13

type

listener

useCapture

addEventListener
()


For the
type

parameter, you don’t need to
prepend the “on” for each event type.



Using
addEventListener
()
, event handlers
AREN’T

overwritten
.


That means you can have multiple listeners on the
same element.


CSE 3345

14

Type
values


click



dblclick


mousedown


mousemove


mouseover


mouseout


mouseup



keydown



keypress


keyup


abort


error


load


resize


scroll


unload


blur


change



focus



reset



select


submit

CSE 3345

15

removeEventListener
() example

Has three parameters

1.
type

2.
listener

3.
useCapture



document
.
body
.
removeEventListener
(
'click'
,

function
(
e
)

{

console
.
log
(
"hello
"
);},

false
);



document
.
body
.
removeEventListener
(
'click'
,

function
(
e
)

{

console
.
log
(
"world
"
);},

false
);






Calling

removeEventListener
()

with arguments which do not identify
any currently
registered event handlers on a target has no effect.

CSE 3345

16

Your turn!


Add a click listener to an element so that each
time the element is clicked, its
top

increases
by 10px.


document
.
body
.
style
.
top

=

"0px"
;

document
.
body
.
style
.
top
;
// "0px";

CSE 3345

17

Window load Event


Javascript has a window object that represents an
open window in a browser.



The window’s load event is triggered when the
complete document (DOM) is loaded.


This includes images and elements



We should put all logic that deals with accessing
the DOM in the window’s load event listener.

CSE 3345

18

Window load event example

<script

type
=
"text/
javascript
"
>


window.addEventListener
(
'load'
,

function
(
event
)

{


//You should put all
javascript

logic that access nodes in the DOM inside


//this event listener


var

element
=

document.getElementById
(
"content"
);


element.style.color

=

"
rgb
(255,255,255);


},

false
);

</script>

CSE 3345

19

Getting information from an event


The
Event

interface provides basic contextual
information about an event to all
registered

event
handlers
.



Supply a parameter to your event handler or
use the
arguments

method to access the
Event

interface.

CSE 3345

20

Getting information from an event



function

clickHandler
(
e
)

{


if

(
e
!==

undefined
)

{



console
.
log
(
e
.
timeStamp
);

//1348409181352



console
.
log
(
e
.
type
);

//click



console
.
log
(
e
.
target
);

//<html element>


}

}

document
.
body
.
addEventListener
(
'click'
,

clickHandler
,

false
);

CSE 3345

21

Event
interface

CSE 3345

22

interface

Event

{


//
PhaseType


const

unsigned
short

NONE
=

0
;


const

unsigned
short

CAPTURING_PHASE
=

1
;


const

unsigned
short

AT_TARGET
=

2
;


const

unsigned
short

BUBBLING_PHASE
=

3
;



readonly

attribute
DOMString

type
;


readonly

attribute
EventTarget
?

target
;


readonly

attribute
EventTarget
?

currentTarget
;


readonly

attribute unsigned
short

eventPhase
;


readonly

attribute
boolean

bubbles
;


readonly

attribute
boolean

cancelable
;


readonly

attribute
DOMTimeStamp

timeStamp
;


void

stopPropagation
();


void

preventDefault
();


void

initEvent
(
DOMString

eventTypeArg
,


boolean

canBubbleArg
,


boolean

cancelableArg
);


// Introduced in DOM Level 3:


void

stopImmediatePropagation
();


readonly

attribute
boolean

defaultPrevented
;


readonly

attribute
boolean

isTrusted
;

};

Important Event Interface variables


type



the name of the event type (click,
focus, blur, etc.)



target



the object the event happened on



currentTarget



the object associated with
the event handler currently being handled.

CSE 3345

23

JS Events Outline


About Events


Introduction


Registering events


Getting information from events


Event order/phases


Preventing default action


Preventing bubble


Events in detail


Click


Keyboard


Mouse



Event Order


There are 2 types of event orders:
event

capturing

and
event

bubbling
.

CSE 3345

25

Event
Capturing


Event order starts with the outer most
element in the DOM



The webpage then begins working its way
inward to the HTML element the event took
place on.



Event listeners registered for this phase must
handle the event before it reaches its target.

CSE 3345

26

Event
Bubbling


Works in the opposite manner of
event

capturing
.



A webpage starts looking for event handlers on
the targeted html element (where the event
occurred) and then bubbles up to the top of the
document.



Event listeners registered for this phase must
handle the event after it has reached its target.

CSE 3345

27

W3C Model


Allows developers to decide how event order
should be handled.



Combines both
event capturing

and
event
bubbling
.

CSE 3345

28

CSE 3345

29

W3C Event Model

Target Phase


Handling the event must happen when the
event reaches the target.

Specifying which event order


When using the
addEventListener
()

method,
you can specify the event order with the
useCapture

parameter.



useCapture

=== true
will specify the event
order to be
capture
.



useCapture

===
false
will
specify the event
order to be
bubble
.


CSE 3345

31

Event Order Demo


http://jsfiddle.net/blinkmacalahan/jLb6d/5/

CSE 3345

32

Bubble is used more often than
capture


In practice people rarely use the capture
phase, but there are still times when it might
be useful.

CSE 3345

33

Default Events Handler


Some elements have default event handlers:


<a>

navigates to specified
href
/anchor


<input type=“submit”>
submits a form for you


<labels>
give focus to the corresponding input
element

CSE 3345

34

What if I want to stop default
handlers?


It is possible to stop the default action of an
element in your event handler.



Unfortunately, depending on how you
registered your event handler there are
different ways to handle it.

CSE 3345

35

Stop default actions for
inline

events

1.
Use the return value of
false

in your inline
event handler to prevent the default event
from occurring.


2.
Using the
Event

interface object, call the
preventDefault
()

method.

CSE 3345

36

Example 1: Stopping default action for
inline

events

var

links
=

document
.
getElementsByTagName
(
"a"
);

for

(
var

i
=
0
;

i
<
links
.
length
;

i
++)

{


links
[
i
].
onclick

=

function

(
e
)

{


alert
(
"NOPE! I won't take you there!, I'm returning false"
);


return

false
;


};

}

CSE 3345

37

Example 2: Stopping default action for
inline

events

var

links
=

document
.
getElementsByTagName
(
"a"
);

for

(
var

i
=
0
;

i
<
links
.
length
;

i
++)

{


links
[
i
].
onclick

=

function

(
e
)

{


alert
(
"NOPE! I won't take you there!,
I’m calling
preventDefault
()"
);


e.preventDefault
();


};

}

CSE 3345

38

Stop default action for
DOM 2

events


Using the
Event

interface object, call the
preventDefault
()

method
.



Returning
false

has
no affect
.

CSE 3345

39

Example 1: Stopping
default action for
DOM 2

events

var

links
=

document
.
getElementsByTagName
(
"a"
);

for

(
var

i
=
0
;

i
<
links
.
length
;

i
++)

{


links
[
i
].
addEventListener
(
"click"
,

function

(
e
)

{


alert
(
"NOPE! I won't take you there! I'm calling
preventDefault
()"
);


e
.
preventDefault
();



},

false
);

}

CSE 3345

40

Return
false

vs.
preventDefault
()


Anytime you call
return

in a method, the
method stops execution and exits the method.



So depending on where you return, using
return false

might skip code. Could be a pro or
con.



Using
preventDefault
()

doesn’t immediately
exit the method so all code will execute.

CSE 3345

41

What if I want to stop event bubbling?


While handling an event, it is possible to
prevent ancestor event handlers from
receiving events by cancelling the bubble.



Use the
Event

interface’s
stopPropagation
()
method.

CSE 3345

42

Stop bubbling example

div
.
addEventListener
(
'click'
,

function
(
e
)

{


console
.
log
(
"I'm going to prevent this event from bubbling up!!!"
);


e
.
stopPropagation
();


}

},

false
);

CSE 3345

43

JS Events Outline


About Events


Introduction


Registering events


Getting information from events


Event order/phases


Preventing default action


Preventing bubble


Events in detail


Click


Keyboard


Mouse



Quickfacts

about click events


A
click

event is fired only if a
mousedown

AND
mouseup

event happen on an element.



That means if you press down on an element and
then move your mouse off the element and
release no
click

event will happen.



If you press down outside an element and then
move your mouse onto the element and release
no
click

event will happen.

CSE 3345

45

Keyboard events


You can register events for keyboards and detect
keydown
,
keypress
, and
keydown
.



keydown



fires when the user depresses a key. It
repeats while the user keeps the key depressed.



keypress



fires when an actual character is being
inserted ($, %, ^). Repeats while key is depressed.



keyup



fires when the user releases a key

CSE 3345

46

Keyboard events


Use the
Event

property
which

to determine
which key was pressed.



which

returns a char code value, not a string.



Use
String.fromCharCode
()

to convert the
which

char code into a string.

Keyboard event example

document
.
body
.
onkeydown

=

function
(
e
)

{


console
.
log
(
"key pressed on body is "

+

String
.
fromCharCode
(
e
.
which
));

}

CSE 3345

48

Mouse Events

1.
Mousedown

2.
mouseup


3.
click

4.
dblclick

5.
mousemove

6.
mouseover

7.
mouseout

CSE 3345

49

Dblclick


This event is rarely used



If you decide to use it, you should
never

register both a
click

and
dblclick

event
handler on the same element.



Using
click

and
dblclick

makes it almost
impossible to figure out what the user did.



CSE 3345

50

Mousemove


m
ousemove

is a great event, but care must be
taken when using it.



It takes system time to process all
mousemove

events, and this event is fired every time you
move one pixel.



Only registered
mousemove

when you need it
and remove it when you’re done.

CSE 3345

51

Mouseout

and
Mouseover


These events can be confusing



Events may fire at unexpected times with
confusing values for the
target

property.



My advice is to use
jQuery

to handle these
events.


CSE 3345

52

CSE 3345

53

After adding a
mouseover

event handler to the div with id=“
ev3
”,
a
mouseover

event
will fire when moving from
ev3

to
ev4

and
then again from
ev4

to span.

CSE 3345

54

This happens due to event bubbling, the
mouseover

event
happens on
ev4
, but
ev4

has no
mouseover

event so it bubbles
up to
ev3
.

Misleading target value


In the previous example, the
target

of the
event was
ev4
.



In the next example, the
target

will be
ev4

as
well.

CSE 3345

56

Moving from the
span

element into the
ev4

element causes a
mouseover

event to happen with the target equal to
ev4
.

How do were determine where the
mouse came from?


W3C added the

relatedTarget

property to
mouseover

and
mouseout

events.



This
contains the element the mouse came
from in case
of
mouseover
, or the element it
goes to in case of

mouseout
.

Finding the right layer for
mouseout

and
mouseover


Event bubbling causes event handlers to be
fired at times when you haven’t actually left a
layer.

CSE 3345

58

Finding the right layer

CSE 3345

59

Finding the right layer


Using the
target

and
relatedTarget

properties of an event, you can determine
when to correctly handle a
mouseout

event
for a layer.

CSE 3345

60

Finding the right layer example

parent
.
onmouseout

=

function
(
e
)

{



if

(
e
.
target
.
id
!=

'parent'
)

return
;



var

relTarget

=

e
.
relatedTarget
;



while

(
relTarget

!=

null
&&

relTarget

!=

e
.
target

&&





relTarget
.
nodeName

!=

'BODY'
)




relTarget
=

relTarget
.
parentNode



if

(
relTarget
==

e
.
target
)

return
;



console
.
log
(
"we have
moused

out of the parent node element





and no other layer, we found the right layer!!!"
);


}

CSE 3345

61

Other Cool Mouse tricks


Figure out which mouse button was clicked:


Use the
button

property of an
mouse

event
:


0 is the left button


1 is the middle button


2 is the right button

CSE 3345

62

Get mouse coordinate


On the mouse event you can use the following
properties:

1.
clientX



the horizontal coordinate relative to the
viewport (browser window).

2.
clientY



the vertical coordinate relative to the
viewport (browser window).

3.
screenX



the horizontal coordinate relative to
the origin of the screen (your monitor).

4.
screenY



the vertical coordinate relative to the
origin of the screen (your monitor)

CSE 3345

63

Your turn!


Create event handlers to allow dragging of an
element across the screen.



Don’t be wasteful and have a handler for
mousemove

when you don’t need one.

CSE 3345

64

Event References


Handling events with javascript



QuirksMode

DOM Events



W3C



Capture
vs

Bubble Mode


CSE 3345

65