JS Events
JavaScript Events
A JavaScript Event is the way to envoke or call a function. In very simple words an event makes your web page interactive.
An event can be triggered by simply loading your web page or hovering over an element or an image. The ways to trigger an event are many.
Below we'll display a few excamples and the most popular JavaScript events.
The syntax of a javascript event is this:
<element event="JavaScript">
e.g.<div onclick="pop-up()"> Click for a pop-up </div>
In our previous tutorials we have used extensively the onclick event which executes code when a button (or any other element is targeted) is clicked.
Example:
<button id="target" onclick="myFunction()">Click me</button>
<script>
function myFunction() {
var text = "I'm Clicked!";
document.getElementById("target").innerText = text;
}
</script>
The event triggers work in a similar way and can be very useful in creating a fully interactive web page.
Some more events are:
- onkeyup when a key is released a function is called
- onload when an elemnt or a document is loaded
- onkeypress when a key is pressed an action is triggered
- onmouseover when you mouse over an element
- onreset when you reset usually a form an even is triggered
- onsubmit when you submit a form an event is triggered
- onscroll when you scroll on a page an event/s is/are triggered
- oninput when you provide input, usually through a form, an event is triggered
There are more events that you can use and a comprehensive list can be found here.
