Detailed explanation of js event delegation

1. Each function is an object and occupies memory. The more objects in memory, the worse the performance. The solution to the problem of too much event handling is event delegation.

2. Event delegation bubbling: by specifying only one event handler, you can manage all events of a certain type.

Examples

<ul id="myLinks">
    <li id="myLi1">text1</li>
    <li id="myLi2">text2</li>
    <li id="myLi3">text3</li>
</ul>

The event object in browsers below Ie9 is placed in the global window.event;

Solve compatibility: event = event || window.event

Event delegation (that is, binding events to parent/grandfather objects and controlling changes to child objects through the target attribute of the event object):

event.target (target object clicked)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    td{
      width: 100px;
      height: 100px;
      border:2px solid red;
    }
  </style>
</head>
<body>
<table>
  <tr>
    <td></td><td></td><td></td>
  </tr>
  <tr>
    <td></td><td></td><td></td>
  </tr>
  <tr>
    <td></td><td></td><td></td>
  </tr>
</table>
</body>
<script>
  var tab = document.getElementsByTagName("table")[0];
  tab.onclick = function (event) {
    //Click on the child object to change the color event.target.style.backgroundColor = "black";
  }
</script>
</html>

This is the end of this article on the detailed explanation of js event delegation. For more information on how to understand js event delegation, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:

JavaScript event delegation principle
A brief analysis of event delegation examples in JS
js to realize web message board function
JavaScript to implement web message board function
Native JS implementation of message board
This article tells you how to use event delegation to implement JavaScript message board function

<<: HTML+CSS+JavaScript realizes the display of selected effect following the mouse movement

>>: MySQL online log library migration example

Detailed explanation of js event delegation

Examples

Vue ElementUI implements asynchronous loading tree

SQL implementation of LeetCode (182. Duplicate mailboxes)

Understanding MySQL precompilation in one article

CSS3 to achieve timeline effects

mysql 5.7.18 winx64 password change

Detailed explanation of the problem of mixed use of limit and sum functions in MySQL

Detailed explanation of the basic usage of SSH's ssh-keygen command

Detailed explanation of MYSQL database table structure optimization method

Example code for implementing background blur effect with CSS

Sample code for automatic web page refresh and automatic jump

Recommend

MySQL 5.7.19 winx64 free installation version configuration tutorial

JavaScript implements page scrolling animation

Mysql keeps the existing content and adds content later

CentOS 7.6 batch add, modify and delete virtual network cards operation introduction

Detailed steps for setting up host Nginx + Docker WordPress Mysql

Detailed explanation of the use of grid properties in CSS

Detailed explanation of the installation, configuration, startup and shutdown methods of the Mysql server

Solve the problem of importing Web projects into Idea and publishing them to Tomcat

Implementing custom radio and check box functions with pure CSS

CSS3 realizes various graphic effects of small arrows

Summary of Mysql-connector-java driver version issues

Some issues we should pay attention to when designing a web page

Summary on Positioning in CSS

Detailed explanation of the order of Mysql query results according to the order of ID in in()

Advanced and summary of commonly used sql statements in MySQL database