just-event.js

https://github.com/ajiho/just-event.js

喜歡的朋友點(diǎn)個(gè)小心心，支持一下，謝謝各位

受jQuery啟發(fā)的現(xiàn)代、輕量的事件工具，具有類(lèi)似 jQuery 的 API

為什么?

如果你熱衷于開(kāi)發(fā)JavaScript插件，想擺脫jQuery，但也喜歡它對(duì)事件綁定的語(yǔ)法，那么這個(gè)庫(kù)對(duì)你來(lái)說(shuō)非常有用，這也是它的主要用例

特性

• 零依賴(lài),體積極小(gzipped: <= 2KB)

• 事件命名空間

• 批量綁定、解綁事件

• 輕松的事件委托

• 真實(shí)的DOM事件

快速開(kāi)始

NPM

$ npm i -D just-event.js

// esm

import event from "just-event.js"

event(selector).on("click", handler)

// 或者您也喜歡直接使用方法

import { on, off, one } from "just-event.js"

on(selector, "click", handler)

one(selector, "click", handler)

off(selector, "click")

// cjs

const event = require("just-event.js")

event(selector).on("click", handler)

// 支持鏈?zhǔn)秸{(diào)用

event(selector).one("mouseover", handler).on("click", handler)

瀏覽器腳本引入

<script src="https://unpkg.com/just-event.js@latest/dist/just-event.browser.min.js"></script>

<!-- or -->

<script src="https://cdn.jsdelivr.net/npm/just-event.js@latest/dist/just-event.browser.min.js"></script>

可以在unpkg,jsdelivr找到固定版本替換@latest

// 全局變量名稱(chēng) "event" 是固定的

event(selector).on("click", handler)

AMD

如果您是使用AMD 模塊化開(kāi)發(fā)請(qǐng)使用下面的腳本

<script src="https://unpkg.com/just-event.js@latest/dist/just-event.amd.min.js"></script>

<!-- or -->

<script src="https://cdn.jsdelivr.net/npm/just-event.js@latest/dist/just-event.amd.min.js"></script>

上下文和事件屬性及方法

完全保持了和jQuery相同的行為

API

on

// 基本形式

event(selector).on("click", handler)

// 批量綁定事件

event(selector).on("click mousedown", handler)

// 事件委托

event(selector).on("click", ".foo", handler)

event(selector).on("click mousedown", ".foo", handler)

// 支持命名空間

event(selector).on("click.app", handler)

event(selector).on("click.app1 click.app2", handler)

event(selector).on("click.app mousedown.app", handler)

event(selector).on("click.app mousedown.app", ".foo", handler)

off

// 移除.app命名空間的點(diǎn)擊事件

event(selector).off("click.app")

// 移除.app命名空間下的所有事件

event(selector).off(".app")

// click.app1 click.app2 移除所有的點(diǎn)擊事件

event(selector).off("click")

// 都支持批量操作

event(selector).off("click mousedown")

event(selector).off(".app1 .app2")

event(selector).off("click.app1 click.app2")

one

event(selector).one("click", handler)

//委托

event(selector).one("click", ".foo", handler)

trigger

與jQuery(selector).trigger()有所不同,event(selector).trigger()分發(fā)的是CustomEvent構(gòu)造函數(shù)創(chuàng)建的真實(shí)的事件實(shí)例,可以通過(guò)addEventListener()進(jìn)行監(jiān)聽(tīng)

event(selector).on("click.app1 click.app2", handler)

// 觸發(fā)所有的點(diǎn)擊事件

event(selector).trigger("click")

// 只觸發(fā)攜帶.app1命名空間的點(diǎn)擊事件

event(selector).trigger("click.app1")

// 攜帶參數(shù)

event(selector).trigger("click", { foo: "bar" })

event(selector).trigger("click.app1", { foo: "bar" })

// 觸發(fā)自定義事件

event(selector).on("foo-bar-event", (event) => {

? console.log(event.detail.type) // "my-event"

})

event(selector).trigger("foo-bar-event", {

? type: "my-event",

? foo: "bar",

})

瀏覽器支持

具體可以查看.browserslistrc文件。

變更日志

每個(gè)版本的詳細(xì)更改記錄在CHANGELOG.md中.

License

MIT

Copyright (c) 2025-present, ajiho