Module: M3-R5: Python Programming
Chapter: Ch1 Computer Intro
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