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 two events are always used together to create a hover-and-restore effect:

<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"

Note that CSS properties with hyphens (like background-color) become camelCase in JavaScript (backgroundColor). This is because hyphens are not valid in JavaScript property names.

Changing text with innerHTML

innerHTML lets you replace the text (or HTML) inside an element. This is useful for updating messages, labels, or any text content in response to a user action:

<p id="msg">Click the button below.</p>
<button onclick="showMessage()">Click me</button>

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

The onclick event

onclick runs JavaScript when the user clicks an element. It works on buttons, links, images, and other elements. Like onmouseover, it calls a function defined in the <script> block:

<button onclick="changeColour()">Change colour</button>

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

Writing and calling functions

A JavaScript function is a named block of code. You define it once and call it from any event handler. The structure is always:

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

To call a function from an event handler, write its name followed by () — the brackets are required and tell JavaScript to actually run the function:

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