js原生事件委托

最新推荐文章于 2022-08-27 13:34:27 发布
最新推荐文章于 2022-08-27 13:34:27 发布
阅读量443 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/smileboyjian/article/details/76014433
版权

1.普通的是事件委托  这里有一个兼容性要注意,var e=e|| window.event;var target = e.target || e.srcElement;  都是为了兼容IE

<body>
<ul id="ul1">
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>
<script type="text/javascript">
window.οnlοad=function(){
var oUl = document.getElementById("ul1");
oUl.οnclick=function(e){
var e=e|| window.event;
var target = e.target || e.srcElement;
if(target.nodeName.toLowerCase() == "li"){
alert(target.innerHTML)
}
}
}
</script>
</body>


2,子元素每个事件都不相同,

<body>
<div id="box">
        <input type="button" id="add" value="添加" />
        <input type="button" id="remove" value="删除" />
        <input type="button" id="move" value="移动" />
        <input type="button" id="select" value="选择" />
    </div>
</body>
<script type="text/javascript">
var oBox = document.getElementById("box");
oBox.οnclick=function(e){
e = e || window.event;
var target = e.target || e.srcElement;
if(target.nodeName.toLowerCase() == 'input'){
switch(target.id){
case 'add':
alert('添加');
break;
case 'remove':
alert('删除');
break;
case 'move':
alert('移动');
break;
case 'select':
alert('选择');
}
}
}
</script>


3.新增子元素如何事件委托

<body>
<input type="button" name="" id="btn" value="添加" />
   <ul id="ul1">
       <li>111</li>
       <li>222</li>
       <li>333</li>
       <li>444</li>
   </ul>
</body>
<script type="text/javascript">
 var oBtn = document.getElementById("btn");
          var oUl = document.getElementById("ul1");
          var aLi = oUl.getElementsByTagName('li');
          var num = 4;
          
            //事件委托，添加的子元素也有事件
            oUl.onmouseover = function(ev){
                var ev = ev || window.event;
                var target = ev.target || ev.srcElement;
                if(target.nodeName.toLowerCase() == 'li'){
                    target.style.background = "red";
                }
                
            };
            oUl.onmouseout = function(ev){
                var ev = ev || window.event;
                var target = ev.target || ev.srcElement;
                if(target.nodeName.toLowerCase() == 'li'){
                    target.style.background = "#fff";
                }
                
            };
            oBtn.onclick = function(){
                num++;
                var oLi = document.createElement('li');
                oLi.innerHTML = 111*num;
                oUl.appendChild(oLi)
            }
</script>

