Loading lesson path
Concept visual
Start at both ends
HTML events are things that happen to HTML elements.
HTML DOM allows JavaScript to react to HTML events:
Often, when events happen, you may want to do something. When JavaScript is used in HTML pages, JavaScript can react on events. JavaScript lets you execute code when events are detected. HTML allows event handler attributes, with JavaScript code, to be added to HTML elements.
< element event = ' some JavaScript ' >
< element event = " some JavaScript " > In the following example, an onclick attribute (with code), is added to a <button> element:
Formula
< button onclick ="document.getElementById('demo').innerHTML = Date()"> The time is?</button >In the example above, the JavaScript code changes the content of the element with id="demo". In the next example, the code changes the content of its own element using this.innerHTML
Formula
< button onclick ="this.innerHTML = Date()"> The time is?</button >JavaScript code can often be several lines long. It is more common to use the event attribute to call a function:
<button onclick="displayDate()">The time is?</button> <script>
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}</script>
Here is a list of some common HTML events:
The user moves the mouse over an HTML element onmouseout The user moves the mouse away from an HTML element onkeydown