经典面试题分析——原生JS如何实现事件委托

你的名字 2022-09-03 10:19 306阅读 0赞

### 原生JS实现事件委托 ###

*   *  1. 什么是事件委托
     *  2. 实现事件委托（第一步，基本结构）
     *  3. 编写一个添加节点的方法先
     *  4. 实现事件委托

## 1. 什么是事件委托 ##

**官方文档**

*  事件委托就是利用事件冒泡，指定一个事件处理程序，就可以管理某一类型的所有事件。———— JS高程

**举个例子**

*  我们将快递寄到公司，但是可能快递到的时候，我们人却没在，便可以委托前台小姐姐代收。
 *  第一：现在委托前台的同事是可以代为签收的，即程序中的现有的dom节点是有事件的
 *  第二，新员工也是可以被前台MM代为签收的，可能人还没到，快递先到了，即程序中新添加的dom节点也是有事件的

![在这里插入图片描述][3cbda0fac1e841b6937fb0985fdf9f6a.png]

## 2. 实现事件委托（第一步，基本结构） ##

<!DOCTYPE html>
    <html>
    <head>
        <title></title>
    </head>
    <body>
        <h1>原生JS实现事件委托</h1>
        <h2>什么是事件委托？</h2>
        <h3>事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。———— JS高程</h3>
    
        <ul id="ul">
            <li>0</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <button id="btn">点我添加一个li</button>
    </body>
    </html>

*  首先要为现有li元素绑定事件
 *  新增加的li也要绑定事件

## 3. 编写一个添加节点的方法先 ##

// 为按钮绑定点击事件
      let btn = document.getElementById('btn');
      btn.onclick = function () { 
          let li = document.createElement('li');
          // 新增li的内容为ul当前子元素的个数
          li.textContent = ul.children.length;
          ul.appendChild(li);
      }

## 4. 实现事件委托 ##

*  原理其实很简单，将事件先绑定到

let ul = document.getElementById("ul");
        ul.onclick = function (event) { 
            event = event || window.event;
            let target = event.target;
            // 获取目标元素
            if (target.nodeName == 'LI') { 
                alert(target.innerHTML);
            }
        }

> **1. 希望本文能对大家有所帮助，如有错误，敬请指出**
> 
> **2. 原创不易，还请各位客官动动发财的小手支持一波（关注、评论、点赞、收藏）**  
> **3. 拜谢各位！后续将继续奉献优质好文**  
> **4. 如果存在疑问，可以私信我**

![在这里插入图片描述][20210710213359459.png]

[3cbda0fac1e841b6937fb0985fdf9f6a.png]: /images/20220829/141f728222a74613877a4bd2fe9465a8.png
[20210710213359459.png]: /images/20220829/312a1aa552c54eaeb5515f1c3e9728cc.png