Home > Developer > JavaScript
1. OnClick Event Click event (onclick is not the method in JS, the onclick is just a DOM interface that the browser provides JS, so that JS can manipulate the DOM, so the onclick case is no problem, such as the HTML code is not case-sensitive) Example: <% @pagelanguage ="Java"import="java.util.*"pageencoding="UTF-8"%> <! Doctypehtmlpublic"-//w3c//dtd HTML 4.01 transitional//en"Some common methods of >"Text/javascript">functionmyfunction () {alert ("Test the onclick click event"); } </script> "myFunction ()"> Click here </button></center></body>The onclick is typically produced in the following base objects: Button (the Buttons object), checkbox (checkbox), Radio (radio box), Reset buttons (reset button), submit buttons (submit button)2the. OnLoad event can be performed by the body,<bodyonload="alert (123)"></body>, where onload can write a method behind it, such as: onload="Test ()"And then write a test () method in JavaScript, the method is called first when the page starts to load<% @pagelanguage ="Java"import="java.util.*"pageencoding="UTF-8"%> <! Doctypehtmlpublic"-//w3c//dtd HTML 4.01 transitional//en"Some common methods of >"Text/javascript">FunctionTest () {alert ("Test the OnLoad method"); } </script> "Test ()"></body>Note: This method can only be written in the<body>label3The . onchange Event event is triggered when content changes, as in jquery with the change () method when the content changes. Can be used in text boxes, list boxes, and other objects, which are typically used in response to other changes that the user modifies the content. Description: When a user enters text into a text box, the onchange event is not triggered, and only when the user enters the end of the text box, the event is triggered when the text box loses focus, and if it is a drop-down box, it is triggered when the selection ends. <% @pagelanguage ="Java"import="java.util.*"pageencoding="UTF-8"%> <! Doctypehtmlpublic"-//w3c//dtd HTML 4.01 transitional//en"Some common methods of >"Text/javascript"> ??? Functionuppercase () {????? Varx= document.getElementById ("fname"). Value; ????? document.getElementById ("fname"). Value =x.touppercase (); ????}? ?</script> "name"> User name: </label>?<inputtype="text"Id="fname"Onchange="uppercase ()"Value=""/></p></body>Note: The actual effect of the above example is that when the input box loses focus, the content turns into uppercase. This occurs because input must be out of focus to detect that the content has changed. The change event is typically used for drop-down menu select tags. 4The event is triggered when the current element of the. onblur event and onfocus event loses focus, corresponding to the onfocus event: Get Focus Event<% @pagelanguage ="Java"import="java.util.*"pageencoding="UTF-8"%> <! Doctypehtmlpublic"-//w3c//dtd HTML 4.01 transitional//en"Some common methods of >"Text/javascript">?? Functionchkvalue (TXT) {??if(txt.value=="") Alert ("The text box must fill in the content!");??}? Functionsetstyle (x) {?? document.getElementById (x). Style.background="Yellow"?}?</script> lose focus:?<inputtype="text"Name="name"Value=""Size=" -"Onblur="Chkvalue (This)"><br>Get Focus: <inputtype="text"Id="name"Value=""Size=" -"onfocus="SetStyle (this.id)"> </body>5. onscroll Event Window Scrolling event: The function is called when the page scrolls. This event is written outside the method, and no parentheses are followed by the function name, such as Window.onscroll=Move Example:<% @pagelanguage ="Java"import="java.util.*"pageencoding="UTF-8"%> <! Doctypehtmlpublic"-//w3c//dtd HTML 4.01 transitional//en"Some common methods of >"Text/javascript">?? Functionmove () {?? Alert ("called when the page scrolls");??}? Window.onscroll=move;?</script>Test Onscroll Method<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>Test Onscroll Method<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>Test Onscroll Method<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>Test Onscroll Method<br><br><br><br><br><br><br><br><br><br></body >6The . onsubmit event belongs to<form> form elements, written in the <form> form tab. Syntax: onsubmit= "returnfunction name () "Example:<% @pagelanguage ="Java"import="java.util.*"pageencoding="UTF-8"%> <! Doctypehtmlpublic"-//w3c//dtd HTML 4.01 transitional//en"Some common methods of >"Text/javascript">?? Functionmove () {?? Alert ("test onsubmit ....."+testForm.name.value);??}??</script>""Method="Post"Name="Testform"onsubmit="Returnmove ()"> <inputtype="text"Name="name"Value=""> <br> <inputtype="Submit"Name="Submit"Value="Test onsubmit"/></form></body>2. Mouse-related events1. OnMouseMove and onmouseout and onmouseover event onmouseover: 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. onmouseout: Triggers an event call function when the mouse leaves an object range. Onmousemove: 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. Example:<% @pagelanguage ="Java"import="java.util.*"pageencoding="UTF-8"%> <! Doctypehtmlpublic"-//w3c//dtd HTML 4.01 transitional//en"Some common methods of >"Text/javascript">functionbigimg (x) {x.style.height="180px"; X.style.width="180px";} Functionnormalimg (x) {x.style.height="128px"; X.style.width="128px";}</script>"bigimg (This)"onmouseout="normalimg (This)"Border="0"Src="Images/defaultavatar.gif"alt="Smiley"></body>2. onmouseup and Onmousedownonmouseup: Triggers an event when the mouse is released OnMouseDown: The event is triggered when the mouse button is pressed:<% @pagelanguage ="Java"import="java.util.*"pageencoding="UTF-8"%> <! Doctypehtmlpublic"-//w3c//dtd HTML 4.01 transitional//en"Some common methods of >"Text/javascript">Functionmousedown () {document.getElementById ("P1"). style.color="Red";} Functionmouseup () {document.getElementById ("P1"). style.color="Green";}</script>"P1"onmousedown="MouseDown ()"onmouseup="mouseUp ()">Please click on the text! The MouseDown () function is triggered when the mouse button is pressed on a paragraph. This function sets the text color to red. The MouseUp () function is triggered when the mouse button is released. The MouseUp () function sets the color of the text to green. </p></body>The most common events are:
(1) Click event: OnClick. The event that occurs when the user clicks the mouse button while. Nclick The specified event handler or code will be called for execution.
(2) Change event: OnChange. The event occurs when the character value in the text or TEXTAREA element changes or the Select table option state changes.
(3) Check event: Onselect. This event is raised when text in a text or TextArea object is selected. Such as:
<ipnut type= "text" value= "Default Info" Onselect=alert ("you select text in t text box") >
(4) Get focus event: onfocus. The user clicks the text or textarea and the Select object, which causes the event when the cursor falls in the text box or selection box. Such as:
<select name= "Zhengjian" Onfocus=alert ("I become the Focus") >
(5) Loss of focus event: onblur. The loss of focus event is just the opposite of getting the focus event, which is raised when text or textarea and the Select object no longer has focus and exits the background.
(6) Manned file event: OnLoad, ' generates this event when the paging file is manned. One of the functions of onload is to detect the value of a cookie when a paging file is first manned, use a variable for it to be used by the source code, this event is a window event, but when specifying an event handler in HTML, it is generally written in <body> Tag. Such as:
<body onload=alert ("Loading page, please wait for one") >
(7) Unload file event: OnUnload. With a manned file event. Nload exactly the opposite, the event that is raised when the Web page exits and can be updated. The state of the Ookie. Such as:
<body onunload=confirm ("Are you sure you want to leave this page?") >
(8) Mouse Town cover event: onmouseover, onMouseOver is the event that is raised when the mouse is over the element. Such as:
<input type= "Boutton" value= "button" onmouseover= "window. Status= ' Please note the following status bar ·; return true ">
(9) Mouse leave event: onmouseout, onMouseOut is the event that is raised when the mouse leaves the element. You can create a dynamic button effect if you use it in conjunction with a mouse override event.
(10) General events.
Ondbclick: Mouse Double-click event.
onkeypress: An event that is triggered when a key on the keyboard is pressed and released, requiring that the active object be in the page.
OnKeyDown: An event that is triggered when a key on the keyboard is pressed, requiring that the active object be in the page.
OnKeyUp: An event that fires when a key on the keyboard is released, requiring that an active object be in the page.
(11) Page related events.
Onabort: An event that is triggered when a picture is interrupted by a user while downloading.
onBeforeUnload: The event that is triggered when the content of the current page is about to be changed.
Common events in JavaScript
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
