JavaScript自定义事件侦听器

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

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

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

var position = 0;

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

var位置=0；
对于（变量i=0；i<10；i++）
{
位置++；
如果（（位置+1）%4==0）
{
//做一些功能
}
}

实现自定义事件并不难。您可以通过多种方式实现它。最近我是这样做的：

/***************************************************************
*
*   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;
    }
};

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

或者，如果您的侦听器是对象的方法，则如下所示：

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

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

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

可观察对象现在可以随时调用其fireEvent方法，只要它想与侦听器通信：

this.fireEvent("myEvent", data);

其中data是一些听众感兴趣的数据。无论你在那里放什么都取决于你——你最清楚你的定制活动是由什么组成的

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

也许这个解决方案不适合每个人，但我；我从这段相对简单的代码中获益匪浅

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);

以下是更本地化的方法，针对听众和出版商：

从这里开始：

下面是一个非常简单的（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))
    };
};

或者在这样的课堂上

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

---

如果您想要纯JavaScript，可以使用进行传输。

请参阅，您可以使用jQuery之类的库来创建自定义事件和侦听器。看看你发布的代码是如何与事件处理相关的？是否要将此代码作为对事件的响应运行？请选中此复选框，从何处调用此.firevent（“myEvent”，数据）？我对“this”范围感到困惑。我写道：“可观察对象现在可以调用其fireEvent方法”。因此，这是指可观察对象（或混合在其方法中的对象）的实例。在上述解决方案和在文档DOM对象上创建、添加和发送自定义事件的解决方案之间，在行为/性能方面是否存在显著差异？@Pappa我不知道。我开始这样做是为了在任何地方都能用。createEvent和CustomEvent构造函数并非到处都受支持。注意：

createEvent

方法已被弃用。改为使用。IE中不支持事件构造函数。如果要在IE上使用

CustomeeEvent

，请尝试。这是一个跨浏览器的polyfill，提供DOM 4级别4接口。有了它，您可以在IE 8或更高版本上使用

CustomEvent

。在同一页上，它提到IE不支持此功能。

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