自定义事件方法

版权声明：非商业转载请附上地址与作者信息，谢谢！ https://blog.csdn.net/jx950915/article/details/82896952

前言

因为最近在思考js sdk的封装，然后也看了网上很多的js sdk源码，然后再其中就发现了一个小东西：比如我们鼠标有很多事件（点击，双击……）、比如视频有播放暂定等事件；我以前不知道为什么他们就能有这种所谓的约定事件，然后现在就明白了原来自己也可以自定义一些事件！话不多说，看操作

对象自定义事件

1、定义

var Event = {
    name:'小明',
    on: function (eventName, callback) {
    	//事件名 回调函数
        if (typeof eventName !== 'string' || typeof callback !== 'function') {
        	return;
        }
        //事件名不存在
        this[eventName] = this[eventName] || new Array();
        this[eventName].push(callback);
	 },
    emit: function (eventName) { 
    	//使用that 防止this指向问题
        var that = this;
        var params = arguments.length > 1 ? Array.prototype.slice.call(arguments, 1) : [];
        if (that[eventName]) {
            Array.prototype.forEach.call(that[eventName], function (arg) { 
            	arg.apply(that, params);
            }); 
         }
    }
}   

on：绑定事件
emit：触发绑定后的事件

2、绑定事件

//这里定义方法
Event.on('test1', function (result) {
    console.log(result)
})
Event.on('test2', function () {
    console.log(this.name)
})

3、触发事件

Event.emit('test1', 'hello world')
Event.emit('test2')

4、反馈

5、引用

如果我需要别的对象也想使用自定义事件功能，再写一遍方法肯定不符合代码间接复用的要求，所以这里会用到一个东西

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象

var person = {
    name: '小明'
}
Object.assign(person, Event);
person.on('call', function () {
    console.log(this.name);
});
//执行
person.emit('call') // 小明

构造函数自定义方法

1、定义

这里绑定事件就放在构造函数中了，不能像对象那样单独出来绑定

const event = function () {
    this.name = '小明';
    //存储事件
    this.handler = {}
    //绑定事件
	this.on('test1', function () {
       console.log(this.name)
    })
}

//使用原型链定义绑定和触发函数
//自定义绑定事件
event.prototype.on = function (eventName, callback) {  
    //事件名 回调函数
    if (typeof eventName !== 'string' || typeof callback !== 'function') {
        return;
    }
    //事件名不存在
    this.handler[eventName] = this.handler[eventName] || new Array();
    this.handler[eventName].push(callback);
}
//自定义触发事件
event.prototype.emit = function (eventName) {
	var that = this;
    var params = arguments.length > 1 ? Array.prototype.slice.call(arguments, 1) :[];
    if (that.handler[eventName]) {
        Array.prototype.forEach.call(that.handler[eventName],function (arg) {
            arg.apply(that, params);
         });
    }
}

//绑定触发事件
//触发绑定事件
event.prototype.test1 = function () {
    this.emit('test1')
}

2、触发事件

var events = new event()
events.test1() //小明

在这里我们发现：构造函数相对于对象需要额外包一层方法来触发自定义函数，好处是可以不必暴露其他用不到的自定义函数。