Simple understanding of events

What is an event

React to user actions

The role of the event

1 : Realize the interaction between user behavior and browser page
2 : Monitor machine . speed of progress , Animation, etc.

The event solved the problem of

Make the interface live

Analysis process

• 1. Which element does the user want , What has been done

To which element , What events are bound

• 2. After doing this, what effect does the browser show

What code to write in the event handler

The details of the event

Event reference list

Event handler

• 1. Execute slow functions
  • Code to be executed after the overall situation
• 2. Execute the function when the event is triggered

Event classification

• Built in events
  Event reference list

How to know which event to use ?
1. Analyze behavior 2. Find events based on behavior

• Custom events

Event object

• effect : Record the details of the trigger event
  • 1. The element that triggered the event
  • 2. Event type
  • 3. Trigger event location
  • 4. Trigger event time
  • 5. Which case in the keyboard
  • …
• obtain : Event handler parameters
• purpose :
  • 1. Find the trigger event element
  • 2. Get the trigger event element name , distinguish Who triggered the event ( Event delegation )

Event delegation

Event delegation :

1. A way to bind events by using the characteristics of event flow
2. Bind an event to the parent element of the target element of the bound event This reduces the number of event bindings for the target element So as to optimize the program

Event delegate binding method

      //  Normal dynamic binding events 
      // var ulNode = document.createElement('ul');
      // document.body.appendChild(ulNode);
      // for (let index = 0; index < 10; index++) {
    
      // var liNode = document.createElement('li');
      // liNode.innerHTML = `${index + 1}`;
      // liNode.onclick = function () {
    
      // this.style.backgroundColor = 'green';
      // }
      // ulNode.appendChild(liNode)

      // }

      //  Event delegate dynamically binds events 
      var ulNode = document.createElement('ul');
      document.body.appendChild(ulNode);
      ulNode.onclick = function (event) {
    
          if (event.target.nodeName == 'LI') {
    
              event.target.style.backgroundColor = 'green'
          } else {
    
              console.log(' No li');
          }
      }
      for (let index = 0; index < 10; index++) {
    
          var liNode = document.createElement('li');
          liNode.innerHTML = `${
      index + 1}`;
          ulNode.appendChild(liNode)

      }