Talk about event delegation and target.Let's first look at what events are.What is an event?The general explanation is something that is more important and has a certain impact on a certain population.This is not the case in JavaScript, where events are actions that happen and are effectively handled.For a better understanding, let's take a look at the following examples to help you understand what an event is!

1. Ring (Event Occurs) - Calls are required (Event Handling)
2. Pupils raise their hands to ask questions (incident) - they need answers (event handling)
3. Remind everyone to start class at 9:30 (event happening) - turn on live broadcast to start class (event handling)
4. The button is clicked (event happens), - the web page will feedback (event handling)...You see!
Of course, we are also familiar with mouse events, keyboard events, window event form events.

How did events come about?

oBtn.onclick = function(ev){
var e = ev || window.event;//The system itself produces an event object   
alert(e); 
 } 

How to Bind Events

Element Node.on+Event Type=Event Handler;
Event object: Once an event starts, an event object is generated
(Automatically generated by the system based on event binding).
[Note] When the button is clicked, the function is called and the event object is passed automatically to the first parameter of the function.
Okay, I've been reading this for so long to pave the way for our next theme, so I'll take you back!
Next let's see what event delegation is.
First of all, life's delegation, you are familiar with it!

See if it's a little open-minded!In fact, many things around us can show that we are always in touch with the delegation of events.It's just that we're not used to code.
Let's see what the delegates in the code look like next.
Simple examples!When we create'ul'and'li' unordered lists on the same page.By getting UL and binding click event to it, we delegate the event, delegate the click event of ul, change the Li node currently clicked to red, find the trigger object, judge that it meets the requirements, if it meets, complete the delegation, and change the Li currently clicked to red.
How can I tell?
Use the target in the event to determine if it's the node we're looking for

                //e.target is the clicked element
    var target = e.target || window.event.srcElemen
     //Element nodes that determine whether a target meets the requirements  
     if(target.tagName.toLowerCase() == "li"){}；

Event delegation actually uses event bubbling to trigger an event by adding it to a parent or ancestor element.
From the above examples, it is easy to summarize the steps of an event delegation implementation:
1. Find the parent or ancestor node of the node to add behavior to
2. Bind the event to the parent node found
3. Find the trigger object, determine whether it meets the requirements, and if it meets the requirements, proceed with subsequent operations.

window.onload = function(){ 
 var UL = document.getElementById('ul1');
    //Delegate a click event on ul to change the currently clicked li node to red
    UL.onclick = function(ev){ 
     var e = ev || window.event;
      var target = e.target || window.event.srcElement;            
          //Element nodes that determine whether a target meets the requirements      
          if(target.tagName.toLowerCase() == 'li'){
                 //Turn the current click on this li node to red       
                 target.style.backgroundColor = 'red';
                  }   
          }
  }

Event delegation is well known, and the most important function is to improve the efficiency of the program.What should we do if we want to continue adding the li tag later so that he can also have the effect that clicking on the li node will turn red?Don't know!Let me teach you!

 window.onload = function(){
  var UL = document.getElementById('ul1');
//Delegate a click event on ul to change the currently clicked li node to red
    UL.onclick = function(ev){
     var e = ev || window.event;
     var target = e.target || window.event.srcElement; 
      //Element nodes that determine whether a target meets the requirements 
      if(target.tagName.toLowerCase() == 'li'){
      //Turn the current click on this li node to red 
      target.style.backgroundColor = 'red';   
      } 
    }
var i = 6;
var oBtn = document.getElementById("btn1");           
 oBtn.onclick = function(){
 var newLi = document.createElement("li");                    
 newLi.innerHTML = 111 * i++;                   
  oUl.appendChild(newLi);            
      }

The benefits of event delegation are:
1. Save resources and reduce dom operations to improve performance
2. There will also be previous events for newly added elements
In order to improve people's understanding of event delegation and to effectively use event delegation to solve problems, especially to list a few cases of event delegation.
Surprise!Not unexpected!

1. Form Cases

<head>      
  <meta charset="UTF-8">        
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>        
  <script>            
  window.onload = function(){//Get Nodes                
  var aInputs = document.getElementsByTagName("input");     
  var oBtn = document.getElementById("btn1");                
  var oT1 = document.getElementById("t1");
 //Add a click to a button 
   oBtn.onclick = function(){//Get the industry column of the input box        
  var oCol = parseInt(aInputs[1].value); 
  var oRow = parseInt(aInputs[0].value);
   //If one of the rows and columns does not exist 
    if(!(oCol && oRow)){
    alert("Please enter rows and columns");  
    }else{ //Create from rows and columns           
         //Create rows                        
      for(var i = 0; i < oRow; i++){ 
        var oTr = document.createElement("tr");                         
           //Create Columns 
           for(var j = 0; j < oCol; j++){
            var oTd = document.createElement("td"); 
            oTd.innerHTML = "That's ok:" + i + ", column:" + j;   
            oTr.appendChild(oTd);       
        }
         //Add a delete button at the end
         oTd = document.createElement("td"); 
         var newBtn = document.createElement("button"); 
         newBtn.innerHTML = "delete";         
         oTd.appendChild(newBtn);            
         oTr.appendChild(oTd);
          oT1.appendChild(oTr); 
          }               
        }             
     }
           //Event Delegation 
           oT1.onclick = function(ev){
            var e = ev || window.event; 
            var target = e.target || window.event.srcElement;
             //Judging the trigger object
    if(target.tagName.toLowerCase() == "button" && target.innerHTML =="delete"){
    oT1.removeChild( target.parentNode.parentNode); 
       }              
      }           
    }
    </script>   
    </head>   
     <body