Javascript Notes – DOM Events

Events are actions taken by the user, not things that are executed on pageload. For example:

  • clicking on something
  • hovering over a link
  • dragging and dropping
  • pressing keys

In other words, events add interactivity. The way that this works roughly is that we select an element and then add an event listener.

.addEventListener(event, function)

Here is a quick sample where we just create a console log when a button is clicked:

Here is another example where we change the content of a paragraph when a button is clicked:

You do not have to use an anonymous() function, you can also create a named function like this:

Common event include the following:

  • click
  • mouseover
  • dblclick
  • keypress
  • drag

There are over 200 recognized events. A full list of events is available on MDN Docs.

+ There are no comments

Add yours