事件委托(事件代理)

2020-11-19  本文已影响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()
        // 然后在这里可以处理自己向要调用的方法
      }
    },
上一篇 下一篇

猜你喜欢

热点阅读