js:事件委托

最新推荐文章于 2024-06-22 20:14:53 发布
最新推荐文章于 2024-06-22 20:14:53 发布
阅读量101 收藏
点赞数
分类专栏： js 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48493160/article/details/109863007
版权

不使用事件代理

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        table {
            width: 500px;
            margin: 0 auto;
            text-align: center;
        }

        .caozuo {
            width: 500px;
            margin: 0 auto;
            height: 20px;
            display: flex;
        }

        .caixi {
            flex: 2;
            min-width: 0;
        }

        .caiming {
            flex: 2;
            min-width: 0;
        }

        .jiage {
            flex: 1;
            min-width: 0;
        }

        .tianjia {
            flex: 1;
            min-width: 0;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>菜系</th>
                <th>菜名</th>
                <th>价格</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>大菜</td>
                <td>鱼香肉丝1</td>
                <td>10</td>
                <td><button>删除</button></td>
            </tr>
            <tr>
                <td>大菜</td>
                <td>鱼香肉丝2</td>
                <td>10</td>
                <td><button>删除</button></td>
            </tr>
            <tr>
                <td>大菜</td>
                <td>鱼香肉丝3</td>
                <td>10</td>
                <td><button>删除</button></td>
            </tr>
            <tr>
                <td>大菜</td>
                <td>鱼香肉丝4</td>
                <td>10</td>
                <td><button>删除</button></td>
            </tr>
            <tr>
                <td>大菜</td>
                <td>鱼香肉丝5</td>
                <td>10</td>
                <td><button>删除</button></td>
            </tr>
        </tbody>
    </table>
    <div class="caozuo">
        <input class="caixi">
        <input class="caiming">
        <input class="jiage">
        <input class="tianjia" type="button" value="添加">
    </div>
    <script>
        // 获取所有tbody中的按钮
        var btns = document.querySelectorAll("button");
        // 循环绑定事件
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function () {
                var tbody = this.parentNode.parentNode.parentNode;
                var tr = this.parentNode.parentNode;
                console.log(tbody.removeChild(tr))
            }
        }

        // 获取添加按钮
        var addBtn = document.querySelector("input[type=button]");
        console.log(addBtn);
        var caixi = document.querySelector(".caixi")
        var caiming = document.querySelector(".caiming")
        var jiage = document.querySelector(".jiage")
        var tbody = document.querySelector("tbody");
        addBtn.onclick = function () {
            var tr = document.createElement('tr');
            tr.innerHTML =
                [
                    "<td>" + caixi.value + "</td>",
                    "<td>" + caiming.value + "</td>",
                    "<td>" + jiage.value + "</td>",
                    "<td>" + "<button>删除</button>" + "</td>",
                ].join('');
            tbody.appendChild(tr);

            var btns = document.querySelectorAll("button");
            // 循环绑定事件
            for (var i = 0; i < btns.length; i++) {
                btns[i].onclick = function () {
                    var tbody = this.parentNode.parentNode.parentNode;
                    var tr = this.parentNode.parentNode;
                    console.log(tbody.removeChild(tr))
                }
            }
        }
        
        // 1 事件数量过多
        // 2 后来的元素没有事件
        // 3 防止内存泄漏 
        // 可以通过事件代理解决这三个问题
                
    </script>
</body>

</html>

