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">
  <a href="">I'm an anchor tag!</a>
  <div>Divs on divs on divs</div>
  <button>Click Me!</button>
    <input type=text />
    <input type=submit />

Different Types of Events

And many, many more...

The Structure of the Event Listener in JavaScript


Event Listeners using the DOM Queries and JS

 Previous Next