Module: M2-R5: Web Design & Publishing
Chapter: Javascript
JavaScript events are actions or occurrences that happen in the browser. These events can be handled using HTML attributes or JavaScript functions.
Triggered when an element is clicked.
<!-- HTML -->
<button onclick="showMessage()">Click Me</button>
<!-- JavaScript -->
<script>
function showMessage() {
alert('Button clicked!');
}
</script>
Triggered when the mouse pointer moves over an element.
<!-- HTML -->
<p onmouseover="hoverText(this)">Hover over this text</p>
<!-- JavaScript -->
<script>
function hoverText(elem) {
elem.style.color = 'red';
}
</script>
Triggered when the mouse pointer leaves an element.
<!-- HTML -->
<p onmouseout="resetColor(this)">Move mouse away from this text</p>
<!-- JavaScript -->
<script>
function resetColor(elem) {
elem.style.color = 'black';
}
</script>
Triggered when a key is pressed down.
<!-- HTML -->
<input type="text" onkeydown="keyPressed()">
<!-- JavaScript -->
<script>
function keyPressed() {
console.log('Key pressed!');
}
</script>
Triggered when the page or an element finishes loading.
<!-- HTML -->
<body onload="pageLoaded()">
<!-- JavaScript -->
<script>
function pageLoaded() {
alert('Page has loaded!');
}
</script>
Triggered when the value of an input or select element changes.
<!-- HTML -->
<select onchange="valueChanged(this)">
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="JavaScript">JavaScript</option>
</select>
<!-- JavaScript -->
<script>
function valueChanged(elem) {
alert('You selected ' + elem.value);
}
</script>
Login with Google