HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
HTML DOM allows JavaScript events to react to HTML.
When an event occurs, you can execute JavaScript, such as when a user clicks on an HTML element.
To execute code when a user clicks on an element, add the JavaScript code to the HTML event attributes:
HTML Event examples:
In this example, when a user clicks on, it will change the content of <h1> element:
In this case, the function will be called from the event handler:
To assign events to HTML elements, you can use the event attributes.
Assigned to the button element an onclick event:
In the above example, when the button is clicked, it performs the function named displayDate.
HTML DOM event allows you to use JavaScript to assign HTML elements:
Assigned onclick event button element:
In the above example, the function named displayDate are assigned to the id = myButn "HTML element.
When the button is clicked, the function execution.
When a user enters or leaves the page, it will trigger onload and onunload event.
onload event can be used to check visitors browser type and version in order based on the information to load different versions of a page.
onload and onunload event for handling cookies.
onchange event is often used to validate the input field.
The following example shows how to use onchange. When the user changes the contents of the input field will be called upperCase () function.
onmouseover and onmouseout events can be used to trigger functions when the mouse pointer moves into or out of the elements.
A simple onmouseover-onmouseout instance:
onmousedown, onmouseup onclick event is a mouse click and the whole process. First, when a mouse button is clicked, trigger onmousedown event, and then, when the mouse button is released, it will trigger onmouseup event, and finally, when the mouse click Finish, the onclick event is triggered.
A simple onmousedown-onmouseup instance:
For a full description and examples of each event, please visit our HTML DOM reference manual .