您好,欢迎访问代理记账网站
移动应用 微信公众号 联系我们

咨询热线 -

电话 15988168888

联系客服
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

Vue3事件处理,事件捕获顺序

用v-on(简写@)监听DOM事件,触发事件时候执行javaScript

当绑定的是无参函数时候括号可以省略(两种效果等同)

<template>
  <div>
    <button v-on:click="clickHandle">按钮1</button>
    <button v-on:click="clickHandle()">按钮2</button>
  </div>
</template>

<script>

  import {reactive, toRefs} from "@vue/reactivity";

export default {
  name: 'App',
  components: {
  },
  setup() {
    const state = reactive({

    })
    const clickHandle = () => {
      document.write("我是clickHandle事件");
    }
    return {
      ...toRefs(state),
      clickHandle
    }
  }
}
  </script>

  <style>

</style>

当绑定的是有参函数<script></script>中的对应的函数必须有形参与之相对应。

#下列代码执行结果为向页面输出Helloworld。

<template>
  <div>
    <button v-on:click="clickHandle('HelloWorld!')">按钮1</button>
  </div>
</template>

<script>

  import {reactive, toRefs} from "@vue/reactivity";

export default {
  name: 'App',
  components: {
  },
  setup() {
    const state = reactive({
    
    })
    const clickHandle = (e) => {
      document.write(e);
    }
    return {
      ...toRefs(state),
      clickHandle
    }
  }
}
  </script>

  <style>

</style>

同时绑定多个函数

#此时点击一次按钮,绑定的两个事件都运行。

<template>
  <div>
    <button v-on:click="clickHandle(),clickHandle1()">按钮1</button>
  </div>
</template>

<script>

  import {reactive, toRefs} from "@vue/reactivity";

export default {
  name: 'App',
  components: {
  },
  setup() {
    const state = reactive({
    })
    const clickHandle = () => {
      document.write("我是事件---------");
    }
    const clickHandle1 = () => {
      document.write("我是事件1");
    }
    return {
      ...toRefs(state),
      clickHandle,
      clickHandle1
    }
  }
}
  </script>

  <style>

</style>

把事件event作为参数传入,可以在javaScript操作DOM树

常用的几个方法

e.target

是你当前点击的元素

e.currentTarget

是你绑定事件的元素

e.currentTarget.previousElementSibling.innerHTML

获得点击元素的前一个元素

e.currentTarget.firstElementChild

获得点击元素的第一个子元素

e.currentTarget.nextElementSibling

获得点击元素的下一个元素

e.currentTarget.getElementById("string")

获得点击元素中id为string的元素

e.currentTarget.getAttributeNode('string')

获得点击元素的string属性

e.currentTarget.parentElement

获得点击元素的父级元素

e.currentTarget.previousElementSibling.firstElementChild.innerHTML

获得点击元素的前一个元素的第一个子元素的HTML值

<template>
  <div>
    <button v-on:click="clickHandle($event)">按钮1</button>
  </div>
</template>

<script>

  import {reactive, toRefs} from "@vue/reactivity";

export default {
  name: 'App',
  components: {
  },
  setup() {
    const state = reactive({
    })
    const clickHandle = (e) => {
      e.target.style.background = 'red';
    }
    return {
      ...toRefs(state),
      clickHandle,
    }
  }
}
  </script>

  <style>

</style>

 事件修饰符


<!-- 阻止单击事件继续冒泡 -->
<a @click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form @submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a @click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form @submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理,然后才交由内部元素进行处理 -->
<div @click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div @click.self="doThat">...</div>

事件的冒泡与捕获

 

 

<template>
  <div>
    <div @click="clickHandle1()">最外层div
      <div @click="clickHandle2()">中间层div
        <p @click="clickHandle3()">最内层p</p>
      </div>
    </div>
    {{message}}
  </div>
</template>

<script>

  import {reactive, toRefs} from "@vue/reactivity";

export default {
  name: 'App',
  components: {
  },
  setup() {
    const state = reactive({
      message: ''
    })
    const clickHandle1 = () => {
      state.message = state.message+'我是最外层'
    }
    const clickHandle2 = () => {
      state.message = state.message+'我是中间层'
    }
    const clickHandle3 = () => {
      state.message = state.message+'我是最内层'
    }

    return {
      ...toRefs(state),
      clickHandle1,
      clickHandle2,
      clickHandle3
    }
  }
}
  </script>

  <style>

</style>

首先是进入捕获阶段(1->2->3->4),直到达到目标元素,在进入冒泡阶段(5->6->7->8)。如果此时给div,span,p分别绑定一个时间(默认事件是冒泡触发).

执行上述代码

如果点击最外层(点击7),仅仅执行最外层。

如果点击中间层(点击6),中间层,最外层都会被执行。

如果点击最内层(点击5),追内层,中间层,最外层都会被执行。

<template>
  <div>
    <div @click="clickHandle1()">最外层div
      <div @click.capture="clickHandle2()">中间层div
        <p @click="clickHandle3()">最内层p</p>
      </div>
    </div>
    {{message}}
  </div>
</template>

<script>

  import {reactive, toRefs} from "@vue/reactivity";

export default {
  name: 'App',
  components: {
  },
  setup() {
    const state = reactive({
      message: ''
    })
    const clickHandle1 = () => {
      state.message = state.message+'我是最外层'
    }
    const clickHandle2 = () => {
      state.message = state.message+'我是中间层'
    }
    const clickHandle3 = () => {
      state.message = state.message+'我是最内层'
    }

    return {
      ...toRefs(state),
      clickHandle1,
      clickHandle2,
      clickHandle3
    }
  }
}
  </script>

  <style>

</style>

当给中间层的事件绑定为捕获阶段获取

如果点击最外层(点击6),仅仅执行最外层。

如果点击中间层(点击3)[注意因为给中间层绑定了capture修饰符,该事件在捕获阶段处理],

执行顺序为,(3)中间层内点击,(7)最外层被点击

原因如下:

####首先是进入捕获阶段(1->2->3),已经达到目标元素,在进入冒泡阶段(6->7->8)。就不会再进入最内层。

如果点击最内层(点击4),追内层,中间层,最外层都会被执行。


分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进