Home > Developer > JavaScript
We can execute JavaScript when an event occurs, such as when a user clicks on an HTML element.
To execute code when a user taps an element, add JavaScript code to an HTML event property:
Onclick=javascript
Examples of HTML events:
In this case, when the user clicks on the
<H1 onclick= "this.innerhtml= ' Thank you! '" > Click on the TextHTML Event PropertiesIf you want to assign an event to an HTML element, you can use the event properties.
InstanceTo assign the OnClick event to the button element:
Use HTML DOM to assign events<button onclick= "displaydate ()" > click here </button>The HTML DOM allows you to assign events to HTML elements by using JavaScript:
InstanceTo assign the OnClick event to the button element:
OnLoad and OnUnload Events<script>document.getElementById ("mybtn"). onclick=function() {displaydate ()}; </script>The onload and OnUnload events are triggered when the user enters or leaves the page.
The OnLoad event can be used to detect the browser type and browser version of the visitor and to load the correct version of the Web page based on that information.
The onload and OnUnload events can be used to process cookies.
<! DOCTYPE html>function checkcookies ( {if (navigator.cookieenabled==true) { alert ("cookie Enabled") } Else { alert ("cookie not Enabled") }}</script><p> prompt will tell you Whether the browser has cookies enabled. </p></body>onchange EventsOnChange events are often used in conjunction with validation of input fields.
Here is an example of how to use onchange. The uppercase () function is called when the user changes the contents of the input field.
1<! DOCTYPE html>234<script>5 functionmyFunction ()6 {7 varX=document.getelementbyid ("FName");8X.value=x.value.touppercase ();9 }Ten</script> One A<body> - -Please enter English characters: <input type= "text" id= "fname" onchange= "MyFunction ()" > the<p> when you leave the input field, the function that converts the input text to uppercase is triggered. </p> - -</body> -onmouseover and onmouseout EventsThe onmouseover and onmouseout events can be used to trigger a function when a user moves the mouse over an HTML element or moves out of an element.
<! DOCTYPE html>function mOver (obj) {obj.innerhtml= "Thank You"} function mout (obj) {obj.innerhtml= "Move mouse over"}</script></body>OnMouseDown, onmouseup, and onclick eventsOnMouseDown, onmouseup, and onclick form all parts of the mouse click event. First, when the mouse button is clicked, the OnMouseDown event is triggered, and when the mouse button is released, the OnMouseUp event is triggered, and the onclick event is triggered when the mouse click is completed.
<! DOCTYPE html>function mDown (obj) {obj.style.backgroundColor= "#1ec5e5" obj.innerhtml= "Release mouse button"}function mUp (obj) {obj.style.backgroundColor= "Green" "; obj.innerhtml=" Press mouse button "}</script></body>JavaScript HTML DOM Events
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
