1. Events

2. Javascript Lets you make your pages interactive
When you browse the web, your browser registers different types of events
During normal execution a large number of events occur
Using the DOM, scripts can respond to these events
Interactions create events
Events trigger code
Code responds to users

3. Understanding Events Event
Everything that happens to a web page is an event
Specific circumstance at a specific moment of time
monitored by JavaScript
Script can respond to in some way
Allows users to interact with Web pages
Events are usually triggered by user action, or in response to the completion of a task
Can also monitor events not resulting from user actions

4. Types of events UI Keyboard Mouse load unload error resize scroll
input
keydown
keyup
keypress
Mouse
click
dblclick
mousedown
mouseup
mousemove
mouseover
mouseout

5. Types of events Focus Form Mutation input focus DOMNodeInserted change
blur
focusIn
focusOut
tabindex
accesskey
Form
input
change
submit
reset
Mutation
DOMSubtreeModified
DOMNodeInserted
DOMNodeRemoved
DOMNodeInsertedIntoDocument
DOMNodeRemovedFromDocument

6. Types of events Mobile HTML 5 cut DOMContentLoaded copy hashchange
paste
select
HTML 5
DOMContentLoaded
hashchange
beforeunload

7. Understanding Mouse Events
Rollover effect
Occurs when mouse moves over an element
mouseover event
Occurs when mouse passes over an element
mouseout event
Occurs when mouse moves off an element
Drag and Drop
mousedown and mouseup events
mousedown event occurs when pointing to an element while holding the mouse button down
mouseup event occurs when releasing the mouse button

8. Drag and Drop Event Mouse Click Dblclick Mousedown Mouseup Mousemove
Mouseover
mouseout

9. Events related to HTML tags

10. Event handlers
When an event occurs (fires or is raised), the browser places data about the event into the Event Object
Where the mouse pointer was on the screen at the time of the event
Which mouse buttons were pressed
Event object is very active
Event handler
Code that executes in response to a specific event
Events trigger functions or script to execute
Ex: when a click event fires, it could execute script to make the selected item larger

11. Triggering Javascript Code
Select the element (s) for the script to respond to
Input textbox
Indicate which event on the selected element(s) will trigger the response (Binding)
When user moves out of textbox (blur)
State the code you want to run when the event occurs
Function that checks to be sure user entered a value between 0 and 5

12. Binding Events to Handlers
HTML Event Handlers
Tightly coupled – user initiated
DOM Event Handlers
Traditional
Can only attach a single function (named or anonymous) to any event
Event Listeners
One event can trigger many functions

13. HTML Event Handlers
Event being captured is preceded with the word on, and is assigned to the function to execute
<input type=“button” onclick=“window.alert(‘hi’);” />

14. DOM Event Handlers Separates HTML and script
Assign the function to the event handler of an object
Function can be named or anonymous 14

15. Named DOM Event Handlers
No parentheses are used as you do not want the function to run at this point – just want to reference it
var x = document.getElementById(“pwd”);
x.onblur = validate; 15

16. Anonymous DOM Event Handlers
document.getElementById(“pwd”).onblur=function() { validate(); } document.getElementByTagName(“body”).onload=function() window.alert(“hi”);

17. Event Listeners Can execute more than one function at a time Syntax:
element.addEventlListener(‘event’, function, flow)
Element: DOM element Event: event to bind in quotes
Function: Name of function to execute
Flow: capture timing – Boolean –set to false

