我的编程空间,编程开发者的网络收藏夹
学习永远不晚

如何理解javascript事件委托

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

如何理解javascript事件委托

这篇文章主要介绍“如何理解javascript事件委托”,在日常操作中,相信很多人在如何理解javascript事件委托问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”如何理解javascript事件委托”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

在javascript中,事件委托也称为事件托管或事件代理,就是把目标节点的事件绑定到祖先节点上;它是利用事件冒泡原理,管理某一类型的所有事件,利用父元素来代表子元素的某一类型事件的处理方式。

如何理解javascript事件委托

本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

在 JavaScript 中,事件委托(delegate)也称为事件托管或事件代理,是利用事件冒泡原理,管理某一类型的所有事件,利用父元素来代表子元素的某一类型事件的处理方式。

这样做的好处:优化代码,提升运行性能,真正把 HTML 和 JavaScript 分离,也能防止出现在动态添加或删除节点过程中注册的事件丢失的现象。

示例1

下面示例使用一般方法为列表结构中每个列表项目绑定 click 事件,单击列表项目,将弹出提示对话框,提示当前节点包含的文本信息。但是,当我们为列表框动态添加列表项目之后,新添加的列表项目没有绑定 click 事件,这与我们的愿望相反。

<button id="btn">添加列表项目</button>
<ul id="list">
    <li>列表项目1</li>
    <li>列表项目2</li>
    <li>列表项目3</li>
</ul>
<script>
    var ul = document.getElementById("list");
    var lis = ul.getElementsByTagName("li");
    for (var i = 0; i < lis.length; i ++) {
        lis[i].addEventListener('cluick', function (e) {
            var e = e || window.event;
            var target = e.target || e.class="lazy" data-srcElement;
            alert(e.target.innerHTML);
        }, false);
    }
    var i = 4;
    var btn = document.getElementById("btn");
    btn.addEventListener("click", function() {
        var li = document.createElement("li");
        li.innerHTML = "项目列表" + i++;
        ul.appendChild(li);
    });
</script>

示例2

下面示例借助事件委托技巧,利用事件传播机制,在列表框 ul 元素上绑定 click 事件,当事件传播到父节点 ul 上时,捕获 click 事件,然后在事件处理函数中检测当前事件响应节点类型,如果是 li 元素,则进一步执行下面代码,否则跳出事件处理函数,结束响应。

<button id="btn">添加项目列表</button>
<ul id="list">
    <li>列表项目1</li>
    <li>列表项目2</li>
    <li>列表项目3</li>
</ul>
<script>
    var ul = document.getElementById("list");
    ul.addEventListener('click', function(e) {
        var e = e || window.event;
        var target = e.target || e.class="lazy" data-srcElement;
        if (e.target && e.target.nodeName.toUpperCase()=="LI") {
            alert(e.target.innerHTML);
        }
    }, false);
    var i = 4;
    var btn = document.getElementById("btn");
    btn.addEventListener("click", function () {
        var li = document.createElement("li");
        li.innerHTML = "项目列表" + i++;
        ul.appendChild(li);
    });
</script>

当页面存在大量元素并且每个元素注册了一个或多个事件时,可能会影响性能。访问和修改更过的 DOM 节点时,程序就会更慢;特别是事件连接过程都发生在 load(或 DOMContentReady)事件中时,对任何一个富交互网页来说,这都是一个繁忙的时间段。另外,浏览器需要保存每个事件句柄的记录,也会占用更多内存。

到此,关于“如何理解javascript事件委托”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

如何理解javascript事件委托

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

javascript事件委托理解,jQuery .on()方法一步到位实现事件委托

事件委托是一种处理事件的技巧,可监听父元素上的事件,并针对子元素执行特定操作。jQuery的.on()方法提供了简洁易用的方式来实现事件委托。它允许在父元素上附加一个事件句柄,当子元素触发事件时,事件会冒泡到父元素并触发事件句柄,从而检查目标元素是否与子元素选择器匹配。如果匹配,则调用事件处理函数。事件委托的主要优点包括性能优化、代码简化和动态元素处理。
javascript事件委托理解,jQuery .on()方法一步到位实现事件委托
2024-04-02

如何使用 JavaScript 事件委托来处理复杂交互?(JavaScript事件委托怎样处理复杂交互)

在JavaScript开发中,处理复杂交互是一项常见且重要的任务。事件委托是一种有效的技术,它可以帮助我们更高效地处理大量的DOM元素的事件。下面我们将详细介绍JavaScript事件委托怎样处理复杂交互。一、事件委托的基本概念
如何使用 JavaScript 事件委托来处理复杂交互?(JavaScript事件委托怎样处理复杂交互)
JavaScript2024-12-20

JavaScript事件委托原理是什么

JavaScript事件委托原理是什么,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。一、什么是事件委托事件委托也称为事件代理。就是利用事件冒泡,把子元素的事件都绑定到父元素
2023-06-21

什么是javascript事件委托

本篇文章为大家展示了什么是javascript事件委托,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。在javascript中,事件委托就是利用冒泡的原理,将事件加到父元素或祖先元素上,触发执行效果。
2023-06-14

如何将 JavaScript 事件委托与其他技术相结合?(JavaScript事件委托如何与其他技术结合)

在前端开发中,JavaScript事件委托是一种非常实用的技术,它可以有效地减少事件处理程序的数量,提高性能,并使代码更易于维护。然而,事件委托并不是孤立的,它可以与其他技术结合使用,以实现更复杂的功能。本文将介绍如何将JavaScript事件委托与其他技术相结合,帮助你更好地理解和应用
如何将 JavaScript 事件委托与其他技术相结合?(JavaScript事件委托如何与其他技术结合)
JavaScript2024-12-19

怎么理解js事件委托

这篇文章主要讲解了“怎么理解js事件委托”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么理解js事件委托”吧!1、每个函数都是对象,占用内存。内存中的对象越多,性能越差。解决事件处理过多问
2023-06-25

C#委托和事件怎么理解

这篇文章主要介绍“C#委托和事件怎么理解”,在日常操作中,相信很多人在C#委托和事件怎么理解问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”C#委托和事件怎么理解”的疑惑有所帮助!接下来,请跟着小编一起来学习吧
2023-06-17

如何通过 JavaScript 事件委托来简化代码逻辑?(JavaScript事件委托怎样简化代码逻辑)

在JavaScript开发中,代码的简洁性和可维护性是非常重要的。而事件委托就是一种能够有效地简化代码逻辑的技术。一、什么是JavaScript事件委托?事件委托,也称为事件代理,是一种利用事件冒泡的特性,将事件处理程序
如何通过 JavaScript 事件委托来简化代码逻辑?(JavaScript事件委托怎样简化代码逻辑)
JavaScript2024-12-22

如何利用 JavaScript 事件委托有效应对复杂交互?(JavaScript事件委托怎样应对复杂交互)

在前端开发中,JavaScript事件委托是一种非常重要的技术,它可以帮助我们更高效地处理复杂的交互场景。本文将详细介绍JavaScript事件委托的概念、原理以及如何运用它来应对复杂交互。一、事件委托的概念事件委托,也称
如何利用 JavaScript 事件委托有效应对复杂交互?(JavaScript事件委托怎样应对复杂交互)
JavaScript2024-12-18

编程热搜

目录