e.target+addEventListener事件委托

缺乏、安全感 2023-10-03 14:48 47阅读 0赞

## *e*.target+addEventListener事件委托 ##

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>事件委托</title>
        <style>
            ul li {
          
                cursor: pointer;
            }
        </style>
    </head>
    
    <body>
        <ul>
            <li>知否知否，点我应有弹框在手！</li>
            <li>知否知否，点我应有弹框在手！</li>
            <li>知否知否，点我应有弹框在手！</li>
            <li>知否知否，点我应有弹框在手！</li>
            <li>知否知否，点我应有弹框在手！</li>
        </ul>
        <script>
            // 事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点
    
            var ul = document.querySelector('ul');
    
    
            ul.addEventListener('click', function (e) {
          
                //  alert('知否知否，点我应有弹框在手！');
                // e.target    这个可以得到我们点击的对象
                e.target.style.backgroundColor = 'red'
    
    
            })
    
    
    
            /*  */
            /*         var lis = document.querySelectorAll('li'); */
            /*         for (var i = 0; i < lis.length; i++) { */
            /*
            /*             lis[i].onclick = function () { */
            /*                 for (var i = 0; i < lis.length; i++) { */
            /*                     lis[i].className = ' '; */
            /*                 } */
            /*                 this.className = 'current'; */
            /*             } */
            /*         } */
            /*  */
            /*  */
    
    
        </script>
    </body>
    
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，47人围观）

还没有评论，来说两句吧...

相关阅读

相关事件委托

事件委托概念：利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。首先封装好EventUtil以便兼容IE var EventUtil = {

绝地灬酷狼/ 2023年07月14日 05:47/ 0 赞/ 137 阅读

相关事件委托

最近刷Zepto视频时，听到里面提到了事件委托，就去查了一下，对事件委托有了些了解，特总结一下。什么是事件委托事件委托是利用事件冒泡，只指定一个事件处理程序

素颜马尾好姑娘i/ 2023年06月02日 11:54/ 0 赞/ 102 阅读

相关事件委托

事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。所有用到按钮的事件（多数鼠标事件和键盘事件）都适合采用事件委托技术，使用事件委托可以节省内存。

悠悠/ 2022年12月25日 04:00/ 0 赞/ 277 阅读

相关事件的委托

之前给li写事件的时候发现，用代码新添加的li不能像之前的事件。如同下图！ ![20160922200151222][] 后来改变看到有事件委托就可以修复这个bug!

川长思鸟来/ 2022年09月26日 12:59/ 0 赞/ 284 阅读

相关委托与事件

前面讲到了[委托][Link 1]，正如上篇文章所述，委托的出现标志着事件的出现。上篇文章中我们没有用到事件，但细心的读者是否发现，无论是如何使用委托，都会在People

今天药忘吃喽~/ 2022年08月07日 04:35/ 0 赞/ 330 阅读

相关委托和事件

委托委托就是将方法当作变量来使用。把委托作为方法的一个载体，方法好像参数一样可以被传递，并进行运算。委托相当于函数的工厂。委托是类型，就好像类是类型一样。（类封装了方法

秒速五厘米/ 2022年07月31日 01:52/ 0 赞/ 376 阅读

相关事件委托机制

事件委托机制事件委托机制是利用的是冒泡的原理的，把事件的监听转换到其父元素上，也就是把事件绑定到父元素上面，然后在事件中获取子元素的对象，对其进行相应的操作。

柔光的暖阳◎/ 2022年06月07日 13:16/ 0 赞/ 393 阅读

相关 vue事件委托

vue事件委托在vue中完成事件委托是非常方便的例如下面想要点击li标签输入每个li标签的数值 <ul> <li>1</li>

川长思鸟来/ 2021年12月11日 02:57/ 0 赞/ 538 阅读

相关 zepto 事件委托

$('父元素选择器').on('无on的事件','子元素选择器',function(){})' 给父元素的子元素委托事件（1）同jq区别:可

朴灿烈づ我的快乐病毒、/ 2021年07月24日 20:36/ 0 赞/ 593 阅读

相关 javascript事件委托和jquery事件委托

javascript事件委托和jquery事件委托初衷：很多的面试都会涉及到事件委托，前前后后也看过好多博文，写的都很不错，写的各有千秋，自己思前想后，为了以后自己的查...

朱雀/ 2020年07月02日 07:28/ 0 赞/ 1181 阅读