Home >Web Front-end >JS Tutorial >Detailed interpretation of JavaScript client event driver (graphic tutorial)

Detailed interpretation of JavaScript client event driver (graphic tutorial)

亚连Original: 2018-05-21 10:14:231355browse

Now I will bring you a brief discussion on the client-side event driver of JavaScript. Let me share it with you now and give it as a reference for everyone.

We know that after the development of object-oriented, almost all languages can be based on objects "overnight", and JavaScript is also an object-based language. The user's behavior on the browser is called an "event", and a series of actions triggered thereafter, such as pop-ups, changing the browser size, verification, and balabala, are all called "event-driven". Of course, this time I will mainly introduce a few frequently occurring events.

ps: Support for js scripts depends on the browser! ! ! Some lower version browsers may not support it! ! !

1. Click event (onClick)

What is a click event? When the user clicks the mouse button, a click event is generated. At the same time, the event handler specified by onclick will be called. Usually used on buttons (button objects), checkboxes (check boxes), radio (radio buttons), reset buttons (reset buttons), and submit buttons (submit buttons).

Enlarge move:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js基础之单击事件</title>

</head>
<body>
<form>
  <script language="JavaScript">
    function aclick(){
      alert("你刚才单击了按钮");
    }
  </script>
  <input type="button" value="按钮" onclick= "aclick()" />
</form>

</body>
</html>

The effect is as shown below:

##2. Change event (onChange)

Once the user changes the value of the form, the onchange event will be triggered.

The code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js基础之更改事件</title>
  <script language="JavaScript">
    function check() {
      alert("文本框的值发生了变化");
    }
  </script>
</head>
<body>
<form>
  <input type="text" value="这是一个文本框" 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基础之更改事件</title>
  <script language="JavaScript">
    function check() {
      alert("文本框的值发生了变化");
    }
  </script>
</head>
<body>
<form>
  <input type="text" value="这是一个文本框" name="name" onchange="check()"/>
</form>
</body>
</html>

The effect is as follows:

##4. Loading event (onLoad)

The loading event is an event 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基础之加载事件</title>
  <script language="JavaScript">
    function check(){
      alert("莫急莫急，小D正在骑马来的路上,O(∩_∩)O哈哈~");
    }
  </script>
</head>
<body onload="check()">
</body>
</html>

The effect is as follows:

##5. Pre-unload event (beforeunload)

To be precise, it is more appropriately called the "event before leaving the page". This event is triggered when you click the close button of the current tab. The code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js基础之卸载前事件</title>
  <script language="JavaScript">
    function check1(){
      alert("你真的要离我而去呢？╥﹏╥...");
    }
  </script>
</head>
<body onbeforeunload= "check1()">
<h1>这是用来验证卸载前事件的页面</h1>
</body>
</html>

The effect is as follows:

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future. .

Understanding and using the relevant knowledge of JavaScript closures

Understanding and using JavaScript timing events

The above is the detailed content of Detailed interpretation of JavaScript client event driver (graphic tutorial). For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to send JSONP requests using Script elements (graphic tutorial)Next article：How to send JSONP requests using Script elements (graphic tutorial)

See more

Detailed interpretation of JavaScript client event driver (graphic tutorial)

Related articles