夜之悠然
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript之事件委托实例(附原生js和jQuery代码)
10-19
下面小编就为大家带来一篇JavaScript之事件委托实例(附原生js和jQuery代码)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JavaScript事件委托原理与用法实例分析
12-01
所以该博文会解释一下原生js的事件委托的原理，为什么会有事件委托，为什么可以这样用事件委托等等问题。 1. js中的事件流 在解析事件委托之前，我们先回顾一下js中的事件流，即冒泡和捕获。 ① .冒泡：当下级节点...
JS基础_事件的冒泡
weixin_41804367的博客
08-31 177
事件的冒泡 1、什么是事件的冒泡？ 当某个子类元素的某类型事件被触发时，其父类元素、祖类及以上级元素的相同类型的事件也会产生效果。 2、举例 <html> <!--编码格式--> <meta charset="UTF-8"> <head> <style> #box { width: 200px; height: 200px; backgr
原生js 事件委托
qq_43218707的博客
05-08 216
在开发过程中我们会经常遇到动态的添加一些html元素，例如li，此时如果我们想要给新增加的li添加鼠标点击事件会有点困难，同理，ul/ol下有很多li，我们不可能每个都给他们写一次监听事件的代码，此时我们就要用到事件委托。 即将监听要执行的事件委托给li的公共的父辈，这里我们使用的原理是冒泡，因为我们点击li，即使它本身没有绑定点击事件，但是会冒泡到ul上，ul则会执行，如何得到鼠标具体点击的是哪...
原生js事件委托
demiling的博客
10-23 6838
之前面试的时候就被问过，什么是事件委托？ 事件委托：给父元素绑定事件，用来监听子元素的冒泡事件。也就是事件目标（子元素）不处理事件，把事件委托给父元素去处理。 看下图理解事件冒泡： 事件委托的好处：不需要对每一个子元素绑定事件，只需要在父元素上绑定事件，减少了操作DOM节点的次数，从而减少浏览器的重加载，提高代码的性能。 因此当子元素较多，需要对子元素进行监听的时候，可以使用事件委托。 //原生...
原生js的事件委托
butcher的博客
06-22 926
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>事件委托</title> </head> <body> <ul i
详解js的事件代理（委托）
01-19
JavaScript事件代理（委托）一般用于以下情况：  1. 事件注册在祖先级元素上，代理其子级元素。可以减少事件注册数量，节约内存开销，提高性能。  2. 对js动态添加的子元素可自动绑定事件。 之前一直用各种js库的...
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
01-21
本文实例讲述了JS实现为动态添加的元素增加事件功能。分享给大家供大家参考，具体如下： 我们在日常开发中有时会通过js创建一些元素，但是如果使用原始的for循环给创建的节点添加事件的方法往往行不通： <!...
原生JS实现事件委托
Essentric_
05-29 7876
什么是事件委托？ 它还有一个名字叫事件代理，JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。 举个栗子： 有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优...
对于原生js中的事件委托解析
yaojxing的博客
06-02 2149
js中事件委托，以及事件委托可以使用的原理。
原生js事件委托怎么做？
gztrljh
11-29 148
https://www.cnblogs.com/maryyin/p/13665822.html https://blog.csdn.net/demiling/article/details/83311102
原生js中的事件委托
qq_41445106的博客
07-17 234
事件委托：利用事件冒泡的原理，把本应该添加给某元素的事件委托给父级 不用事件委托获取ul中的li <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <script type="text/java...
原生js事件委托与简单的jquery事件委托方法
wangcuiling_123的博客
07-19 648
事件委托： 将事件绑定到父元素身上，由子元素触发事件 适用于元素后续添加或删除情况： jquery语法：$(selector).on(event, childSelector, function (){});   原生js： //找到父元素，添加事件监听器... document.getElementById(parentSelector).addEventListener(event,
JS事件委托
YuHang6686的博客
04-10 8356
作用：事件委托主要用来减少内存消耗，不用处理多次循环绑定 使用方法： var target = document.getElementsById("获取元素") //元素调用 target.addEventListener(type, listener, options); type：必选参数,需要绑定的事件名称，"不要带on" listener:必选参数，回调函数，你需要绑定的方法； options：可选参数，默认为false；表示"事件冒泡"，设置为true后为"事件捕获" 1、捕获阶段：事件从win
原生js事件委托具体实现
weixin_52772897的博客
03-24 318
<body> <ul id="ul"> <li>0</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <b...
js事件委托
Free雅轩的博客
08-27 1134
对于第二个优点我们遇到的应该比较多，例如当我们需要在ul中动态添加几个li时，如果用传统的方法，for循环为li添加事件，问题就出现了，最开始有的li是有onmouseover和onmouseout事件的，但是后来动态生成的li里没有这两个事件处理函数，因为for循环的时候它还没生成。而事件委托的方式就没事，当后来动态生成的li出现的时候，不用做改变，移到它身上，还是变色的，因为事件是绑定在ul身上的。实现原理：js中事件冒泡我们知道，子元素身上的事件会冒泡到父元素身上。js事件委托有的说法也叫事件代理。.
1.事件委托的原理以及优缺点 2. 手写原生js实现事件代理，并要求兼容浏览器
tanzhenyan的博客
08-30 536
Q：事件的委托（代理 Delegated Events）的原理以及优缺点A：委托（代理）事件是那些被绑定到父级元素的事件，但是只有当满足一定匹配条件时才会被挪。这是靠事件的冒泡机制来实现的，优点是：（1）可以大量节省内存占用，减少事件注册，比如在table上代理所有td的click事件就非常棒 （2）可以实现当新增子对象时无需再次对其绑定事件，对于动态内容部分尤为合适缺点是：事件代理的应用常用应该仅
经典面试题分析——原生JS如何实现事件委托
欧阳的技术博客
08-07 993
原生JS实现事件委托1. 什么是事件委托2. 实现事件委托（第一步，基本结构）3. 编写一个添加节点的方法先4. 实现事件委托 1. 什么是事件委托 官方文档 事件委托就是利用事件冒泡，指定一个事件处理程序，就可以管理某一类型的所有事件。———— JS高程 举个例子 我们将快递寄到公司，但是可能快递到的时候，我们人却没在，便可以委托前台小姐姐代收。 第一：现在委托前台的同事是可以代为签收的，即程序中的现有的dom节点是有事件的 第二，新员工也是可以被前台MM代为签收的，可能人还没到，快递先到了，即程序
给我写一段原生js事件委托的代码
最新发布
03-11
好的，以下是一段原生js事件委托的代码： ```javascript document.addEventListener('click', function(event) { if (event.target.matches('.my-class')) { // 在这里写你想要执行的代码 } }); ``` 这段代码会...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值