JavaScript Events

Objectives

  • Attach event handlers to DOM elements
  • Modify the DOM in response to an event
  • Use callbacks in methods like addEventListener
  • Explain the difference between this and event.target in event listeners
  • Explain the difference between window.onload and DOMContentLoaded, and use these to add event listeners

What are events?

  • Signals that notify your code that something interesting has happened
  • Attach to DOM nodes
  • Provide interactivity on the page

Events can't stop, won't stop

Try this out in your browser console:

monitorEvents(window)

What are events?

When ________ happens, do _____________.

What are some examples?

dblclick

click

keypress

focus

blur

submit

and many, many more...

load

element.addEventListener(event, eventHandler, false);

Basic Syntax

When ________ happens, do _____________.

Exercise

  1. Create a new HTML file, and inside of the HTML add a button.
  2. Create a new JS file, and link it to your HTML.
<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Events!</title>
    </head>
    <body>
        <button> Click me fool </button>
        <script src="main.js">
    </body>
</html>
// main.js

addEventListener("click", function() {
    alert("You clicked on the page!");
});
<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Events!</title>
    </head>
    <body>
        <button> Click me fool </button>
        <script src="main.js">
    </body>
</html>
// main.js

var button = document.querySelector("button");

button.addEventListener("click", function(){
    alert("SOMEONE CLICKED THE BUTTON!!");
});
<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Events!</title>
    </head>
    <body>
        <button> Click me fool </button>
        <script src="main.js">
    </body>
</html>
// main.js

var button = document.querySelector("button");

button.addEventListener("click", function(){
    alert("SOMEONE CLICKED THE BUTTON!!");
});
// removing an event

button.removeEventListener("click");
// callback MUST be named!

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Events!</title>
    </head>
    <body>
        <button> Click me fool </button>
        <script src="main.js">
    </body>
</html>
var button = document.querySelector("button");

function clickAlert() {
    alert("SOMEONE CLICKED THE BUTTON!!");
}

button.addEventListener("click", clickAlert);
button.removeEventListener("click", clickAlert);
var button = document.querySelector("button");

function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
}

button.addEventListener("click", once);

What does this do?

Learning Objectives

  • Attach event handlers to DOM elements
  • Modify the DOM in response to an event
  • Use callbacks in methods like addEventListener
  • Explain the difference between this and event.target in event listeners
  • Explain the difference between window.onload and DOMContentLoaded, and use these to add event listeners
// The Event Object

function logText(event) {
  console.log(event.target.innerText);
}
window.addEventListener("click", logText);

Create a variable called clickCount in your js file, and set it equal to 0. Modify your event listener so that every time you click on the button, the clickCount increments, and the button text changes to show the user how many times the button has been clicked.

Exercise, in pairs

event.target vs this

event.target
this
<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Events!</title>
    </head>
    <body>
        <button> Click me fool </button>
        <script src="main.js">
    </body>
</html>
var button = document.querySelector("button");
function logText(event) {
  console.log(event.target.innerText);
}
button.addEventListener("click", logText);
var button = document.querySelector("button");
function logText() {
  console.log(this.innerText);
}
button.addEventListener("click", logText);
<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Events!</title>
    </head>
    <body>
        <div>
          <p>I'm a p tag!</p>   
          <button>I'm a button!</button>
        </div>

        <script src="main.js">
    </body>
</html>
var div = document.querySelector("div");
function logText() {
  console.log(this.innerText);
}
div.addEventListener("click", logText);
var div = document.querySelector("div");
function logText(event) {
  console.log(event.target.innerText);
}
div.addEventListener("click", logText);

So...what's the diff?

- reference to the element attached to listener

- reference to the element firing the event

event.target
this

Exercise, whiteboards

var foo = document.getElementById("foo");

foo.addEventListener('click', someFunction);

// Then I click on the button
<div id="foo">
    <button> Click </button>
</div>

What is `event.target` and what is `this`?

Attaching listeners to multiple elements

Listen for a click event on all <p> tags

for loop

listener on containing element

window.onload vs DOMContentLoaded

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Events!</title>
      <script src="main.js">
    </head>
    <body>
        <img src="https://media.giphy.com/media/qANK09622WD5u/giphy.gif" alt="">
    </body>
</html>
var img = document.querySelector('img');

function imgLog() {
  console.log("You moused over Mega Man!");
}

img.addEventListener('mouseover', imgLog);
function imgLog() {
  console.log("You moused over Mega Man!");
}

window.onload = function() {
  var img = document.querySelector('img');
  img.addEventListener('mouseover', imgLog);
}
function imgLog() {
  console.log("You moused over Mega Man!");
}

document.addEventListener("DOMContentLoaded", function() {
  var img = document.querySelector('img');
  img.addEventListener('mouseover', imgLog);
});

window.onload vs DOMContentLoaded

A more clear example

Event Propogation

Hilarious (and informative) blog

As pairs 

Stoplight Exercise

Made with Slides.com