JS Course
Events
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)
}