在小程序中，事件處理函數的參數為事件對象（通常命名為?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("自定義提交邏輯");
}

三、總結

事件對象的核心屬性中，detail（獲取事件詳情）、dataset（獲取自定義數據）、target/currentTarget（獲取元素信息）是開發中最常用的。不同事件類型的?detail?內容差異較大，需根據具體場景查閱對應事件的文檔。