📣 该插件已经不再单独维护 ,已迁移至 domtify 中。

just-event.js

受jQuery启发的现代、轻量的事件工具，具有类似 jQuery 的 API

为什么?

如果你热衷于开发JavaScript插件，想摆脱jQuery，但也喜欢它对事件绑定的语法，那么这个库对你来说非常有用，这也是它的主要用例

特性

零依赖,体积极小(gzipped: <= 2KB)
事件命名空间
批量绑定、解绑事件
轻松的事件委托
真实的DOM事件

快速开始

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)

// 支持链式调用
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

// 全局变量名称 "event" 是固定的
event(selector).on("click", handler)

AMD

如果您是使用AMD 模块化开发请使用下面的脚本

<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	just-event.js	说明
this	this	当前触发事件的 DOM 元素
event.target	event.target	最初调度事件的元素
event.delegateTarget	event.delegateTarget	绑定事件处理函数的元素
event.currentTarget	event.currentTarget	当前触发事件的 DOM 元素与this相同
event.stopPropagation()	event.stopPropagation()	阻止事件进一步传递
event.preventDefault()	event.preventDefault()	阻止事件默认行为

完全保持了和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命名空间的点击事件
event(selector).off("click.app")

// 移除.app命名空间下的所有事件
event(selector).off(".app")

// click.app1 click.app2 移除所有的点击事件
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()分发的是CustomEvent构造函数创建的真实的事件实例,可以通过addEventListener()进行监听

// 点击事件监听
event(selector).on("click.app1 click.app2", handler)

// 触发所有的点击事件
event(selector).trigger("click")
// 只触发携带.app1命名空间的点击事件
event(selector).trigger("click.app1")
// 携带参数
event(selector).trigger("click", { foo: "bar" })
event(selector).trigger("click.app1", { foo: "bar" })

// 自定义事件监听
event(selector).on("your-custom-event", (event) => {
  console.log(event.detail.type) // "custom-event"
})

// 触发自定义事件
event(selector).trigger("your-custom-event", {
  type: "custom-event",
  foo: "bar",
})

浏览器支持

具体可以查看.browserslistrc文件。

变更日志

每个版本的详细更改记录在CHANGELOG.md中.

License

MIT

ajiho/just-event.js