Event Listeners

Event Listeners are a special type of function in JavaScript that waits for a specified event, and then calls a callback function after that event has been triggered

Common Usage

Event Listeners as HTML properties

The onclick property can be set on any html element.

Some elements have a default onclick. Namely <a> (anchor) tags which go to a specified page or html fragment.

There are a few ways to set the onclick property. The most common ways are inline in your HTML, or by adding an event listener to an element using DOM queries

Lab: Event Listeners on different HTML elements

Let's play around with setting event listeners on different elements!

  <!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
</head>
<body>
  <a href="">I'm an anchor tag!</a>
  <div>Divs on divs on divs</div>
  <button>Click Me!</button>
  <form>
    <input type=text />
    <input type=submit />
  </form>
</body>
</html>

Different Types of Events

And many, many more...

The Structure of the Event Listener in JavaScript

event-listener-breakdown

Event Listeners using the DOM Queries and JS

 Previous Next 

Outline

[menu]

/