Java Script AddEventListener

Source: Internet
Author: User

addeventlistener , literally, is to add a listener to the event, why do you do it? Just to make this happen, we can know in time, along with doing something else.


Give a topic: We then give a button on the screen, we hope that when the user moves the mouse, the cursor touches the button, the screen automatically display, "Mouse over!", mouse click, screen then display "Mouse click!", the cursor left, the screen then "mouse left!".

Carefully, this is where event listeners (EventListener) are best to play.

Give the code directly:

<! DOCTYPE html>
<meta charset= "Utf-8" >
<title> Rookie Tutorial (runoob.com) </title>
<body>

<p> The instance uses the AddEventListener () method to add multiple events to the button. </p>
<button id= "Mybtn" > Point me </button>
<p id= "Demo" ></p>
<script>
var x = document.getElementById ("mybtn");
X.addeventlistener ("MouseOver", myFunction);
X.addeventlistener ("click", Mysecondfunction);
X.addeventlistener ("Mouseout", mythirdfunction);
function MyFunction ()
{
document.getElementById ("Demo"). InnerHTML + = "Mouse over!<br>"
}
function Mysecondfunction ()
{
document.getElementById ("Demo"). InnerHTML + = "click!<br>"
}
function Mythirdfunction ()
{
document.getElementById ("Demo"). InnerHTML + = "Mouse away from!<br>"
}
</script>

</body>

Click here to Run!

Analysis:

The basic syntax is:

element. AddEventListener ( Event, function, usecapture)

Event: Events, such as the mouseout above, is the mouse out, which needs to be remembered.

function: The trigger functions, which is what we respond to when this event occurs. (The response above is to add a prompt in a P tag.)

Java Script AddEventListener

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.