В JavaScript пользовательский прослушиватель событий
мне было интересно, если кто может помочь мне понять, как именно создавать различные пользовательские прослушиватели событий.
У меня нет конкретного случая события, но я хочу узнать, как это делается, поэтому я могу применить его там, где это необходимо.
то, что я хотел сделать, просто в случае, если некоторые люди, возможно, должны знать, было:
var position = 0;
for(var i = 0; i < 10; i++)
{
position++;
if((position + 1) % 4 == 0)
{
// do some functions
}
}
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);
вот способ сделать это более локально, определяя слушателей и издателей: 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 с прототипом этого конструктора.
чтобы начать слушать, вы должны зарегистрироваться на наблюдаемый объект, например:
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);
где данные-это некоторые данные, которые слушатели мои находят интересными. Что бы вы ни положили туда, зависит от вас - вы лучше знаете, из чего состоит ваше пользовательское событие.
метод fireEvent просто идет через всех слушателей, которые были зарегистрированы на "myEvent", и вызывает зарегистрированную функцию. Если функция возвращает false, то это означает, что событие отменяется, и observable не будет вызывать другие прослушиватели. В результате весь метод fireEvent также вернет fasle, поэтому наблюдаемый знает, что любое действие, о котором он уведомлял своих слушателей, теперь должно быть откатано.
возможно, это решение не подходит всем, но у меня было много преимуществ это относительно простой фрагмент кода.
отсюда:
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);
вот действительно простая (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 playground.