event-simple

this is an simple event listeners for javascript

Usage no npm install needed!

<script type="module">
  import eventSimple from 'https://cdn.skypack.dev/event-simple';
</script>

README

event-simple 使用指南 event-simple 是一个简单的实现前端自定义事件监听与触发的库 兼容各大框架

使用 - 基本使用

const eventSimple = require('event-simple')

Monitoring events (监听事件)

eventSimple.on('eventName', function() { 

    let handlerArgs = Array.prototype.slice.call(arguments, 0)

    console.log('arguments:', ...handlerArgs)
})

你可以为同个事件绑定多个方法: 如下
let fn1 = function (arg1, arg2) {
    console.log('the fn1 arg1:', arg1)
    console.log('the fn1 arg2:', arg2)
}
let fn2 = function (arg1, arg2) {
    console.log('the fn2 arg1:', arg1)
    console.log('the fn2 arg2:', arg2)
}

链式调用
eventSimple.on('eventName', fn1).on('eventName', fn2).emit('eventName', 'test1')

emitting events (发送事件)

eventSimple.emit('eventName', 'arg1', 'arg2', ...)

removing events (移除事件)

移除事件绑定的全部方法
eventSimple.off('eventName')

移除绑定事件的指定方法 例:

let fn1 = function (arg1, arg2) {
    console.log('the fn1 arg1:', arg1)
    console.log('the fn1 arg2:', arg2)
}
let fn2 = function (arg1, arg2) {
    console.log('the fn2 arg1:', arg1)
    console.log('the fn2 arg2:', arg2)
}

eventSimple.on('eventName', fn1).on('eventName', fn2)

移除绑定事件的fn1监听
eventSimple.off('eventName', fn1)

支持链式调用

eventSimple.on('eventName', function() { 

    let handlerArgs = Array.prototype.slice.call(arguments, 0)

    console.log('arguments:', ...handlerArgs)

}).emit('eventName', 'arg1', 'arg1')

如果需要在第三方框架上使用,只需要把event-simple挂在全局上即可

如在vue中使用如下:

在main.js中引入并挂在原型上,即可全局调用

import Vue from 'vue' const eventSimple = require('event-simple')

Vue.prototype['$eventSimple'] = eventSimple

new Vue({
   ...
})

这样就可以在项目中的任何地方通过调用

this.$eventSimple.on('eventName', function (a) {
    console.log('arg:',  a)
}).emit('eventName', 233).on('eventName1', function (b) {
    console.log('argb:', b)
}).emit('eventName1', 34234)

github repositories