JavaScript: Events and Mouse Handling

JavaScript: Events and Mouse Handling

What is JavaScript?

HTML defines the structure and content of a web page. CSS controls the appearance and layout. JavaScript is the third layer — it makes pages interactive. JavaScript runs directly in the browser and can respond to what the user does: moving the mouse, clicking buttons, typing text, and more.

In the N5 course, we use JavaScript to detect mouse events and update what the user sees — changing colours, text, and images without reloading the page.

How JavaScript is added to a page

JavaScript is written inside <script> tags, placed before the closing </body> tag. Event handlers are added directly as attributes on HTML elements:

<!-- The event handler calls a function when hovered -->
<button onmouseover="highlight()">Hover over me</button>

<script>
function highlight() {
  // code runs when mouse moves over the button
}
</script>

Mouse events: onmouseover and onmouseout

onmouseover fires when the mouse pointer moves onto an element. onmouseout fires when the mouse pointer moves off the element. These independent events are often used together when a hover effect needs to be reversed:

<div id="box"
     onmouseover="turnYellow()"
     onmouseout="turnWhite()">
  Hover over this box
</div>

<script>
function turnYellow() {
  document.getElementById("box").style.backgroundColor = "yellow";
}
function turnWhite() {
  document.getElementById("box").style.backgroundColor = "white";
}
</script>

Targeting elements with document.getElementById()

document.getElementById("id") finds the element with that id and returns it so you can change its properties. The id value must be in quotes and must exactly match the id attribute in the HTML.

Once you have the element, you can change:

• A style property: element.style.backgroundColor = "yellow"
• The text content: element.innerHTML = "New text"

CSS properties with hyphens (like background-color) use camelCase when accessed through element.style, so the equivalent is element.style.backgroundColor. A hyphen cannot be used inside an identifier after a dot because JavaScript treats it as subtraction. Hyphenated property names can exist elsewhere in JavaScript, but they must be accessed with bracket notation, such as object["background-color"].

Changing text with innerHTML

innerHTML lets you replace the text (or HTML) inside an element. This can update a message when the pointer moves onto an element and restore it when the pointer moves away:

<p id="msg"
   onmouseover="showMessage()"
   onmouseout="restoreMessage()">Hover over me.</p>

<script>
function showMessage() {
  document.getElementById("msg").innerHTML = "Hello, world!";
}
function restoreMessage() {
  document.getElementById("msg").innerHTML = "Hover over me.";
}
</script>

A mouse event handler can call a named JavaScript function. Define the function inside the <script> block:

function functionName() {
  // code to run goes here
}

In onmouseover or onmouseout, write the function name followed by (). The brackets tell JavaScript to run it:

<button onmouseover="highlight()">Hover</button>  <!-- correct: with () -->
<button onmouseover="highlight">Hover</button>    <!-- wrong: missing () -->