Chapter 6: Events

Question 1

What are examples of UI events

Answer 1

load
unload
error
resize
scroll

Question 2

What are examples of keyboard events

Answer 2

keydown
key up
keypress

Question 3

What are examples of mouse events

Answer 3

click
dblclick
mousedown
mouseup
mousemove
mouseover
mouseout

Question 4

What are examples of focus events

Answer 4

focus / focusing

blur / focusout

Question 5

What are examples of form events

Answer 5

input
change
submit
reset
cut
copy
paste
select

Question 6

What are mutation events

Answer 6

These occur when the DOM structure of a page changes by a script (to be replaced by mutation observers)

Question 7

What do we mean by saying an event fired/raised?

Answer 7

It happened.

Question 8

What do we mean by events trigger scripts

Answer 8

events find the specified script to run

Question 9

What are the three ways to bind an element?

Answer 9

HTML events handlers (nowadays bad practice), dom event handlers and dom level 2 event listeners

Question 10

What advantages does event listeners have over DOM event handlers?

Answer 10

Allows you to have multiple functions linked to one event.

Event listers are no support in IE8 and under.

Question 11

What’s the syntax for HTML event handlers?

NB: We don’t write these nowadays

Answer 11

these are written as an element attribute and generally preceded by the word on

Question 12

How do you write a DOM event handler

Answer 12

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

Question 13

How do we write an event listener

Answer 13

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);

Question 14

How do you pass parameters to functions used for an event?

Answer 14

You need a work around and that’s to wrap the function in anonymus function

elUsername.addEventListener(‘blur’, function(){
checkUsername(5);
}, false);

Question 15

How do we support IE5-8 that don’t use addEventListerner

Answer 15

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);
} );
}

Question 16

What is event flow?

Answer 16

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

Question 17

What is the event object?

Answer 17

When an event occurs, the event object tells you information about the event and the element t happened on. Like a global object.

Question 18

What can e stand for?

Answer 18

event or error object

Question 19

What are properties and methods of event object?

Answer 19

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

Question 20

How do we get the event object in IE5-8?

Answer 20

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;
}
}

Question 21

How can we improve performance

Answer 21

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?

Question 22

How can we change an events default behaviour?

Answer 22

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;
}

Question 23

What does stopPropagation() do?

Answer 23

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;
}

Question 24

What’s the best way to determine what element an event triggered on

Answer 24

event target property.

An alternative is to use the this keyword (however the event object is preferred method)

Question 25

What different types of events can we respond to

Answer 25

DOM Events
HTML5 Events
BOM Events

Question 26

What element should we attach UI events to?

Answer 26

window

(some UI events now recommend using other elements e.g. document or body, but this can cause problems across browsers

Question 27

What should you consider when using resize and scroll events?

Answer 27

Browsers repeatedly fire the event as it occurs so if you’re running complex code it can slow down the experience

Question 28

How are the focus and blur events coomonly used on forms

Answer 28

Show tips and feedback as elements interacted with

Trigger form validation

Question 29

What’s the difference between:
screen
page
client

Answer 29

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;

Question 30

Does IE8 support input event?

Answer 30

No.

Use keydown instead.

Question 31

What are differences between keypress and keydown

Answer 31

Keypress - when it ads characters to screen
keydown - any key

If pressed down or held down, causes event to repeatedly fire

Question 32

When does key up event fire

Answer 32

After a character appears on screen

Question 33

How can we tell what key was pressed?

Answer 33

keyCode property - returns ASCII

Use string method fromCharCode(event.keycode) to show lowercase/key character that it would display

Question 34

When do mutation events happen?

Answer 34

When the DOM is changed.

These trigger a mutation event

DOMNodeInserted
DOMNodeRemoved
DOMSubtreeModified
DOMNodeInsertedIntoDocument
DOMNodeRemovedFromDocument

Question 35

What are three popular HTML5 BOM events

Answer 35

DOMContentLoaded
hashchange
beforeunload