18. Event Listeners using single functions
<input type=“text” id=”pwd” value=“” /> function validate() { // statements go here } var x = document.getElementById(“pwd”); x.addEventListener(‘blur’,validate,false);

19. Event Listeners executing multiple functions
<input type=“text” id=”pwd” value=“” /> function validate() { editUserName(); editPwd(); } var x = document.getElementById(“pwd”); x.addEventListener(‘blur’,validate,false);

20. Event Listeners using anonymous functions
<input type=“text” id=”pwd” value=“” />
var x = document.getElementById(“pwd”);
x.addEventListener(‘blur’,function(){
editUserName();
editPwd();
},false);

21. Event Listeners passing parameters
var x = document.getElementById(“pwd”);
x.addEventListener(‘blur’,function(){
editPwd(this); },false);
var x = document.getElementById(“pwd”);
x.addEventListener(‘blur’,function(){
editPwd(x);
},false);
var x = document.getElementById(“pwd”);
x.addEventListener(‘blur’,function(){
editPwd(document.getElementById(“pwd”);
},false);

22. Review What types of events occur on a web page
How many are triggered in a drag and drop operation?
What is the difference between
An HTML event handler and a DOM event handler
An event handler and an event listener?
Does a DOM event handler use parenthesis when referring to the event to handle?
Can a DOM event handler be anonymous?
Can a DOM event handler execute more than 1 function?
Can an event listener execute more than 1 function?

23. Event Listeners for Older I.E. Browsers
Workaround for browsers that are not DOM LEVEL 2
object.attachEvent(onevent, function);
where object is the object receiving the event,
onevent is the text string of the event handler
function is the function that runs in response to the event.

24. Event Listeners
Use OBJECT DETECTION to see if the browser can discover the event
Test to see if browser recognizes the addEventListener function, if not, use attachEvent
var x = document.getElementById(“pwd”);
If (x.addEventListener)
x.addEventListener(‘blur’,validate,false);
else
x.attachEvent(‘onblur’,validate);

25. Event Listeners To remove an event listener
var x = document.getElementById(“pwd”);
x.addEventListener(‘blur’,validate,false); .
x.removeEventListener(‘blur’,validate,false);
For older I.E, use detachEvent()

26. Event Flow The order in which events fire is called event flow
Events can flow in 2 directions
HTML elements nest inside other HTML elements
If you hover/click on a child, you are also hovering/clicking on its parent
Why does it matter
When code has an event handler on an element AND also on one of its ancestors or descendents

27. Event Bubbling
Javascript can trigger events on the parents of the element it sits inside
Default
Boolean: false
DOCUMENT
<html>
<body>
<p>
<a>
var x = document.getElementById(“pwd”);
x.addEventListener(‘blur’,function(){
editPwd(this);}, false);

28. Event Capture
Javascript can trigger events on the parents of the element first, and then drill down to the actual element
Boolean: true
DOCUMENT
<html>
<body>
<p>
<a>
var x = document.getElementById(“pwd”);
x.addEventListener(‘blur’,function(){
editPwd(this);}, true);

29. Lets try it
event-flow.html
event-flow.js

30. jQuery Events

31. jQuery Listener using named function
Identify the element using jQuery syntax
Using dot notation, specify the type of event to listen for (attach the event)
Provide the code to execute when the event fires $(‘#btn’).click(slideShow);
NOTE: The function will NOT have parentheses, sort of like the DOM event handler used in Javascript
Always wait for $(document).ready to finish

32. jQuery Listener using anonymous function
Instead of providing the function to execute when the event fires, replace that with an anonymous function
$(‘#btn’).click(function(){
//code goes here
});

33. jQuery on method
The .on() method attaches an event handler to an element
More flexible –can pass data
Syntax:
$(element).on(“event”, functionName)
Example1 : using a named function
$( "button" ).on( "click", notify );
Example2 : using an anonymous function
$( "button" ).on( "click", function(){
//code goes here
} );

34. jQuery on method – passing data
To pass data to a named function, using Javascript Object Notation
Syntax:
$(element).on(“event”, {data}, functionName)
Example :
$( "button" ).on( "click", {name: “john”}, notify );
If data is passed to the function, the function receives that data as a property of the event object. The property is the data property
function notify(event) {
alert (“ sent to: “ + event.data.name); }

35. jQuery on method – passing data
To pass data to a named function, use a variable containing JSON data
Syntax:
$(element).on(“event”, {data}, functionName)
Example :
var x = {name: “john”};
$( "button" ).on( "click",x, notify );
If data is passed to the function, the function receives that data in an event objects data property
function notify(event) {
alert (“ sent to: “ + event.data.name); }

36. jQuery on method
The .on() method can also attach an event handler to one or more events
$(‘#btn’).on(‘click dblclick’, slideShow);
The .on() method can attach an event handler to one or more elements - delegates
$(‘div’).on(‘click’, ‘p’, slideShow);
$(‘div’).on(‘click’, ‘p’, {type:’cat’}, slideShow);

37. jQuery trigger method Trigger is a way to fire an event manually
$("button").click(function(){     $(“object").trigger(“event"); });

38. Event object

39. Event object
When a browser fires an event, information about the event is recorded in an object called an event object
Contains information about the event
Element that triggered it
Coordinates of the mouse
Key that was pressed

40. Event Object
The event object is available to the function assigned to handle the event
Parameter name is typically e or evt
The event object has many properties, which vary from browser to browser

41. Event Object Properties
The event object has many properties, which vary from browser to browser

42. Event Object Properties
To determine where the mouse is on the screen. Use pageX, pageY, screenX, screenY properties
Important to know where mouse pointer is located for certain applications

43. Javascript Event Object without other parameters
<input type=“text” id=“pwd” value=“” />
<input type=“text” id=“age” value=“” />
<script>
var x = document.getElementById(“pwd”);
x.addEventListener(‘blur’,validate,false);
var y = document.getElementById(“age”);
y.addEventListener(‘blur’,validate,false);
function validate(e) {
var target = e.target; // gets element associated with event }

44. Javascript Event Object with other parameters
<input type=“text” id=“pwd” value=“” />
<script>
var x = document.getElementById(“pwd”);
x.addEventListener(‘blur’, validate(e,this),false);
function validate(e,pwd) // gets event & element {
var target = e.target; }

45. Stopping events
Sometimes you do not want to proceed with a normal behavior for an element
Stop a submit if the form isn’t filled out properly
preventDefault() function stops the event from proceeding
<a id=“menu” href=
Can also issue a return statement with the Boolean value false