Chapter 6: Events Flashcards
(35 cards)
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)
