JavaScript自定义事件侦听器

JavaScript custom Event Listener

本文关键字：侦听器 事件 自定义 JavaScript      更新时间：2023-09-26

我想知道是否有人能帮助我了解如何创建不同的自定义事件侦听器。

我没有一个具体的事件案例，但我想了解它是如何完成的，这样我就可以在需要的地方应用它。

我想做的是，以防万一一些人可能需要知道：

var position = 0;
for(var i = 0; i < 10; i++)
{
    position++;
    if((position + 1) % 4 == 0)
    {
        // do some functions
    }
}

var evt = document.createEvent("Event");
evt.initEvent("myEvent",true,true);
// custom param
evt.foo = "bar";
//register
document.addEventListener("myEvent",myEventHandler,false);
//invoke
document.dispatchEvent(evt);

以下是更本地化的方法，针对听众和出版商：http://www.kaizou.org/2010/03/generating-custom-javascript-events/

实现自定义事件并不困难。您可以通过多种方式来实现它。最近我是这样做的： 
/***************************************************************
*
*   Observable
*
***************************************************************/
var Observable;
(Observable = function() {
}).prototype = {
    listen: function(type, method, scope, context) {
        var listeners, handlers;
        if (!(listeners = this.listeners)) {
            listeners = this.listeners = {};
        }
        if (!(handlers = listeners[type])){
            handlers = listeners[type] = [];
        }
        scope = (scope ? scope : window);
        handlers.push({
            method: method,
            scope: scope,
            context: (context ? context : scope)
        });
    },
    fireEvent: function(type, data, context) {
        var listeners, handlers, i, n, handler, scope;
        if (!(listeners = this.listeners)) {
            return;
        }
        if (!(handlers = listeners[type])){
            return;
        }
        for (i = 0, n = handlers.length; i < n; i++){
            handler = handlers[i];
            if (typeof(context)!=="undefined" && context !== handler.context) continue;
            if (handler.method.call(
                handler.scope, this, type, data
            )===false) {
                return false;
            }
        }
        return true;
    }
};

只要将Observable的原型与构造函数的原型混合，任何构造函数都可以重用和应用Observable对象。

要开始听，你必须将自己注册到可观察的对象，就像这样：

var obs = new Observable();
obs.listen("myEvent", function(observable, eventType, data){
    //handle myEvent
});

或者，如果你的监听器是一个对象的方法，比如：

obs.listen("myEvent", listener.handler, listener);

其中listener是一个对象的实例，它实现了方法"handler"。

Observable对象现在可以在任何时候调用其fireEvent方法，以便与侦听器通信：

this.fireEvent("myEvent", data);

其中数据是听众我觉得有趣的一些数据。无论你在那里投入什么，都取决于你——你最清楚你的定制活动是由什么组成的。

fireEvent方法只需遍历为"myEvent"注册的所有侦听器，并调用已注册的函数。如果函数返回false，则这意味着事件被取消，可观察对象将不会调用其他侦听器。因此，整个fireEvent方法也将返回fasle，这样可观察到的对象就知道，它通知侦听器的任何操作现在都应该回滚。

也许这个解决方案并不适合所有人，但我；ve从这段相对简单的代码中受益匪浅。

从这里开始：

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

// create the event
const event = new Event('build');
// elem is any element
elem.dispatchEvent(event);

// later on.. binding to that event
// we'll bind to the document for the event delegation style. 
document.addEventListener('build', function(e){
   // e.target matches the elem from above
}, false);

这里有一个非常简单的（TypeScript/Babelish）实现：

const simpleEvent = <T extends Function>(context = null) => {
    let cbs: T[] = [];
    return {
        addListener: (cb: T) => { cbs.push(cb); },
        removeListener: (cb: T) => { let i = cbs.indexOf(cb); cbs.splice(i, Math.max(i, 0)); },
        trigger: (<T> (((...args) => cbs.forEach(cb => cb.apply(context, args))) as any))
    };
};

你这样使用它：

let onMyEvent = simpleEvent();
let listener = (test) => { console.log("triggered", test); };
onMyEvent.addListener(listener);
onMyEvent.trigger("hello");
onMyEvent.removeListener(listener);

或者像这样的课程

class Example {
    public onMyEvent = simpleEvent(this);
}

如果你想要简单的JavaScript，你可以使用TypeScript游乐场进行转换。

相关文章：