Écouteur d'événement personnalisé JavaScript

Question

Je me demandais si quelqu'un pouvait m'aider à comprendre exactement comment créer différents écouteurs d'événement personnalisés.

Je n'ai pas de cas particulier d'événement mais je veux apprendre de manière générale comment cela se fait, afin de pouvoir l'appliquer là où c'est nécessaire.

Ce que je cherchais à faire, juste au cas où certaines personnes auraient besoin de savoir, était :

 var position = 0;

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

Answer 1

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

Voici comment le faire plus localement, en identifiant les auditeurs et les éditeurs : http://www.kaizou.org/2010/03/generating-custom-javascript-events/

Answer 2

D'ici:

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

Voici une implémentation vraiment 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))
    };
};

Vous l'utilisez comme ceci :

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

Ou dans des cours comme celui-ci

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

Si vous voulez du JavaScript simple, vous pouvez le transpiler à l'aide du terrain de jeu TypeScript .

Answer 4

Pour un meilleur exemple s'il vous plaît passer par le lien suivant

http://www.dummies.com/how-to/content/how-to-create-custom-events-in-javascript-to-progr.navId-405448.html

vous obtiendrez tout ici comme comment créer un événement personnalisé et comment le déclencher