DOM EVENTS

Events are normally used in combination with functions, and the function will not be executed before the event occurs (such as when a user clicks a button).

onclick Event Type

The onclick event is the most frequently used event type which occurs when a user clicks the button, some type of event will happen.

Example :

<p>Click the following button and see result</p>      
<form>
   <input type = "button" onclick = "sayHello()" />
</form>

function sayHello() {
   console.log("Hello World"); // Prints: Hello World
}

onmouseover and onmouseout

These two event types will help you create nice effects with images or even with text as well. The onmouseover event triggers when you bring your mouse over any element and the onmouseout triggers when you move your mouse out from that element.

Example :

<div onmouseover = "over()">
         <h2> Hover on me </h2>
      </div>

function over() {
  console.log("Mouse Over"); // Prints: Mouse Over
}

onsubmit Event Type

onsubmit is an event that occurs when you try to submit a form.

Example :

<form onsubmit="myFunction()">
    <input type="text" name="fname">
    <input type="submit" value="Submit">
</form>

function myFunction() {
  alert("The form was submitted"); // Outputs: The form was submitted
}