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

Events in js
Event Type
Common events
Event Registration
Static and dynamic registration examples

onload loading completion event

Static binding:
Dynamic Binding:

onclick click event

onclick static binding event
onclick dynamic binding event

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: