1. The 'click' Event

<button onclick="show()">Click</button>

<script>
function show(){
  alert("Button clicked!");
}
</script>

What is this?

The onclick attribute links an HTML element to a JavaScript function. When the user clicks, the function "fires." This is how buttons, navigation toggles, and submit actions work.

2. The 'change' Event

<input type="text" 
       onchange="showValue(this.value)">

<script>
function showValue(value){
  console.log("Input changed to: " + value);
}
</script>

What is this?

The onchange event triggers when a user modifies an input (like typing and then clicking away, or selecting a dropdown). It's essential for real-time form validation.

3. The 'mouseover' Event

<p id="text" onmouseover="hover()">
  Hover over me!
</p>

<script>
function hover(){
  document.getElementById("text")
          .style.color = "red";
}
</script>

What is this?

onmouseover triggers when the mouse cursor enters the area of an element. This is used for interactive menus, tooltip reveals, and hover-state animations that CSS alone can't handle.