使用事件代理

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        table {
            width: 500px;
            margin: 0 auto;
            text-align: center;
        }

        .caozuo {
            width: 500px;
            margin: 0 auto;
            height: 20px;
            display: flex;
        }

        .caixi {
            flex: 2;
            min-width: 0;
        }

        .caiming {
            flex: 2;
            min-width: 0;
        }

        .jiage {
            flex: 1;
            min-width: 0;
        }

        .tianjia {
            flex: 1;
            min-width: 0;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>菜系</th>
                <th>菜名</th>
                <th>价格</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>大菜</td>
                <td>鱼香肉丝1</td>
                <td>10</td>
                <td><button>删除</button></td>
            </tr>
            <tr>
                <td>大菜</td>
                <td>鱼香肉丝2</td>
                <td>10</td>
                <td><button>删除</button></td>
            </tr>
            <tr>
                <td>大菜</td>
                <td>鱼香肉丝3</td>
                <td>10</td>
                <td><button>删除</button></td>
            </tr>
            <tr>
                <td>大菜</td>
                <td>鱼香肉丝4</td>
                <td>10</td>
                <td><button>删除</button></td>
            </tr>
            <tr>
                <td>大菜</td>
                <td>鱼香肉丝5</td>
                <td>10</td>
                <td><button>删除</button></td>
            </tr>
        </tbody>
    </table>
    <div class="caozuo">
        <input class="caixi">
        <input class="caiming">
        <input class="jiage">
        <input class="tianjia" type="button" value="添加">
    </div>
    <script>
        // 获取添加按钮
        var addBtn = document.querySelector("input[type=button]");
        var caixi = document.querySelector(".caixi")
        var caiming = document.querySelector(".caiming")
        var jiage = document.querySelector(".jiage")
        var tbody = document.querySelector("tbody");
        addBtn.onclick = function () {
            var tr = document.createElement('tr');
            tr.innerHTML =
                [
                    "<td>" + caixi.value + "</td>",
                    "<td>" + caiming.value + "</td>",
                    "<td>" + jiage.value + "</td>",
                    "<td>" + "<button>删除</button>" + "</td>",
                ].join('');
            tbody.appendChild(tr);
        }
        // 1 事件数量过多
        // 2 后来的元素没有事件
        // 3 防止内存泄漏 

        // 可以通过事件代理解决这三个问题
        // 事件代理 指的是将事件绑定给父元素或者祖先元素
        var tbody = document.querySelector("tbody");
        tbody.onclick = function(e) {
            // var e = e || window.event;
            // var d = e.target || e.srcElement
            // 利用事件对象e.target 进行触发事件元素的判断
            if (e.target.tagName.toLowerCase() === "button") {
                var tr = e.target.parentNode.parentNode;
                tbody.removeChild(tr)
            }
        }
        // 1 减少了事件数量
        // 2 后来的元素也可以触发事件
        // 3 防止内存泄漏
    </script>
</body>

</html>

事件代理拓展

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        table {
            width: 500px;
            margin: 0 auto;
            text-align: center;
        }
        
        .caozuo {
            width: 500px;
            margin: 0 auto;
            height: 20px;
            display: flex;
        }
        
        .caixi {
            flex: 2;
            min-width: 0;
        }
        
        .caiming {
            flex: 2;
            min-width: 0;
        }
        
        .jiage {
            flex: 1;
            min-width: 0;
        }
        
        .tianjia {
            flex: 1;
            min-width: 0;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>菜系</th>
                <th>菜名</th>
                <th>价格</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <div class="caozuo">
        <input class="caixi" id="caixi">
        <input class="caiming" id="caiming">
        <input class="jiage" id="jiage">
        <input class="tianjia" id='addBtn' type="button" value="添加">
    </div>
    <script>
        // 获取元素
        var caixi = document.getElementById("caixi");
        var caiming = document.getElementById("caiming");
        var jiage = document.getElementById("jiage");
        var addBtn = document.getElementById("addBtn");

        // 添加事件给addBtn
        addBtn.onclick = function() {
            // 获取菜系菜名价格
            var cx = caixi.value;
            var cm = caiming.value;
            var jg = jiage.value;
            var obj = {
                type_id: 3,
                name: cx,
                food: [{
                    food_id: 6,
                    name: cm,
                    price: jg
                }]
            }
            arr.push(obj);
            render();
        }
        var arr = [{
            type_id: 1,
            name: "大菜",
            food: [{
                    food_id: 1,
                    name: "鱼香肉丝",
                    price: 10
                },

                {
                    food_id: 2,
                    name: "红烧肉",
                    price: 10
                },

                {
                    food_id: 3,
                    name: "香辣粉",
                    price: 10
                }

            ]
        }, {
            type_id: 2,
            name: "中菜",
            food: [{
                food_id: 4,
                name: "小炒肉",
                price: 13
            }, {
                food_id: 5,
                name: "云吞",
                price: 14
            }]
        }, {
            type_id: 3,
            name: '小菜',
            food: [{
                food_id: 6,
                name: "雪糕",
                price: 15
            }, {
                food_id: 7,
                name: "黄瓜",
                price: 16
            }]
        }]
        var tbody = document.querySelector("tbody");

        function render() {

            var str = '';
            for (var j = 0; j < arr.length; j++) {
                // 获取其中一个菜系对象
                var obj = arr[j];
                // 获取该对象的数组属性 
                var food = obj.food;
                // 循环数组
                // 将数据展示到页面上，就是创建元素然后上树的过程
                for (var i = 0; i < food.length; i++) {
                    str += ["<tr>",
                        "<td>" + obj.name + "</td>",
                        "<td>" + food[i].name + "</td>",
                        "<td>" + food[i].price + "</td>",
                        "<td>" + "<button data-foodname=" + food[i].name + " data-name=" + obj.name + ">删除</button>" + "</td>",
                        "</tr>"
                    ].join("");
                }
            }
            tbody.innerHTML = str;
        }
        render();
        tbody.onclick = function(e) {
            // var e = e || window.event;
            // var d = e.target || e.srcElement
            // 利用事件对象e.target 进行触发事件元素的判断
            if (e.target.tagName.toLowerCase() === "button") {
                // 获取data-name 
                var name = e.target.getAttribute("data-name");
                // console.log(name);
                // 获取data-foodname 
                var foodname = e.target.getAttribute("data-foodname");
                // console.log(foodname);
                var obj = null;
                // 拿着name去确定这是数组中的哪个对象
                for (var i = 0; i < arr.length; i++) {
                    if (arr[i].name === name) {
                        obj = arr[i];
                        break;
                    }
                }
                // console.log(obj)
                // 获取到大菜系了 接着获取到菜系下面的食物数组
                var foodArr = obj.food;
                // 这回我们找的是索引
                var foodObjIdx = 0;
                for (var i = 0; i < foodArr.length; i++) {
                    if (foodArr[i].name === foodname) {
                        foodObjIdx = i;
                        break;
                    }
                }
                // 索引找到了 删除
                foodArr.splice(foodObjIdx, 1);
                // 重新调用render方法
                render();
            }
        }
    </script>
</body>

</html>
前端小王*
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
解决事件委托，无法获取该元素的自定义属性值问题
qq_42115928的博客
04-30 992
首先在从数据库查数据并显示的过程中，把删除按钮设置了一个自定义属性data-id，其值等于对应的商品id。 在写删除事件时，用事件委托的形式为该元素添加点击事件，并需要获取其 data-id 的值 代码如下： $(’#tbody’).on(‘click’,’.del_shop’,()=>{ let cart_id = $(this).attr(‘data_id’); console.log...
//吃货联盟订餐系统
Zhang080200的博客
07-11 407
package version;import java.lang.Thread.State;import java.net.StandardSocketOptions;import java.util.Scanner;public class Version2 { // 类变量 static User[] users = new User[5]; static Food[] foods = new...
增删改查功能
m0_63830967的博客
03-26 585
用ajax实现增删改查功能
jq根据json数据，动态生成一个二级联动菜单
web_hwg的博客
09-27 1713
jq根据json数据，动态生成一个二级联动菜单htmljson数据jq循环 html 蔬菜：<select name="vegetable" id="vegetable"> <option value="0">请选择类别一</option> </select> 水果：<select name="fruit" id="fruit"&gt...
作业6(往dom里添加节点)
weixin_48493160的博客
11-18 110
根据数据生成表格 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * {
Javascript：事件委托
最新发布
听海边涛声
06-22 178
Javascript：事件委托
event.Ninja.JS:事件委托模块。 如果您熟悉jQuery，那么您可能对它似乎很熟悉
05-11
$事件事件委托模块。 如果您熟悉jQuery，那么您可能对它似乎很熟悉this . Ninja ( [ '$event' ] , function ( $event ) { $event ( document ) . on ( 'addEventListener' , 'body' , function ( ) { } ) ;} ) ;
Evt:Javascript 事件委托
05-29
Javascript 事件委托。 应该比，因为它有命名空间 :smiling_face_with_sunglasses: . 缩小时约 2.3kb，gzip 时约 930 字节。 应用程序接口 // create a new instance var evt = new Evt ( '#mydiv' ) ; // Works ...
eventDelegation:事件委托和懒惰评估实践
06-01
1. **内存效率**：事件监听器的数量减少，占用的内存更少。 2. **动态元素**：新添加的元素自动继承事件监听，无需额外绑定。 3. **减少DOM操作**：避免频繁地对DOM进行查询和操作，提高性能。 ### 适用场景 - 当有...
JS中的事件委托实例浅析
10-18
JavaScript中的事件委托是一种高效处理大量动态元素事件的技术，它的核心思想是将事件监听器添加到父级元素上，而不是直接添加到每个子元素。通过利用事件冒泡的特性，当子元素触发事件时，事件会向上冒泡到父元素，...
javascript事件委托的方式绑定详解
10-24
也许偶尔就会遇到“事件委托”，但是，大多数时说的是“事件绑定”，对于“事件委托”，或是不提，或是浅尝辄止。对于我这个比较好奇的人来说，实在很蛋疼。尤其是想更多的了解“事件委托”的时候。
Food
oldMean的博客
11-23 337
package alice.bw.com.day04_yuekaodemo.domain; import java.util.List; /** * Created by Me on 2017/11/22. */ public class Food { /** * ret : 1 * data : [{"id":"8289","title":"油焖大虾","
Android 客户端通过内置API（HttpClient) 访问 服务器(用Spring MVC 架构) 返回的json数据全过程...
07-20 56
************************************************************服务器端代码************************************************************************** Spring Web MVC(Servlet) 具体细节就不说了，比较不一样的地方，下面会注明！ 1. web.xml...
vuex实现购物车
kgcwuli的博客
07-08 405
数据：index.js import Vue from "vue"; import Vuex from 'vuex'; Vue.use(Vuex); const state = { shop_list: [{ id: 11, name: '鱼香肉丝', price: 12, }, { id: 22, name: '宫保鸡丁', price:...
js:ES6
weixin_48493160的博客
11-26 505
学习js第十三天 ES6是ECMAScript的第6个大版本 是2015年出现的 它对现有的代码做了非常大的改动 新增了很多新内容： 作用域、关键字、类、语法、等 ES6中新增了块级作用域 配合let关键字一起使用 { var a = 10; let b = 11; } console.log(a); console.log(b); // b is not defined let与var的区别 //
作业(字符串转为对象的方法)
weixin_48493160的博客
11-25 415
请写一个函数，传入url，返回如下对象 var url = 'cid=123&type="image"&startTime=2017'; //1 split var arr = url.split("&"); console.log(arr) var obj = {} for (var i = 0; i < arr.length; i++) { var key = arr[i].sp
案例(点名、抽奖)
weixin_48493160的博客
11-26 412
震惊程序员竟然用代码搞这个！！！
作业3(数组)
weixin_48493160的博客
11-13 366
加密 某个公司采用公用电话传递数据数据是四位的整数， 在传递过程中是加密的 加密规则如下： 每位数字都加上5 然后用除以10的余数代替该数字 再将第一位和第四位交换 第二位和第三位交换 请编写一个函数， 传入原文， 输出密文 1 5 3 9 6 10 8 14 6 0 8 4 4 0 8 6 4 8 0 6 function ji
作业2（函数）
weixin_48493160的博客
11-12 348
打印99乘法表 <script> // 1 打印99乘法表 function fun() { for (var i = 0; i <= 9; i++) { for (var j = 1; j < i + 1; j++) { document.write(j + '*' + i + '=' + j * i + '&nbsp;&nbsp;&am
前端面试深度解析：事件委托、数据类型与Promise
"前端面试常见问题，包括Vue.js、JavaScript基础知识、事件委托、数据类型、对象遍历、NaN比较以及Promise的解析" 在前端开发中，面试官常常会考察开发者对于关键概念和技术的深入理解。以下是对给定内容中涉及的...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值