uniapp中常用的事件处理方法详解

<button @click="handleClick">点击我</button>

这里绑定了一个 click 事件，并且绑定的函数是 handleClick。

<!-- 阻止默认行为 -->
<button @click.prevent="handleClick">点击我</button>

<!-- 阻止事件冒泡 -->
<button @click.stop="handleClick">点击我</button>

<!-- 使用事件捕获模式 -->
<button @click.capture="handleClick">点击我</button>

<!-- 只有当事件是从事件源本身触发时才触发回调函数 -->
<button @click.self="handleClick">点击我</button>

<!-- 只触发一次回调函数 -->
<button @click.once="handleClick">点击我</button>

<!-- 提高页面滚动的流畅度 -->
<button @click.passive="handleClick">点击我</button>

具体示例：

当一个链接被点击时，会触发 click 事件。如果链接没有设置 href 属性，则默认的行为是不进行跳转，

但如果设置了 href 属性，则会跳转到 href 指定的页面。
在这种情况下，可以使用 .prevent 和 .stop 修饰符来阻止链接的默认跳转行为和冒泡传播。


我们给链接设置了 href 属性，并绑定了 click 事件和 handleLinkClick 方法。
同时，我们在链接上使用了 .prevent 和 .stop 修饰符来阻止默认的跳转行为和冒泡传播。
<template>
  <div @click="handleDivClick">//上层点击事件。用了检测下面的点击事件有没有冒泡上来
    <a href="https://www.example.com" rel="external nofollow"  @click.prevent.stop="handleLinkClick">点击我</a>
  </div>
</template>

<script>
export default {
  methods: {
    handleLinkClick() {
      console.log('内部事件————链接被点击了');
    },
    handleDivClick() {
      console.log('外部事件————div 被点击了');
    }
  }
};
</script>
在点击链接时，控制台会输出 【内部事件————链接被点击了】
链接被点击了，而不会进行跳转。
同时，由于使用了 .stop 修饰符，事件也不会向上层元素冒泡传播，因此点击链接时不会触发外部事件 handleDivClick 方法。

1、如果我们把 .prevent 修饰符去掉，点击链接时会进行跳转。说明默认行为存在，但是被阻止了。

2、如果把 .stop 修饰符去掉，点击链接时会触发 handleDivClick 方法。说明点击事件冒泡了。

这说明了 .prevent 和 .stop 修饰符的区别，.prevent 可以阻止默认行为，.stop 可以阻止冒泡传播。

默认行为指的是元素在触发某些事件时，浏览器会执行的预设行为。
例如，当用户点击一个链接时，浏览器默认会跳转到该链接所指定的 URL。当用户提交一个表单时，浏览器默认会向服务器发送表单数据并刷新页面。
这些行为是浏览器内置的，可以通过 JavaScript 代码来阻止或修改。

export default {
  onLoad() {
    console.log('页面加载完成');
  },
  onReady() {
    console.log('页面初次渲染完成');
  },
  onShow() {
    console.log('页面展示');
  },
  onHide() {
    console.log('页面隐藏');
  },
  onUnload() {
    console.log('页面卸载');
  }
}

// 发送自定义事件
uni.$emit('myEvent', {data: '自定义事件参数'});

// 监听自定义事件
uni.$on('myEvent', (data) => {
  console.log('接收到自定义事件', data);
});
这里通过 uni.$emit 发送了一个名为 myEvent 的自定义事件，
并传递了一个参数 {data: '自定义事件参数'}。在需要监听该事件的地方，
可以使用 uni.$on 方法来监听该事件，并在回调函数中处理事件。

<button @click="handleClick">点击我</button>

methods: {
  handleClick($event) {
    console.log('事件类型', $event.type);
    console.log('事件源', $event.target);
    console.log('当前组件', $event.currentTarget);
    console.log('自定义数据', $event.detail);
  }
}