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

Node script realizes automatic sign-in and lottery function

Detailed explanation of js event delegation

Examples

Node script realizes automatic sign-in and lottery function

React Hooks Common Use Scenarios (Summary)

A brief summary of all encapsulation methods in Vue

MySQL 8.0.20 installation and configuration method graphic tutorial under Windows 10

Solution to the problem of MySQL thread in Opening tables

Perfect solution to the problem of connection failure after MySQL client authorization

Linux system repair mode (single user mode)

jenkins+gitlab+nginx deployment of front-end application

Detailed explanation of JavaScript data types

Detailed explanation of how Angular handles unexpected exception errors

Recommend

A brief discussion on logic extraction and field display of Vue3 in projects

Is a design that complies with design specifications a good design?

Nginx request limit configuration method

SQL implementation of LeetCode (183. Customers who have never placed an order)

Complete steps for vue dynamic binding icons

Real-time refresh of long connection on Vue+WebSocket page

Write a formal blog using XHTML CSS

How to avoid duplication of data when inserting in MySql batch

CSS3 uses animation attributes to achieve cool effects (recommended)

MYSQL8.0.13 free installation version configuration tutorial example detailed explanation

Some lesser-known sorting methods in MySQL

How to modify the time in centos virtual machine

Solution to forgetting the administrator password of mysql database

Implementation code of Nginx anti-hotlink and optimization in Linux

Invalid solution when defining multiple class attributes in HTML