【uniapp】 的事件处理详解

UniApp 是一个跨平台的开发框架，支持多种前端框架（Vue、React、Angular 等），并能打包成多种运行平台（H5、小程序、App 等）。在 UniApp 中，事件处理非常重要，通过事件处理可以实现用户与应用程序之间的交互。下面是 UniApp 中常用的事件处理方式：

1. 绑定事件

在模板中可以通过 @ 符号绑定事件，例如：

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

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

2. 事件修饰符

事件修饰符是指在绑定事件时使用的一些特殊符号，用于修改事件的行为。常见的事件修饰符包括：

• prevent：阻止默认行为
• stop：阻止事件冒泡
• capture：使用事件捕获模式
• self：只有当事件是从事件源本身触发时才触发回调函数
• once：只触发一次回调函数
• passive：提高页面滚动的流畅度

例如：

<!-- 阻止默认行为 --><[email protected]="handleClick">点击我</button><!-- 阻止事件冒泡 --><[email protected]="handleClick">点击我</button><!-- 使用事件捕获模式 --><[email protected]="handleClick">点击我</button><!-- 只有当事件是从事件源本身触发时才触发回调函数 --><[email protected]="handleClick">点击我</button><!-- 只触发一次回调函数 --><[email protected]="handleClick">点击我</button><!-- 提高页面滚动的流畅度 --><[email protected]="handleClick">点击我</button>

.prevent 和 .stop 是两种不同的事件修饰符，虽然它们有一些相似之处，但是在事件处理中有不同的作用。

1.prevent 用于阻止事件的默认行为，例如阻止 <a> 标签的默认跳转、阻止表单的默认提交等。
如果一个事件被 .prevent 修饰符修饰了，则在事件触发时，不会执行事件的默认行为，而只会执行`绑定的事件处理函数`。

2.stop 用于阻止事件的冒泡传播，事件冒泡是指当一个元素触发事件时，该事件会向父级元素传播。
如果一个事件被 .stop 修饰符修饰了，则在事件触发时，不会向上层元素传播该事件，而只会在当前元素内部进行处理。

因此，.prevent 和 .stop 的作用是不同的，但是它们都能够阻止事件的默认行为。
.prevent 用于阻止元素的默认行为，.stop 用于阻止事件的冒泡传播。

具体示例：

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

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

我们给链接设置了 href 属性，并绑定了 click 事件和 handleLinkClick 方法。
同时，我们在链接上使用了 .prevent 和 .stop 修饰符来阻止默认的跳转行为和冒泡传播。
<template><div @click="handleDivClick">//上层点击事件。用了检测下面的点击事件有没有冒泡上来<a href="https://www.example.com" @click.prevent.stop="handleLinkClick">点击我</a></div></template><script>exportdefault{methods:{handleLinkClick(){
      console.log('内部事件————链接被点击了');},handleDivClick(){
      console.log('外部事件————div 被点击了');}}};</script>
在点击链接时，控制台会输出 【内部事件————链接被点击了】
链接被点击了，而不会进行跳转。
同时，由于使用了 .stop 修饰符，事件也不会向上层元素冒泡传播，因此点击链接时不会触发外部事件 handleDivClick 方法。

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

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

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

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

3. 内置事件

在 UniApp 中，还有一些内置事件可以使用。这些事件是指在特定情况下自动触发的事件，例如：

• onLoad：页面加载完成时触发
• onReady：页面初次渲染完成时触发
• onShow：页面展示时触发
• onHide：页面隐藏时触发
• onUnload：页面卸载时触发

这些事件可以在页面或组件中使用，例如：

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

4. 自定义事件

在 UniApp 中，还可以通过 uni.

     e 
    
   
     m 
    
   
     i 
    
   
     t 
    
   
     和 
    
   
     u 
    
   
     n 
    
   
     i 
    
   
     . 
    
   
  
    emit 和 uni. 
   
  
emit和uni.on 方法来实现自定义事件的处理。例如：

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

5. 事件对象

在事件处理函数中，可以通过 $event 参数来获取事件对象，事件对象包含了事件的一些信息，例如：

type：事件类型
target：事件源
currentTarget：当前组件
detail：自定义数据
例如：

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

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

以上就是 UniApp 中常用的事件处理方式，包括绑定事件、事件修饰符、内置事件、自定义事件和事件对象。
掌握这些知识，可以更加灵活地处理事件，实现丰富的用户交互效果。