美文网首页
js事件委托(事件代理)

js事件委托(事件代理)

作者: A郑家庆 | 来源:发表于2018-12-29 11:57 被阅读0次

定义:
事件委托就是在DOM事件的冒泡阶段,把具体dom上发生的事件委托给父元素或祖先元素去处理。
原理:
要了解委托的原理,首先要理解DOM事件的过程。
DOM事件分为三个阶段,如图

1546055801018.jpg
1.事件捕获阶段(红色箭头顺序)
2.事件冒泡阶段(绿色箭头顺序)
3.事件目标阶段(蓝色DOM)
事件捕获阶段,事件源依次从defaultView(可以理解为整个页面document),一直传播到具体的目标(点击目标target),从面到点。
在事件冒泡阶段,事件源依次从target传播到defaultView,范围越来越大,像冒泡一样,气泡越来越大,从点到面。

事件目标阶段就是点击的那个点。

注意:冒泡只会冒泡到父级元素不会冒泡到相邻元素。

优点:
1.提高性能:每一个函数都会占用内存空间,现在只需添加一个事件处理程序代理所有事件,所占用的内存空间更小,可以大大减少dom操作。
2.事件委托可以处理新增的dom元素。

Event对象提供了一个属性叫target,可以返回事件的目标节点,利用这个属性就可以给特定的dom添加事件。
适合事件委托的事件:click、mouseover、mouseout、mousedown、mouseup、keydown、keyup、keypress。

相关文章

  • JS写事件代理

    js中的事件委托或是事件代理详解

  • js 事件委托 事件代理

    js 事件委托 事件代理 JavaScript高级程序设计上解释:事件委托就是利用事件冒泡,只指定一个事件处理程序...

  • js事件委托/事件代理

    事件委托就是利用事件冒泡,只指定一个时间处理程序就可以管理某一类型的所有事例。 优点:提高性能 JavaScrip...

  • JS事件委托(事件代理)

    什么是事件委托? 举个例子,我们要实现点击 li 时打印其id 一般我们会给每一个li绑定一个事件处理函数 这种方...

  • js事件委托(事件代理)

    定义:事件委托就是在DOM事件的冒泡阶段,把具体dom上发生的事件委托给父元素或祖先元素去处理。原理:要了解委托的...

  • js事件委托(事件代理)

    起因: 1、这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的; 2、其实我一直都没弄明白,写这个一是为了...

  • js事件深入学习

    JavaScript的事件机制包含,事件绑定、事件监听、事件委托(事件代理)等 js中的事件流 ① .冒泡:当下级...

  • 事件委托

    还有很多要学,要加油哇。回正题。参考: js中的事件委托或是事件代理详解 1、基本概念事件委托就是利用事件冒泡,只...

  • 概念

    事件委托,事件代理 事件代理又称之为事件委托。是JavaScript中常用绑定事件的常用技巧。顾名思义,“事件代理...

  • js事件委托

    前言 事件委托,也叫事件代理,是js事件中的一种常用技巧。事件委托的原理就是利用冒泡事件的机制,为一些节点的祖先节...

网友评论

      本文标题:js事件委托(事件代理)

      本文链接:https://www.haomeiwen.com/subject/dtyulqtx.html