JavaScript 事件冒泡与事件委托

用户83 发布于2019-08-22 17:10 / 2248人阅读

摘要：事件冒泡的事件流叫做事件冒泡。事件委托又称事件代理。对事件处理程序过多问题的解决方案就是事件委托。所有用到按钮的事件多数鼠标和键盘事件都适合采用事件委托。

事件冒泡

IE的事件流叫做事件冒泡。顾名思义当事件发生后，事件就开始从里向外传播，查看下方代码：


    
        
        Document

如果点击页面中的

元素，那么这个 chick 事件就会按照如下顺序传播：

click 事件在直系DOM 树的每一级节点都会发生（自下而上），直到 document 对象。

事件委托

又称事件代理。对“事件处理程序过多”问题的解决方案就是事件委托。事件委托利用了事件冒泡，只指定一个父类事件处理程序，就可以管理某一类型的所有子类元素事件。

三个

被单击，按照传统方式，会给他们多带带添加事件：

    document.getElementById("sayHi").onClick(function(){...})

点击事件不多的情况下还好，若是所有元素都采用这样的方式，结果就会有数不清的代码用于添加事件处理。就好比一万个人全挤到公司前台去拿快递，那场面，蔚为壮观啊！但是把快递放到前台，前台接收，然后分批次派送，就会舒服很多：

    document.getElementById("myList").onClick(function(ev){
        var e = ev || window.event;
        var target = e.target;
        switch (target.id) {
            case "goSth":
                ...
                break;
            case "doSth":
                ...
                break;
            ...
        }
    })

上面是用事件委托的方式，子元素是带有事件效果的，我们可以发现，当用事件委托的时候，根本就不需要去遍历元素的子节点，只需要给父级元素添加事件就好了，子元素点击，会通过以事件冒泡的方式激活父元素已添加的相同事件，减少了很多 js 对于 dom 的事件操作，占用更少的内存，这大概是事件委托的精髓所在。

所有用到按钮的事件（多数鼠标和键盘事件）都适合采用事件委托。

GPU云服务器云服务器 javascript事件委托委托事件事件委托冒泡事件

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

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

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
JavaScript 事件详解

摘要：事件监听函数标准的事件监听函数如下上面的示例表示先获得表示节点的对象，然后在这个对象上面添加了一个事件监听器，当监听到事件发生时，则调用回调函数，即在控制台输出。 JavaScript 事件解读 1. 事件基本概念事件是指在文档或者浏览器中发生的一些特定交互瞬间，比如打开某一个网页，浏览器加载完成后会触发 load 事件，当鼠标悬浮于某一个元素上时会触发 hover 事件，当鼠标点击...

Object 2019-08-19 18:12 评论0 收藏0
理解Javascript中的事件绑定与事件委托

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

lewinlee 2019-08-20 10:23 评论0 收藏0