• 理解 事件捕获、事件目标、事件冒泡、事件委托事件代理


    事件捕获
    
    从视图层进行事件操作后,进入HTML代码层,然后从元素的最顶层开始,从父到子到孙...一直寻找下去,直到找到触发该事件的元素。这个寻找的过程,称为“事件捕获”。
    事件目标
    
    当事件捕获过程到达了触发该事件的元素时,该元素被称为“事件目标”。
    事件冒泡
    
    找到事件目标后,该事件将从事件目标元素处,一层一层往上逐层传出,直到视图层显示出来,这个过程就叫做“事件冒泡”。
    事件委托(事件代理)
    
    在JS中,每一个函数都是一个对象,对象就要占用内存,所以为了性能优化(减少DOM和函数交互,性能优化主要思想之一),将所有事件处理放到JS中去,大大减少了操作DOM交互,从而提高了性能。
    方法就是把子元素的共同事件写在父元素上,这样当点击父元素时就能触发这个本来是子元素的事件,点击各个子元素时也能触发这个事件(因为事件冒泡,点击子元素会逐层向上触发每层事件),这就是把本来
    是多个子元素要绑定的共同事件,委托给了他们的父元素,这就是“事件委托”。 事件委托是利用事件的冒泡原理来实现的,何为事件冒泡呢?就是事件从最深的节点开始,然后逐步向上传播事件,举个例子:页面上有这么一个节点树,div
    >ul>li>a;比如给最里面的a加一个click点击事件,
    那么这个事件就会一层一层的往外执行,执行顺序a>li>ul>div,有这样一个机制,那么我们给最外面的div加点击事件,那么里面的ul,li,a做点击事件的时候,都会冒泡到最外层的div上,所以都会触发,
    这就是事件委托,委托它们父级代为执行事件。 事件委托的优点
    1.管理的函数变少了。不需要为每个元素都添加监听函数。对于同一个父节点下面类似的子元素,可以通过委托给父元素的监听函数来处理事件。 2.可以方便地动态添加和修改元素,不用因为元素的改动而修改事件绑定。 3.JavaScript和DOM节点之间的关联变少了,这样也就减少了因循环引用而带来的内存泄漏发生的概率。
  • 相关阅读:
    config 文件夹中的 dev.env.js
    config 文件夹中的 index.js
    Dialog 对话框 可拖拽
    Pagination 分页 封装
    ElasticSearch学习03--使用Java连接ES
    ElasticSearch学习02--使用Kibana管理ES
    ElasticSearch学习01--基本结构与操作
    redis学习02--使用Jedis调用Redis
    redis学习01--常用命令
    Java基础学习08--JDK1.8特性
  • 原文地址:https://www.cnblogs.com/panic404/p/13556938.html
Copyright © 2020-2023  润新知