pagina - JavaScript personalizado de escucha de eventos

javascript onload page

Question

Me preguntaba si alguien me puede ayudar a comprender exactamente cómo crear diferentes oyentes de eventos personalizados.

No tengo un caso específico de un evento, pero quiero aprender, en general, cómo se hace, para poder aplicarlo donde sea necesario.

Lo que estaba buscando hacer, solo en caso de que algunas personas pudieran necesitar saberlo, fue:

var position = 0;

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

Answer 1

Aquí hay una implementación realmente simple (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))
    };
};

Lo usas así:

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

O en clases como esta

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

Si desea JavaScript simple, puede transpilarlo utilizando el parque de juegos de TypeScript .

Answer 2

De aquí:

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

// create the event
var evt = document.createEvent(''Event'');
// define that the event name is `build`
evt.initEvent(''build'', true, true);

// elem is any element
elem.dispatchEvent(evt);


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

Answer 3

La implementación de eventos personalizados no es difícil. Puedes implementarlo de muchas maneras. Últimamente lo estoy haciendo así:

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

El objeto Observable puede ser reutilizado y aplicado por cualquier constructor que lo necesite simplemente mezclando el prototipo de Observable con el prototipo de ese constructor.

Para comenzar a escuchar, debes registrarte en el objeto observable, así:

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

O si su oyente es un método de un objeto, así:

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

Donde listener es una instancia de un objeto, que implementa el método "handler".

El objeto Observable ahora puede llamar a su método fireEvent cada vez que sucede algo que quiere comunicar a sus oyentes:

this.fireEvent("myEvent", data);

Donde los datos son algunos datos que los oyentes encuentran interesantes. Lo que sea que pongas allí depende de ti; tú sabes mejor de qué está hecho tu evento personalizado.

El método fireEvent simplemente pasa por todos los oyentes que se registraron para "myEvent" y llama a la función registrada. Si la función devuelve falso, significa que el evento se cancela y el observable no llamará a los otros oyentes. Como resultado, todo el método fireEvent también volverá a funcionar, por lo que el observable sabe que cualquier acción que notificara a sus oyentes debería revertirse.

Tal vez esta solución no convenga a todos, pero he obtenido muchos beneficios de esta pieza de código relativamente simple.

Answer 4

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

Esta es la forma de hacerlo de forma más local, identificando oyentes y editores: http://www.kaizou.org/2010/03/generating-custom-javascript-events/