UniApp은 여러 프런트 엔드 프레임워크(Vue, React, Angular 등)를 지원하고 여러 실행 플랫폼(H5, 애플릿, 앱 등)으로 패키징할 수 있는 크로스 플랫폼 개발 프레임워크입니다. UniApp에서는 이벤트 처리가 매우 중요하며 이를 통해 사용자와 애플리케이션 간의 상호 작용이 이루어질 수 있습니다. 다음은 UniApp에서 일반적으로 사용되는 이벤트 처리 방법입니다.
1. 바인딩 이벤트
이벤트는 @ 기호를 통해 템플릿에 바인딩될 수 있습니다. 예를 들면 다음과 같습니다.
<button @click="handleClick">点击我</button>
这里绑定了一个 click 事件,并且绑定的函数是 handleClick。
2. 이벤트 수정자
이벤트 수정자는 이벤트를 바인딩하여 이벤트의 동작을 수정할 때 사용되는 일부 특수 기호를 참조합니다. 일반적인 이벤트 수정자는 다음과 같습니다.
- 방지: 기본 동작 방지
- 중지: 이벤트가 발생하는 것을 방지합니다.
- 캡처: 이벤트 캡처 모드를 사용합니다.
- self: 콜백 함수는 이벤트 소스 자체에서 이벤트가 트리거될 때만 트리거됩니다.
- 한 번: 콜백 함수를 한 번만 트리거합니다.
- 패시브: 페이지 스크롤의 부드러움을 향상합니다.
예를 들어:
<!-- 阻止默认行为 -->
<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.emit과 uni.emit 및 uni를 전달할 수도 있습니다 .e mit 및 u ni . 사용자 정의 이벤트 처리를 구현하는 메소드에 대해 설명합니다 . 예를 들어:
// 发送自定义事件
uni.$emit('myEvent', {
data: '自定义事件参数'});
// 监听自定义事件
uni.$on('myEvent', (data) => {
console.log('接收到自定义事件', data);
});
这里通过 uni.$emit 发送了一个名为 myEvent 的自定义事件,
并传递了一个参数 {
data: '自定义事件参数'}。在需要监听该事件的地方,
可以使用 uni.$on 方法来监听该事件,并在回调函数中处理事件。
5. 이벤트 객체
이벤트 처리 함수에서 이벤트 객체는 $event 매개변수를 통해 얻을 수 있으며, 이벤트 객체에는 다음과 같은 이벤트에 대한 일부 정보가 포함되어 있습니다.
유형: 이벤트 유형
대상: 이벤트 소스
currentTarget: 현재 구성 요소
세부 정보: 사용자 정의 데이터
예:
<button @click="handleClick">点击我</button>
methods: {
handleClick($event) {
console.log('事件类型', $event.type);
console.log('事件源', $event.target);
console.log('当前组件', $event.currentTarget);
console.log('自定义数据', $event.detail);
}
}
以上就是 UniApp 中常用的事件处理方式,包括绑定事件、事件修饰符、内置事件、自定义事件和事件对象。
掌握这些知识,可以更加灵活地处理事件,实现丰富的用户交互效果。