uniapp难点（【uniapp】 的事件处理详解）

UniApp 是一个跨平台的开发框架 
  
  
  
  
  
  
  
  ，支持多种前端框架（Vue 
  
  
  
  
  
  
  
  、React
  
  
  
  
  
  
  
  
 、Angular 等）
  
  
  
  
  
  
  
  
 ，并能打包成多种运行平台（H5
 


 


 


 


 


 


 


 


、小程序 
 
 
 
 
 
 
 
 、App 等） 
  
  
  
  
  
  
  
  。在 UniApp 中
 


 


 


 


 


 


 


 


，事件处理非常重要 
 
 
 
 
 
 
 
 ，通过事件处理可以实现用户与应用程序之间的交互
  
  
  
  
  
  
  
  
 。下面是 UniApp 中常用的事件处理方式：

1. 绑定事件

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

<button @click="handleClick">点击我</button> 这里绑定了一个 click 事件
 

 

 

 

 

 

 

 

，并且绑定的函数是 handleClick
 


 


 


 


 


 


 


 


。

2. 事件修饰符

事件修饰符是指在绑定事件时使用的一些特殊符号 

 

 

 

 

 

 

 

 ，用于修改事件的行为 
 
 
 
 
 
 
 
 。常见的事件修饰符包括：

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

例如：

<!-- 阻止默认行为 --> <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> .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> export default { 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：页面卸载时触发

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

export default { 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 中常用的事件处理方式
 

 

 

 

 

 

 

 

，包括绑定事件                 、事件修饰符

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

、内置事件















、自定义事件和事件对象 
  
  
  
  
  
  
  
  。 掌握这些知识 

 

 

 

 

 

 

 

 ，可以更加灵活地处理事件                 ，实现丰富的用户交互效果
  
  
  
  
  
  
  
  
 。