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