Of Stack

JavaScript Event Concept Detailed Explanation of Distinguishes Static Registration from Dynamic Registration

  • 2021-10-27 06:08:34
  • OfStack
Events in Directory js Event type Common Events Registration of events Examples of static and dynamic registration onload Load Completion Event
Static binding: Dynamic binding:
onclick Click Events
onclick Static Binding Events onclick Dynamic Binding Events

Events in js

What is an event? Events are the responses of computer input devices interacting with pages, which we call events

Event type

Mouse click: For example, click button and select checkbox and radio; The mouse enters, suspends or exits a hot spot on the page: for example, the mouse stops above a picture or enters the range of table; Keyboard keys: when pressing the keys or releasing the keys; HTML event: For example, when the page body is loaded; Select the input box in the form or change the content of the text in the input box: for example, select or modify the content in the text box; Catastrophe event: Mainly refers to the event triggered when the underlying elements of the document change, such as DomSubtreeModified (DOM subtree modification).

Common Events

onload Load Completion Event: After the page is loaded, it is often used to initialize the page js code onclick Click Event: Commonly used for click response actions of buttons. onblur out-of-focus event: Commonly used to verify whether the input content is legal after the input box loses focus. onchange Content Change Event: Used to operate after drop-down list and input box content change onsubmit Form Submission Event: Used to verify that all forms are valid before a form is submitted.

Registration of events

What is the registration (binding) of events?
In fact, it tells the browser what operation code to perform when the event responds, which is called event registration or event binding.
Event registration can be divided into static registration and dynamic registration

Static Register Event: The Event Attribute of html Tag is directly assigned to the code after the event response. This method is called Static Register Dynamic Register Event: refers to the dom object tagged by js code first, and then through dom object. Event name = function () {} This form is assigned to the code after event response, which is called dynamic registration

Basic steps of dynamic registration:

1. Get the label object
2. Label object. Event name = fucntion () {}

Examples of static and dynamic registration

onload Load Completion Event

Static binding: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> Static registration </title>
  <script type="text/javascript">
  // onload  Method of event 
   function onloadFun() {
   alert(' Static registration onload  Event, all code ');
   }
  </script>
</head>
<!-- Static registration onload  Events ,onload  Events are events that are triggered automatically after the browser has parsed the page ,body The attribute of the tag, through which to register -->
<body  O nl O ad="onloadFun();">
</body>
</html>

Dynamic binding:

Fixed writing, using the window. onload () {} method, calling the method's within curly braces 


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

onclick Click Events

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

onclick Static Binding Events 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
 function onclickFun() {
  alert(" Static registration onclick  Events ");
 }
</script>
</head>
<body>
<!-- Static registration onClick  Event, through button Adj. onclick Attribute -->
<button onclick="onclickFun();"> Button 1</button>
</body>
</html>

onclick Dynamic Binding Events 

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

The above is the JavaScript event concept details (distinguish between static registration and dynamic registration) details, more information about JavaScript events please pay attention to other related articles on this site!

Related articles: