Detailed explanation of js event delegation

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

Recommend

Detailed explanation of sshd service and service management commands under Linux

sshd SSH is the abbreviation of Secure Shell, whi...

Detailed tutorial on installing MySQL 8 in CentOS 7

Prepare Environmental information for this articl...

HTML page common style (recommended)

As shown below: XML/HTML CodeCopy content to clip...

NULL and Empty String in Mysql

I recently came into contact with MySQL. Yesterda...

Solution to the problem of adaptive height and width of css display table

Definition and Usage The display property specifi...

MySQL installation and configuration methods and precautions under Windows platform

2.1、msi installation package 2.1.1、Installation I...

Linux system to view CPU, machine model, memory and other information

During system maintenance, you may need to check ...

Vue implements multi-tab component

To see the effect directly, a right-click menu ha...

MySql sets the specified user database view query permissions

1. Create a new user: 1. Execute SQL statement to...

Solution to the problem of stuck when clicking Select All in Element's shuttle box with large amount of data

Table of contents Solution 1: Copy the transfer c...

Summary of pitfalls in importing ova files into vmware

Source of the problem As we all know, all network...

MySQL reports an error: Can't find file: './mysql/plugin.frm' solution

Find the problem Recently, I found a problem at w...

Detailed explanation of Docker fast build and Alibaba Cloud container acceleration configuration under Windows 7 environment

The previous article on Docker mentioned the cons...

VMware Workstation 14 Pro installation Ubuntu 16.04 tutorial

This article records the specific method of insta...

Install JDK1.8 in Linux environment

Table of contents 1. Installation Environment 2. ...