js动态添加事件-事件委托

frolc 发布于2019-08-20 11:02 / 1034人阅读

摘要：解决这一问题的核心就是利用的委托事件。但是，如果用事件委托，只需要一个元素绑定事件即可。

作者：白狼出处：http://www.manks.top/javascri... 本文版权归作者，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
其所谓的动态添加事件实质就是指js中的事件委托。

我们知道在js中，事件处理只能绑定在当前被选中的元素上，换句话也就是说，事件处理只能绑定在当前文档已经存在的元素上！但是，往往小伙伴们都会遇到一个问题就是，我的元素是后来动态添加到页面的，而我又想给该元素绑定事件，怎么处理？

为了说明白这一问题，我们假设需要给后来添加到当前页面的元素添加click事件。

解决这一问题的核心就是利用js的委托事件。委派事件的优势就是可以给未存在的元素绑定事件，而且委派事件往往开销也会更小！

题外话：举一个最简单的例子：当页面上有1000个div的时候，如果直接给div绑定click事件，其会为1000个元素绑定事件。但是，如果用事件委托，只需要一个元素绑定事件即可。PS:希望啰里啰嗦能够让你明白事件委托的含义。

我们只是想知道动态创建的元素如何添加事件，你说这么多做什么，做什么...

好吧，言归正传，看具体实现：

// 模拟动态创建元素li
$.ajax({
    type: "get",
    data: {},
    success: function () {                
        $("").addClass("aaa").html("11111111").appendTo($("body"));
    },
});

// 给为我们刚刚动态创建的元素添加事件
$(document).on("click", "li[class=aaa]", function(){
    console.log("ffffd");
});

[考虑目前国内网站大部分采集文章十分频繁，更有甚者不注明原文出处，原作者更希望看客们查看原文，以防有任何问题不能更新所有文章，避免误导！]
查看原文

云服务器 GPU云服务器 js事件委托什么是js 事件委托 js添加事件委托事件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80361.html

理解Javascript中的事件绑定与事件委托

摘要：最近在深入实践中，遇到了一些问题，比如我需要为动态创建的元素绑定事件，那么普通的事件绑定就不行了，于是通过上网查资料了解到事件委托，因此想总结一下中的事件绑定与事件委托。事件冒泡认为事件促发的最深层元素首先接收事件。最近在深入实践js中，遇到了一些问题，比如我需要为动态创建的DOM元素绑定事件，那么普通的事件绑定就不行了，于是通过上网查资料了解到事件委托，因此想总结一下js中的事件绑...

lewinlee 2019-08-20 10:23 评论0 收藏0
简单聊聊浏览器JS事件触发机制

摘要：事件冒泡由微软提出，事件会从最内从的元素开始发生，再向外传播，正好与事件捕获相反。为了解决上述问题，我们可以利用事件委托的思想，在父级注册一个事件监听器，统一进行子元素的事件处理。原理事件捕获由网景最先提出，事件会从最外层开始发生，直到最具体的元素，也就是说假如父元素与子元素都绑定有点击事件，又互相重叠，那么先出发的会是父元素的事件，然后再传递到子元素。事件冒泡由微软提出，事...

enrecul101 2019-08-23 15:35 评论0 收藏0
Javascript事件流

摘要：见下图更直观在事件流中，事件的目标在捕获阶段不会接受到事件，这意味着在捕获阶段，事件从到后就停止了。下一个阶段是目标阶段，于是事件在上发生，并在事件处理中被看成是冒泡阶段的一部分，然后，冒泡阶段发生，事件又传回。 CONTENTS DOM事件流事件冒泡阻止冒泡事件捕获事件委托 DOM事件流 1.什么是事件流？事件流所描述的是从页面中接受事件的顺序 2.DOM事件流的三个阶...

baiy 2019-08-22 18:48 评论0 收藏0
Javascript事件流

摘要：见下图更直观在事件流中，事件的目标在捕获阶段不会接受到事件，这意味着在捕获阶段，事件从到后就停止了。下一个阶段是目标阶段，于是事件在上发生，并在事件处理中被看成是冒泡阶段的一部分，然后，冒泡阶段发生，事件又传回。 CONTENTS DOM事件流事件冒泡阻止冒泡事件捕获事件委托 DOM事件流 1.什么是事件流？事件流所描述的是从页面中接受事件的顺序 2.DOM事件流的三个阶...

luffyZh 2019-08-02 10:57 评论0 收藏0
Javascript事件流

摘要：见下图更直观在事件流中，事件的目标在捕获阶段不会接受到事件，这意味着在捕获阶段，事件从到后就停止了。下一个阶段是目标阶段，于是事件在上发生，并在事件处理中被看成是冒泡阶段的一部分，然后，冒泡阶段发生，事件又传回。 CONTENTS DOM事件流事件冒泡阻止冒泡事件捕获事件委托 DOM事件流 1.什么是事件流？事件流所描述的是从页面中接受事件的顺序 2.DOM事件流的三个阶...

pcChao 2019-08-30 15:54 评论0 收藏0