Home > Developer > Web Develop
1. Add Events via tags
(1) OnClick event: Click event
(2) Ondbclick event: Double-click event
(3) OnLoad event: can only be used in the body, the entry function is: window. 。 Onload=function () {}
(4) onchange Event: Change Event
(5) Onblur Events and onfocus events: Loss of focus and focus
(6) Onscroll event: Rolling LUN
(7) Mouse related events:
----------------------onmouseover moved above the object is the trigger event, and the same area is triggered only once, no matter how it moves.
----------------------onmouseout Mouse Away object trigger event Call function
----------------------OnMouseMove moved above the object is a penalty event called function the same area mouse moves once, usually not commonly used
----------------------onmouseup the mouse to lift the trigger event
----------------------onmousedown Mouse Press the trigger event electrophoresis function
To illustrate:
<body>
<div id= "One"onclick= "Dianji ()" > Click events </div>
<div id= "One"ondblclick= "Shuangji ()" > Double-click event </div>
Change event: <input type= "text" id= "" Name= "" value= "" placeholder= "Please enter account"onchange= "Change ()"/><br>
Lost Focus: <input type= "text" id= "" Name= "" value= "" placeholder= "Lose Focus"onblur= "Sqjd ()"/><br>
Get Focus: <input type= "text" id= "" Name= "" value= "" placeholder= "Get Focus"onfocus= "HDJD ()"/><br>
<div id= "Mouse" class= "Mouse1"onmouseover= "Over ()"> triggers an event call function when the mouse moves over the range of an object. Note: In the same area, the function is triggered only once, no matter how it moves. </div>
<div id= "Mouse" class= "Mouse2"onmouseout= "Out ()" >Triggers an event call function when the mouse leaves an object range. </div>
<div id= "Mouse" class= "MOUSE3"onmousemove= "Move ()"> Triggers an event call function when the mouse moves over the range of an object. Note: In the same area, the event is triggered once the mouse moves once. </div>
<div id= "Mouse" class= "Mouse4"onmousedown= "Down ()"> Triggers an event when the mouse button is pressed </div>
<div id= "Mouse" class= "MOUSE5"onmouseup= "Up ()"> Trigger event when Mouse is released </div>
2. Adding events through A For loop
<div class= "NAV" ><!--adding events by looping to multiple elements--
<div class= "NA" > Home </div>
<div class= "NA" > Overview </div>
<div class= "NA" > Faculty </div>
<div class= "NA" > AC </div>
<div class= "NA" > Visitors </div>
<script type= "Text/javascript" >
Window.onload=function () {
}
Adding events to multiple elements by looping
var nam=document.getelementsbyclassname ("NA");
for (Var i=0;i<nam.length;i++) {
Nam[i].onmouseover=function () {
This.style.backgroundcolor= "Red";
this.style.color= "White";
}//mouse up the background from Brown to red, the font changed from black to white
Nam[i].onmouseout=function () {
This.style.backgroundcolor= "Blue";
This.style.color= "BLACK";
}
}
</script>
3. Monitor event function by AddEventListener () method
<body>
<button id= "BT" > Add listener Event Point I </button><br><br><!--listen to the event function through the Addevenlistener () method--
</body>
<script type= "Text/javascript" >
Window.onload=function () {
}
var Btm=document.getelementbyid ("BT");
Btm.addeventlistener ("click", AA);
function aa () {
Alert ("I am a Listener click event")
}
</script>
JS Common objects: Click, double-click, onload events, mouse-related, onblur events and onfocus events, etc., by looping to multiple elements to add events, through the AddEventListener () method to listen to the event function
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
