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

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.