当前位置：首页 > news >正文

小程序中事件对象的属性与方法

news 2025/7/30 9:41:05

在小程序中，事件处理函数的参数为事件对象（通常命名为 `e`），包含了事件相关的详细信息（如事件类型、触发元素、传递的数据等）。事件对象的属性和方法因事件类型（如点击、输入、触摸等）略有差异，但核心属性具有通用性。

一、核心属性

1. `type`

类型：String

说明：表示事件的类型（如 "tap"、"input"、"longpress" 等）。

示例：

// 点击事件的处理函数
handleTap(e) {console.log(e.type); // 输出 "tap"
}

2. `target`

类型：Object

说明：触发事件的「源头元素」（可能是子组件），包含该元素的标签名、id、class等信息。

属性结构：

id：元素的 id 属性值

dataset：元素通过 data-* 定义的自定义数据（仅当前元素的）

tagName：元素的标签名（如 "view"、"button"）

classList：元素的 class 列表

示例：

<view bind:tap="handleTap"><button id="btn" data-type="submit">点击</button>
</view>handleTap(e) {console.log(e.target.id); // 输出 "btn"（源头是button）console.log(e.target.dataset.type); // 输出 "submit"
}

3. `currentTarget`

类型：Object

说明：绑定事件的当前元素（与 target 可能不同，若事件冒泡则可能为父元素），属性结构同 target。

示例：

<view id="parent" bind:tap="handleTap" data-parent="true"><button id="child">点击</button>
</view>handleTap(e) {console.log(e.currentTarget.id); // 输出 "parent"（事件绑定在view上）console.log(e.currentTarget.dataset.parent); // 输出 trueconsole.log(e.target.id); // 输出 "child"（触发事件的源头是button）
}

4. `detail`

类型：Object

说明：事件的详细信息，内容因事件类型而异，是最常用的属性之一。

常见事件的 detail 内容：

tap/longpress（点击/长按）：包含触摸点坐标

{ x: 150, y: 300 } // 相对于页面的坐标

input（输入框输入）：包含输入值

{ value: "用户输入的内容", cursor: 5 } // cursor是光标位置

change（表单元素值变化）：

复选框（checkbox）：{ value: ["选中的值1", "选中的值2"] }

单选框（radio）：{ value: "选中的值" }

滑块（slider）：{ value: 50 }（当前值）

submit（表单提交）：包含表单所有字段的键值对

{ value: { username: "张三", age: "18" } }

示例（input事件）：

<input bind:input="handleInput" />handleInput(e) {console.log(e.detail.value); // 实时输出用户输入的内容
}

5. `dataset`

类型：Object

说明：绑定事件的元素（currentTarget）通过 data-* 定义的自定义数据集合（简化获取方式，等价于 e.currentTarget.dataset）。

示例：

<button bind:tap="handleClick" data-id="100" data-user-name="张三">点击</button>handleClick(e) {console.log(e.dataset.id); // 输出 100（注意：data-id 对应 dataset.id）console.log(e.dataset.userName); // 输出 "张三"（注意：data-user-name 会转为驼峰式 userName）
}

6. `mark`

类型：Object

说明：通过 mark: 前缀定义的自定义数据（与 dataset 类似，但支持事件冒泡传递，即父元素可获取子元素的 mark 数据）。

示例：

<view bind:tap="handleTap" mark:parent="view"><button mark:child="btn">点击</button>
</view>handleTap(e) {console.log(e.mark.parent); // 输出 "view"（当前元素的mark）console.log(e.mark.child); // 输出 "btn"（子元素的mark，因冒泡被传递）
}

7. `timestamp`

类型：Number

说明：事件触发的时间戳（毫秒级，从1970年开始计算）。

示例：

handleTap(e) {console.log(e.timestamp); // 输出 1620000000000（事件触发的时间）
}

8. `touches` 与 `changedTouches`

类型：Array<Object>

说明：仅在触摸事件（如 touchstart、touchmove、touchend）中存在，包含触摸点的坐标信息。

touches：当前屏幕上所有触摸点的列表

changedTouches：当前事件中状态发生变化的触摸点列表（如触摸开始、移动、结束）

触摸点对象的属性：

clientX/clientY：相对于页面可视区域的坐标（不含导航栏、状态栏）

pageX/pageY：相对于页面的坐标（含滚动距离）

screenX/screenY：相对于屏幕的坐标

示例：

<view bind:touchmove="handleTouchMove">滑动</view>handleTouchMove(e) {console.log(e.changedTouches[0].clientX); // 输出当前触摸点的X坐标
}

二、常用方法

小程序事件对象的方法较少，主要用于事件控制，常见的有：

1. `stopPropagation()`

说明：阻止事件冒泡（等价于使用 catch:事件类型 绑定事件）。

示例：

<view bind:tap="parentTap"><button bind:tap="childTap">点击</button>
</view>childTap(e) {e.stopPropagation(); // 阻止事件冒泡到父元素console.log("子元素事件");
}parentTap() {console.log("父元素事件"); // 不会执行，因事件被阻止冒泡
}

2. `preventDefault()`

说明：阻止事件的默认行为（部分事件有默认行为，如表单提交的跳转）。

示例：

<form bind:submit="handleSubmit"><button form-type="submit">提交</button>
</form>handleSubmit(e) {e.preventDefault(); // 阻止表单默认提交行为（如页面刷新）console.log("自定义提交逻辑");
}