资讯专栏INFORMATION COLUMN

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

frolc / 1077人阅读

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

作者:白狼 出处: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"); });
  • [考虑目前国内网站大部分采集文章十分频繁,更有甚者不注明原文出处,原作者更希望看客们查看原文,以防有任何问题不能更新所有文章,避免误导!]
    查看原文

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

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

    相关文章

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

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

      lewinlee 评论0 收藏0
    • 简单聊聊浏览器JS事件触发机制

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

      enrecul101 评论0 收藏0
    • Javascript事件

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

      baiy 评论0 收藏0
    • Javascript事件

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

      luffyZh 评论0 收藏0
    • Javascript事件

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

      pcChao 评论0 收藏0

    发表评论

    0条评论

    最新活动
    阅读需要支付1元查看
    <