What Is An Event?
An event is a reaction to a trigger on a web page. For example, the user clicks a button, a web page has loaded, etc. An event can be triggered by the user and by the browser. The common HTML events are onclick, onchange, onmouseover, onmouseout, onkeydown, onload, onunload, onmousedown, onmouseup, etc. You can take a look at a longer list of HTML events here.
Event Handler Functions
You can easily add an event handler function to an HTML element. In the following code, the showMessage() function is called when the <p> element is clicked.
The following code example shows how to attach an event handler function to an HTML element using DOM (Document Object Model):
The onchange event
In the following code, when the text field is changed, the clearText() function is called and the text field is cleared.
The onmouseover and onmouseout events
In the code below, when the user moves the mouse over the <p> element, the showMessage() function is called and the message “Good morning” is shown. And when the user moves the mouse out of the <p> element, the showMessage1() function is called and the message “Hello” is displayed.
The onmousedown and onmouseup events
In the following code example, when the mouse button is pressed down on the element, the showMessage() function is called and the message “Mouse down” is shown. And when the mouse button is released on the element, the showMessage1() function is called and the message “Mouse up” is displayed.