JS Course

Events

Go back

An event is something like clicking on a button, submitting a form, ... You can set a function that will be executed when an event is fired.


Linking events (HTML)

You can add them directly inside the HTML (not a good practice, but that's easy to do 😐), we are calling that inline-scripting

<button onclick="inline_event(this)" onmouseover="inline_event(this)" 
        onmouseout="inline_event(this)" onload="inline_event(this)"></button>
<form onsubmit="return inline_event(this);"></form>
<!-- ... -->

with

  • onsubmit: true if we can submit the form, false else
  • onclick: trigger function on click
  • onmouseover: trigger function on mouse entering
  • onmouseout: trigger function on mouse exiting
  • onload: trigger function once loaded
  • The list is here (W3Schools).

Linking events (JS)

You can also add events manually, in a JavaScript file

// ...
b.addEventListener("click", js_event, false)
b.removeEventListener("click", js_event, false)
// events names are: mousedown, mouseup, mouseover, mouseout, mousemove, keydown, change

Event function

It's a normal function,

  • taking e (the event that triggered the function)
  • usually calling e.preventDefault(); to tells others that your function is handling the event (and to not do the default behavior)
// function for js events
function js_event(e) {
    e.preventDefault();
    // ... your code ...
    // you may use
    e.target // get the component we clicked on
}
// function for inline events
// you can remove "this" (when calling) if you don't need "target"
function inline_event(target) {
    // the component
    console.log(target)
}