Detailed explanation of JavaScript event concepts (distinguishing between static registration and dynamic registration)

Detailed explanation of JavaScript event concepts (distinguishing between static registration and dynamic registration)

Events in js

What is an event? Events are responses to interactions between computer input devices and pages, which we call events.

Event Type

  • Mouse click: for example, clicking a button, selecting a checkbox or radio button; the mouse enters, hovers over, or exits a hotspot on the page: for example, the mouse stops over an image or enters a table.
  • Keyboard keys: when a key is pressed or released;
  • HTML events: for example, when the page body is loaded; when selecting an input box in a form or changing the content of the text in an input box: for example, when the content in a text box is selected or modified;
  • Mutation event: mainly refers to the event triggered when the underlying elements of the document change, such as DomSubtreeModified (DOM subtree modification).

Common events

  • onload loading completion event: After the page is loaded, it is often used to initialize the page js code
  • onclick click event: commonly used for button click response operations.
  • onblur lost focus event: commonly used to verify whether the input content is legal after the input box loses focus.
  • onchange content change event: often used for operations after the drop-down list and input box content change
  • onsubmit form submission event: often used to verify whether all form items are legal before the form is submitted.

Event Registration

What is event registration (binding)?
In fact, it tells the browser which operation code to execute when an event is responded to, which is called event registration or event binding.
Event registration is divided into static registration and dynamic registration.

  • Static registration event: directly assign the code after the event response through the event attribute of the HTML tag. This method is called static registration
  • Dynamic registration event: It means first getting the DOM object of the tag through JS code, and then assigning the code after the event response through DOM object. Event name = function(){} This form is called dynamic registration

Basic steps for dynamic registration:

1. Get the tag object
2. Tag object. Event name = function(){}

Static and dynamic registration examples

onload loading completion event

Static binding:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Static Registration</title>
  <script type="text/javascript">
  // onload event method function onloadFun() {
   alert('Statically register onload event, all codes');
   }
  </script>
</head>
<!--Statically register the onload event. The onload event is an event that is automatically triggered after the browser parses the page. The attribute of the body tag is registered through this attribute-->
<body content="onloadFun();">
</body>
</html>

Dynamic Binding:

Fixed writing method, through window.onload(){} method, calling the method in curly braces

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Dynamic Registration</title>
  <script type="text/javascript">
   // Dynamic registration of onload event. It is a fixed writing method window.onload = function () {
   alert("Dynamically registered onload event");
   }
  </script>
</head>
<body>
</body>
</html>

onclick click event

For example, we can better understand the difference between the two definitions from this example.

onclick static binding event

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
 function onclickFun() {
  alert("Statically register onclick event");
 }
</script>
</head>
<body>
<!--Statically register the onClick event through the button's onclick attribute-->
<button onclick="onclickFun();">Button 1</button>
</body>
</html>

onclick dynamic binding event

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
   window.onload = function () {
   //getElementById gets the tag object through the id attribute var btnObj = document.getElementById("btn01");
   // 2 through the tag object. Event name = function(){}
   btnObj.onclick = function () {
    alert("Dynamically registered onclick event");
   }
   }
</script>
</head>
<body>
 
<button id="btn01">Button 2</button>
</body>
</html>

The above is the detailed content of the detailed explanation of the concept of JavaScript events (distinguishing between static registration and dynamic registration). For more information about JavaScript events, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:
  • The concept and use of scope chain in JavaScript
  • Summary of JavaScript object-oriented core knowledge and concepts
  • The concept of process in node.js and the usage example of child_process module
  • Analysis of the concept and usage of closures in JavaScript
  • Detailed introduction to JS basic concepts

<<:  27 Linux document editing commands worth collecting

>>:  MySQL Optimization: Cache Optimization

Recommend

Install Docker on Linux (very simple installation method)

I have been quite free recently. I have been doin...

Detailed explanation of VUE Token's invalidation process

Table of contents Target Thought Analysis Code la...

One command lets you understand the common parameters of the read command in the shell

We know that there are two ways to receive incomi...

Centos8 builds nfs based on kdc encryption

Table of contents Configuration nfs server (nfs.s...

Vue implements left and right sliding effect example code

Preface The effect problems used in personal actu...

Win10 install Linux ubuntu-18.04 dual system (installation guide)

I installed a Linux Ubuntu system on my computer....

Analysis of Mysql transaction characteristics and level principles

1. What is a transaction? A database transaction ...

N ways to center elements with CSS

Table of contents Preface Centering inline elemen...

Installation tutorial of docker in linux

The Docker package is already included in the def...

How to write elegant JS code

Table of contents variable Use meaningful and pro...

A method of hiding processes under Linux and the pitfalls encountered

Preface 1. The tools used in this article can be ...

Solution to the problem that Centos8 cannot install docker

Problem [root@zh ~]# [root@zh ~]# [root@zh ~]# yu...

Example of using MySQL to count the number of different values ​​in a column

Preface The requirement implemented in this artic...

Complete steps to use vue-router in vue3

Preface Managing routing is an essential feature ...

Summary of some efficient magic operators in JS

JavaScript now releases a new version every year,...