CSSE280: Events
When you browse the web your browser�Registers different types of events
Checkout the domEvents project from your Git repo
By the end of this unit you should be able to...
DOM events
The browser’s way of saying “Something just happened”
Now your script can respond to these events
What happens when an event occurs?
Different event types
Different event types
Terminology
Events fire or are raised
Events trigger scripts
Event handling
When a user interacts with the HTML on a page, three steps are involved in running some JavaScript code
Binding an event to an element
HTML event handlers: Bad practice! Avoid!!
Traditional DOM event handlers: Better than HTML event handlers
Binding an event to an element - best approach
DOM Level 2 Event Listeners: Best approach
Can also call �element.removeEventListener(‘event’, functionName [, useCapture]);
to remove an event listener
TODO
Complete the exercises in this assignment with your in-class partner.
Using parameters with event listeners
Cannot have parameters after the functionName in an event listener
el.addEventListener(‘blur’,() => {
checkUsername(5);
}, false);
Note: checkUsername(length) needs value for length parameter
The anonymous function runs when the event is raised
Event flow: 3rd argument to addEventListener()
Event flow matters when your code has event handlers
The event always starts at the root (window object), goes down until it hits the target, and then goes back up to the root
The phase where you initiate the event and the event barrels down the DOM from the root is known as the Event Capturing Phase
Up next is Event Bubbling Phase where your event bubbles back up to the root
https://www.kirupa.com/html5/event_capturing_bubbling_javascript.htm
Event flow: matters only in a few cases
<body id="theBody" class="item">
<div id="one_a" class="item">
<div id="two" class="item">
<div id="three_a" class="item">
<button id="buttonOne" class="item">one</button>
</div>
<div id="three_b" class="item">
<button id="buttonTwo" class="item">two</button>
<button id="buttonThree" class="item">three</button>
</div>
</div>
</div>
<div id="one_b" class="item">
</div>
</body>
In which phase do you handle events?
Event flow: every element is informed & notified of event
Event flow
Do you listen/respond to your event as it is goes down in the capture phase?
Do you listen/respond to your event as it climbs back up in the bubbling phase?
element.addEventListener("click", functionName, true);
https://www.kirupa.com/html5/event_capturing_bubbling_javascript.htm
The event object: its properties
When an event occurs, the event object tells you information about the event, including the element it happened on
It helps answer the questions:
See http://www.quirksmode.org/js/events_properties.html for more details
Changing default behavior
The event object has methods that change:
Some events (e.g., clicking on a link or submitting a form) take the user to another page. w3schools preventDefault()
To prevent the default behavior and keep the user on the same page, use the event object’s preventDefault() method
if(event.preventDefault){
event.preventDefault();
} else { // for IE8
event.returnValue = false:
}
Changing how ancestor/descendent responds to an event
The event object has methods that change:
Once you have handled an event using one element, you may want to stop the event from fumbling down to a descendent or bubbling up to its ancestors .
To stop the event from fumbling down or bubbling up, use the event object’s stopPropagation() method
if(event.stopPropagation){
event.stopPropagation();
} else { // for IE8
event.cancelBubble = false:
}
TODO
Consider the example application at
http://javascriptbook.com/code/c06/example.html
Discuss what events fire when the user clicks the microphone or pause button and what code runs in response to the events.
Discuss what events fire when the user types in the textbox and what code runs in response to the events.