[JavaScript]什么是事件代理？

你的名字 2022-11-28 13:30 212阅读 0赞

事件代理,又称之为事件委托,是JS中绑定事件的常用技巧,顾名思义,**事件代理就是把原本需要绑定在子元素上的事件委托给父元素,事件代理的原理是冒泡机制**。下面我来举个例子:

<body>
    
        <button id="btn">添加按钮</button>
        
        <ul id="uls">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        
        <script>
        var lis = document.getElementsByTagName("li"),
            btn = document.getElementById("btn"),
            uls = document.getElementById("uls");
        
        btn.onclick = function(){ 
            var len = lis.length;
            var li = document.createElement("li");
            li.innerHTML = len;
            uls.appendChild(li);
        }
        
        uls.onclick = function(e){ 
            var e = window.event || e;
            var tar = e.target || e.srcElement;
            if(tar.nodeName=='LI'){ //注意这里要大写
                tar.style.background='red';
            }
        
        }
        //本身是给li添加事件，现在委托在ul身上
    	//如果不这么做，之后添加的li将绑定不了事件，因为js执行的时候lis.length已经定了
    	// for(var i=0;i<lis.length;i++){ 
    	// lis[i].onclick = function(){ 
    	// this.style.background='red'
    	// }
    	// }
        </script>
    </body>

发表评论取消回复

表情：

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

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

相关阅读

相关 JS (Javascript) 中的事件是什么？

简单来说，JavaScript 中的事件是指网页中发生的操作或事件。它可以由用户交互触发，例如单击按钮或移动鼠标，也可以由其他事件触发，例如页面完成加载或计时器达到特定间隔

た入场券/ 2023年10月13日 18:34/ 0 赞/ 21 阅读

相关什么是事件委托？JavaScript事件委托的实现原理

引言：事件委托应用在很多开发场景之中，但是很多同学对委托的原理、特别是对JS原生实现委托不太了解。每每看到此情此景我总觉得“众生皆苦”，正所谓“我不写文章，谁写文章”的普渡

心已赠人/ 2022年12月18日 11:51/ 0 赞/ 172 阅读

相关 [JavaScript]什么是事件代理？

事件代理,又称之为事件委托,是JS中绑定事件的常用技巧,顾名思义,事件代理就是把原本需要绑定在子元素上的事件委托给父元素,事件代理的原理是冒泡机制。下面我来举个例子:

你的名字/ 2022年11月28日 13:30/ 0 赞/ 213 阅读

相关面试官：解释下什么是事件代理？应用场景？

![format_png][] 一、是什么事件代理，俗地来讲，就是把一个元素响应事件（`click`、`keydown`......）的函数委托到另一个元素前面讲

傷城~/ 2022年11月04日 00:57/ 0 赞/ 214 阅读

相关什么是eventLoop 什么是事件循环事件轮询

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

朴灿烈づ我的快乐病毒、/ 2022年10月29日 06:25/ 0 赞/ 255 阅读

相关 Javascript事件代理の真理

一先看一个真实的，新手绑定onclik事件的例子如果按照之前的我，我会怎么给每一个li标签，添加onlick呢？废话，要是我，肯定简单粗暴。循环每一个li，然后

缺乏、安全感/ 2022年09月23日 15:55/ 0 赞/ 174 阅读

相关【JavaScript】什么是JavaScript？

终于学到了前端三剑客（HTML，CSS，JavaScript）之一的JavaScript。三剑客，团结一致，各司其职，共同完成网页前端的酷炫功能。 Htm

淡淡的烟草味﹌/ 2022年08月22日 05:48/ 0 赞/ 287 阅读

相关 JavaScript事件代理

事件代理 (event delegation) JavaScript事件代理是一种简单地技巧，通过它我们可以把事件处理器添加到一个父级元素上，这样就避免了把事件处理器添加到多

小鱼儿/ 2022年08月18日 15:15/ 0 赞/ 163 阅读

相关 javascript-委托事件(事件代理)

1.什么是委托事件？委托事件也叫做事件代理意思是一样的,就好像精灵图也叫雪碧图!!!只是不同叫法. 试想一下:假设公司里每次收快递的时候员工都跑到公司门口去收自己

我就是我/ 2022年06月12日 09:38/ 0 赞/ 287 阅读

相关 JavaScript 事件代理实例

事件代理：利用事件冒泡的特性，将本应该注册在子元素上的处理事件注册在父元素上，这样点击子元素时本身没有相应事件就到父元素上做出响应的反应。先看一个没有做代理的例子

淩亂°似流年/ 2021年07月24日 12:48/ 0 赞/ 352 阅读