Javascript events enable a dynamic interface to a webpage. These events are linked to Document Object Model (DOM) elements. Furthermore, these events are propagated upwards in the DOM from children to parent by default. Events can be bound inline or in an external script.
An HTML event can be initiated by the browser or by the user.
Here are some HTML event examples:
An HTML web page has completed loading.
An HTML input box was modified.
An HTML button was pressed.
When circumstances occur, you may feel compelled to act.
When events are identified, JavaScript allows you to run code.
HTML permits the addition of event handler attributes with JavaScript code to HTML components.
An onclick attribute (with code) is applied to a button> element in the following example:
EXAMPLE
<!DOCTYPE html>
<html>
<body>
<button onclick="document.getElementById('demo').innerHTML=Date()">The time is?</button>
<p id="demo"></p>
</body>
</html>
In the above example, the JavaScript code modifies the content of the element with the id="demo" attribute.
The code in the following example modifies the content of its own element (through this.innerHTML):
EXAMPLE
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML Events</h2>
<button onclick="this.innerHTML=Date()">The time is?</button>
</body>
</html>