zoukankan      html  css  js  c++  java
  • js事件代理(事件委托)最简单的理解

    1事件代理:当我们需要对很多元素添加事件的时候,可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。

    例如:点击按钮删除对应的条目。

    如果给每一个按钮添加事件,极为繁琐,这时候需要用到事件代理。

    事件代理是基于浏览器的事件冒泡机制。

    下面是对应的代码:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <style>
     7         button{
     8             margin-left: 50px;
     9         }
    10         li{
    11             width: 300px;
    12         }
    13     </style>
    14 </head>
    15 <body>
    16 <ul id="parent-list">
    17     <li id="post-1">Item 1<button id="btn1">删除</button></li>
    18     <li id="post-2">Item 2<button id="btn2">删除</button></li>
    19     <li id="post-3">Item 3<button id="btn3">删除</button></li>
    20     <li id="post-4">Item 4<button id="btn4">删除</button></li>
    21     <li id="post-5">Item 5<button id="btn5">删除</button></li>
    22     <li id="post-6">Item 6<button id="btn6">删除</button></li>
    23 </ul>
    24 <script>
    25     //利用事件代理机制,获取当前是第几个item
    26     // 获取父节点,并为它添加一个click事件
    27     var ul = document.getElementById("parent-list");
    28     ul.addEventListener("click",function(e) {
    29         // 检查事件源e.targe是否为Li
    30         if(e.target && e.target.nodeName.toLowerCase() == "li") {
    31             // 打印当前点击是第几个item
    32             console.log("List item ",e.target.id.replace("post-","")," was clicked!");
    33         }
    34     });
    35     //利用事件代理机制,删除对应的li
    36     ul.addEventListener("click",function(e) {
    37         if(e.target && e.target.nodeName.toLowerCase() == "button"){
    38             ul.removeChild(e.target.parentNode)
    39         }
    40     });
    41 </script>
    42 </body>
    43 </html>
  • 相关阅读:
    [SUCTF 2019]EasySQL 1【BUUCFT】【SQL注入】
    [HCTF 2018]WarmUp 1【BUUCFT】【代码审计】
    [强网杯 2019]随便注 1 【BUUCFT】【SQL注入】
    网站如何做好防护
    【单片机】换行、回车
    【Win32】VC6 Visual C/C++ 6.0 修改程序图标
    【Win32】通过多线程自动关闭对话框的方法
    微服务demo
    Mac安装redis
    python---rsa加密根据指数和模生成加密参数模板
  • 原文地址:https://www.cnblogs.com/wu-hou/p/6387678.html
Copyright © 2011-2022 走看看