We know that after object-oriented development, almost all languages can be based on objects "once overnight", and JavaScript is also an object-based language. The user's behavior on the browser is called "events", and a series of actions triggered afterwards, such as pop-ups, changing the browser size, verification, and balabala, are all called "event-driven". Of course, this time I will mainly introduce several common events.
ps: Support for js scripts depends on the browser! ! ! Some lower versions of browsers may not support it! ! !
1. Click event (onClick)
What is a click event? When the user clicks the mouse button Yes, a click event will be generated. At the same time, the event handler specified by onclick will be called. Usually applied to button (button object), checkbox (checkbox), radio (radio button), reset buttons (reset button), and submit buttons (submit button).
Make a big move:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>js basic click event</title></head><body><form> <script language="JavaScript"> function click(){ alert("You just clicked the button"); } </script> <input type="button" value="button" onclick= "aclick()" /></form></body></html>The effect is as follows:
2. Change event (onChange)
Once the user changes the value of the form, the onchange event is triggered.
The code is as follows:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>js base change event</title> <script language="JavaScript"> function check() { alert("The value of the text box has changed"); } </script></head><body><form> <input type="text" value="This is a text box" name="name" onchange="check()"/></form></body></html>The effect is as follows:
3. Select event (onSelect)
When an element in the page is selected, the onselect event is triggered.
The code is as follows:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>js base change event</title> <script language="JavaScript"> function check() { alert("The value of the text box has changed"); } </script></head><body><form> <input type="text" value="This is a text box" name="name" onchange="check()"/></form></body></html>The effect is as follows:
4. Load event (onLoad)
The loading event is an event that is triggered when the web page is just opened.
The code is as follows:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>js basic loading event</title> <script language="JavaScript"> function check(){ alert("Don't be anxious, Xiao D is on the way to horseback, O(∩_∩)O haha~"); } </script></head><body onload="check()"></body></html>The effect is as follows:
5. Before unload event (beforeunload)
To be precise, it is more appropriate to call "before leaving page event" and will trigger this event when you click the close button on the current tab.
The code is as follows:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>js basics pre-unload event</title> <script language="JavaScript"> function check1(){ alert("You really want to leave me?..."); } </script></head><body onbeforeunload= "check1()"><h1>This is the page used to verify the pre-unload event</h1></body></html>The effect is as follows:
The above article briefly talks about the basic client event driver of JavaScript is all the content I share with you. I hope it can give you a reference and I hope you can support Wulin.com more.