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

事件委托(事件代理)

作者: 池鱼_故渊 | 来源:发表于2020-11-19 11:17 被阅读0次

概念

两者指的是同一件事情,只是角度不同,比如,一个A元素把事件交给父级元素B处理,那么A就是委托方,B就是代理放
事件委托:其实就是利用事件冒泡把自己的事件委托给父级元素处理,如果没有冒泡的事件是不支持事件委托的。

应用场景

比如我们有一段富文本编辑器传过来的内容,我们需要操作其中的a链接,我们可以直接操作字符串正则匹配,,但是这种方式过于麻烦。这个时候我们就可以使用事件委托,把事件委托给父元素,然后我们劫持a标签,处理跳转。
vue 实例代码

// html部分
<div class="content" @click.capture="openLink" v-html="this.data"></div>
// @click.capture vue提供的事件捕获
//方法
openLink (e) {
      const { target } = e
      if (target.tagName === 'A') {
        const src = e.target.getAttribute('href')
        e.preventDefault()
        e.stopPropagation()
        // 然后在这里可以处理自己向要调用的方法
      }
    },

相关文章

  • 概念

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

  • 前端常见面试题(十一)@郝晨光

    什么是事件委托?为什么要用事件委托? 什么是事件委托? 事件委托,又称事件代理,就是将元素的事件处理交由父元素或者...

  • 事件委托

    事件委托 什么是事件委托(事件代理): 事件委托就是利用事件冒泡的原理,将事件注册到父元素上,减少子元素的事件注册...

  • 事件委托(事件代理)

    利用事件的冒泡传播机制(触发当前元素的某个行为,它父级所有的相关行为都会被触发),如果一个容器中很多元素需要绑定事...

  • 事件委托(事件代理)

    链接地址:http://www.cnblogs.com/liugang-vip/p/5616484.htmlhtt...

  • 事件代理/事件委托

    利用事件冒泡机制,通过设置一个事件处理程序,来管理某一类型的所有事件。(例如:取快递、ul-li操作) 1. 取快...

  • 事件委托/事件代理

    什么是事件委托/事件代理?利用事件的冒泡传播机制(触发当前元素的某一个行为,它父级所有元素相关行为都会被触发),如...

  • 事件代理(事件委托)

    事件流 事件从页面中接收事件的顺序 事件捕获 从window对象传到目标节点(上层到下层),成为捕获阶段 事件冒泡...

  • 事件委托(事件代理)

    概念 两者指的是同一件事情,只是角度不同,比如,一个A元素把事件交给父级元素B处理,那么A就是委托方,B就是代理放...

  • 事件委托(事件代理)

    事件委托原理:事件冒泡机制 优点: 1.大量减少内存占用,减少事件注册。 2.新增元素实现动态绑定事件 实现方式:...

网友评论

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

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