Javascript Events

Events: Make It Happen

Events

Events make web pages more interactive. It occurs when the browser does something or when the user engages the web page.

It's the browser's way of saying, "Hey, this just happened."

HTML Events

HTML allows event handlers to be added to HTML elements to make it interactive. Events are normally used in combination with functions and will be triggered when the event occurs.

HTML

Javascript

function name(){

//instructions

}

HTML Events

Mouse

onclick

ondblclick

onmousedown

onmouseup

onmousemove

onmouseover

onmouseout

Form

onblur

onfocus

onfocusin

onfocusout

Drag

ondrag

ondragend

ondragover

ondragleave

Keyboard

onkeydown

onkeypress

onkeyup

Some examples...

Let's Try One Together

Adding an event to the button element

Event Listeners

Adding Event Listeners is the favored way of handling events and separates Javascript from the HTML, which allows for:

Better readability
Can add many event handlers to one element
Add event listeners when you have no control over the HTML mark-up

How Events Trigger Javascript

Event handling : The steps that are involved to trigger the Javascript code.

Step 1: Select the Element

Select the element node(s) in HTML you want the script to respond to

Step 2: Specify Event

Indicate which event on the selected node(s) will trigger the response (binding an event to a DOM node)

Step 3: Call Code

State the code you want to run when the event occurs

Event Listeners

The syntax goes like this:

element.addEventListener('event', functionName);

select DOM element node to target

Event to bind nodes in quote marks (i.e. "click")

Name of function to call

Event Types

Here are a few events that occur in the browser:

load

unload

error

resize

scroll

Keyboard

keydown

keyup

keypress

Mouse

click

dblclick

mousedown

mouseup

mousemove

mouseover

mouseout

Form

input

change

submit

reset

cut

copy

paste

select

Focus

focus / focusin

blur / focusout

Let's Do an Example

Adding an event listener to a button element

Remember DOM Methods?

You'll be using most of these again...

getElementById()
getElementsByClassName()
getElementsByTagName()
createElement()
appendChild()
innerHTML
addEventListener()
querySelector()
querySelectorAll()
style

"This" Keyword

The "this" keyword refers to the element that the event is on.

Selecting Elements Using CSS Selector

querySelector() returns the first element node that matches the CSS style selector

querySelectorAll() returns a node list (all elements) that matches a specified CSS selector

Additional Resources

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
https://developer.mozilla.org/en-US/docs/Web/API/EventListener
http://www.w3schools.com/js/js_htmldom_eventlistener.asp
http://idratherbewriting.com/events-and-listeners-javascript/
Javascript & JQuery By Jon Duckett