JS Events
1. JS Can React to HTML Events
- HTML events are "things" that happen to HTML elements.
- JavaScript lets you execute code when events are detected.
- An HTML event can be something the browser does, or something a user does.
Syntax:
<[element] [event name]="(JavaScript code)">
Example:
<!-- executes some javascript code or calls javascript function -->
<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>
<button onclick="displayDate()">The time is?</button>
<!-- changes the content of its own element -->
<button onclick="this.innerHTML = Date()">The time is?</button>
<!-- changes the style of its own element -->
<span onmouseover="this.style.color='red'" onmouseout="this.style.color='black'">Mouse over me!</span>
2. HTML Events
Event | Description |
---|---|
onchange | An HTML element has been changed |
onclick | The user clicks an HTML element |
onmouseover | The user moves the mouse over an HTML element |
onmouseout | The user moves the mouse away from an HTML element |
onkeydown | The user pushes a keyboard key |
onload | The browser has finished loading the page |
..... | ... |
Complete list of HTML Events: HTML DOM Events