Day two: JavaScript events

Source: Internet
Author: User

Event: is the behavior that can be detected by JavaScript, such as mouse click, mouse movement, common events are as follows

Code implementation "Click event":
<body>
<button onclick= "demo ()" > button </button>
<script>
Function Demo () {
Alert ("Hello");
}
</script>
</body>
Run results: Click on the Screen button, pop-up box hello

The code implements "mouse over":

1) Style.css contents are as follows:
div{
width:100px;
height:100px;
Font-weight:bold; " >crimson;
}

2) testjstty3.html contents are as follows:
    <meta charset= "UTF-8" >
<title> Events </title>
<link rel= "stylesheet" type= "Text/css" href= "Style.css" >
<body>
<div clsss= "div" onmouseout= "onout (This)" onmouseover= "Onover (This)" > </div>
<script>
function Onout (ooj) {

Ooj.innerhtml= "Hello";
}
function Onover (ooj) {
Ooj.innerhtml= "World";
}
</script>

Running result: When moving past, the red box appears the world; When the mouse moves out, a hello appears.


Text Change event:
<body onload= "msg ()" >              //Web download completion event, event when written in body
<div clsss= "div" onmouseout= "onout (This)" onmouseover= "Onover (This)" > </div>
<script>
function Onout (ooj) {

Ooj.innerhtml= "Hello";
}
function Onover (ooj) {
Ooj.innerhtml= "World";
}
</script>
<form>
<input type= "text" onchange= "Changedemo (This)" > //After entering content in the text box, the popup dialog box prompts the content to change
</form>
<script>
function Changedemo (BG) {
Alert ("content changed");
}
</script>
<form>
<input type= "text" onselect= "Selectdemo (This)" onfocus= "Focusdemo" >//mouse click on text box, text box turns green

</form>
<script>
        The text box is selected and the text box becomes green.

function Selectdemo (BG) {

Bg.style.backgroundcolor= "Red";
}
function Focusdemo (BG) {
Bg.style.backgroundcolor= "Green";
}
function msg () {
Alert ("Web content download Completed");
}
</script>


Day two: JavaScript events

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.