vue-06-事件处理-复习

内联处理器

 <div id="box">
    {{counts}}

    <!-- 内联事件处理器 表达式 -->
    <button @click="counts++">add1</button>
    <!-- 处理一些自己参数、函数这些，还可以处理event，可以使用这个 -->
    <button @click="handleAdd2()">add2</button>

    <!-- 方法事件处理器 -->
    <!-- 只可以获取事件源  -->
    <button @click="handleAdd3">add3</button>

    <ul>
      <li @click="handleClick(1,2,$event)">ass</li>

      <li @click="(evt)=>handleClick2(3,4,5,evt)">222</li>
    </ul>

  </div>

 <script>
    var obj = {
      data() {
        return {
          counts: 0
        }
      },
      methods: {

        handleAdd2() {
          this.counts++
        },

        handleAdd3(evt) {
          this.counts++
        },
        handleClick(a, s, evt) {
          console.log(a, s, evt.target);
        },
        handleClick2(q, w, e, evt) {
          console.log('箭头函数', q, w, e, evt.target);
        }
      },
    }
    var app = Vue.createApp(obj).mount("#box")
  </script>

---

运行结果：

---

加一个：

  <ul @click="handleUlClick()">
      <li @click="handleClick(1,2,$event)">ass</li>
      <li @click="(evt)=>handleClick2(3,4,5,evt)">222</li>
  </ul>

  methods: {

        handleClick(a, s, evt) {
          console.log(a, s, evt.target);
        },

        handleClick2(q, w, e, evt) {
          console.log('箭头函数', q, w, e, evt.target);

          // 阻止冒泡行为  属于原生事件
          evt.stopPropagation();

        },

        handleUlClick() {
          console.log('点击任何一个孩子都会触发调用父元素，所以可以利用stopPropagation阻止冒泡');
        }

      },
   

运行结果：