Chapter 6: Events Flashcards
What are examples of UI events
load unload error resize scroll
What are examples of keyboard events
keydown
key up
keypress
What are examples of mouse events
click dblclick mousedown mouseup mousemove mouseover mouseout
What are examples of focus events
focus / focusing
blur / focusout
What are examples of form events
input change submit reset cut copy paste select
What are mutation events
These occur when the DOM structure of a page changes by a script (to be replaced by mutation observers)
What do we mean by saying an event fired/raised?
It happened.
What do we mean by events trigger scripts
events find the specified script to run
What are the three ways to bind an element?
HTML events handlers (nowadays bad practice), dom event handlers and dom level 2 event listeners
What advantages does event listeners have over DOM event handlers?
Allows you to have multiple functions linked to one event.
Event listers are no support in IE8 and under.
What’s the syntax for HTML event handlers?
NB: We don’t write these nowadays
these are written as an element attribute and generally preceded by the word on
How do you write a DOM event handler
you select the element that you want to attach the code to. then attach the event plus the code to run
e. g.
element. onevent = functionName;
switch.onclick = replaceAll;
Notes: when attaching a function we don’t call it, we’re a assigning it. You can only attach one function to an event handler
How do we write an event listener
we use the addEvenetListener method to an element. This takes three parameters, the event, a function, a boolean
e. g. element.addEventListener(‘event’, functionName, Boolean)
el. addEventListener(‘blur’, checkName, false);
How do you pass parameters to functions used for an event?
You need a work around and that’s to wrap the function in anonymus function
elUsername.addEventListener(‘blur’, function(){
checkUsername(5);
}, false);
How do we support IE5-8 that don’t use addEventListerner
They have an alternative method called attachEvent
So we can write an if else
if (elUsername.addEventListerner) {
elUsername.addEventListener('blur', function(){
checkUsername(5);
}, false);
} else {
elUsername.attachEvent('onblur', function(){
checkUsername(5);
} );
}
What is event flow?
Elements ar nested inside of other elements. When you click on an element it can also affect elements above it.
If an element has an event handler and one of its ancesytrors or descendants also does, we have a potential clash.
There to kinds
event bubbling - default > specific node to least
event capturing > least specific node topmost specific
What is the event object?
When an event occurs, the event object tells you information about the event and the element t happened on. Like a global object.
What can e stand for?
event or error object
What are properties and methods of event object?
target - most specific element
type - type of event rised
cancelable - Whether you can cancel default behaviour of an element
preventdefault() - stop default behaviour
stopPropagation() - stop event flow from occuring
Note: IE5-8 had quite different names for these properties
How do we get the event object in IE5-8?
The event object isvavaiable as a child of the window object
We write a function to check in case the event object has been passed to the function
function checkUsername(e) {
if(!e) {
e = window.event;
}
}
How can we improve performance
Through event delegation.
Adding new DOM elements
Solves limitations with this keyword
Simplifies code
We can event listeners on parent object, not the individual child objects?
How can we change an events default behaviour?
preventDefault().
Useful for using js for form validation; stopping links from going to new page
IE5-8 don’t support this but do use returnValue property
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
What does stopPropagation() do?
Stop event from bubbling up,and triggering on unwanted elements.
IE5-8 have the cancelBubble property.
if(event.stopPropagation) {
event.stopPropogation();
} else {
event.cancelBubble = true;
}
What’s the best way to determine what element an event triggered on
event target property.
An alternative is to use the this keyword (however the event object is preferred method)
What different types of events can we respond to
DOM Events
HTML5 Events
BOM Events
What element should we attach UI events to?
window
(some UI events now recommend using other elements e.g. document or body, but this can cause problems across browsers
What should you consider when using resize and scroll events?
Browsers repeatedly fire the event as it occurs so if you’re running complex code it can slow down the experience
How are the focus and blur events coomonly used on forms
Show tips and feedback as elements interacted with
Trigger form validation
What’s the difference between:
screen
page
client
These indicate the position of the cursor in:
screen - device screen
page - where about’s on the page user is
client - viewport/browser window
These use X and Y additions to provide info e.g. screenX, clientY
The positions are all properties of the event object. So you’ld pass the event as a parameter
cursor.value = event.screenY;
Does IE8 support input event?
No.
Use keydown instead.
What are differences between keypress and keydown
Keypress - when it ads characters to screen
keydown - any key
If pressed down or held down, causes event to repeatedly fire
When does key up event fire
After a character appears on screen
How can we tell what key was pressed?
keyCode property - returns ASCII
Use string method fromCharCode(event.keycode) to show lowercase/key character that it would display
When do mutation events happen?
When the DOM is changed.
These trigger a mutation event
DOMNodeInserted DOMNodeRemoved DOMSubtreeModified DOMNodeInsertedIntoDocument DOMNodeRemovedFromDocument
What are three popular HTML5 BOM events
DOMContentLoaded
hashchange
beforeunload
