I always wondered how clean is such approach - to remove an event listener from within that very listener.
UPDATE:
Internally I keep a hash of objects and listeners, so I potentially can remove event listener from any place. I'm just concerned of removing it from within itself. Will such action do a job actually?
UPDATE
I'm asking about addEventListener, removeEventListener stuff.
You can pass the once option to have a listener act only once, then remove itself. Docs: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Parameters
Example:
element.addEventListener('eventname', (ev) => {
console.log("event is captured only once.");
// do more stuff...
}, { once: true });
From the same docs link above, modern browser support is good, but is not available for Internet Explorer.
I just saw this because i wondered the exact same question!
arguments.callee is your friend...
so you'd have
blah.addEventListener('click',function(e){
e.source.removeEventListener('click', arguments.callee);
blee bloo bleep
});
this works in Titanium Appcelerator, so it should work in javascript too (because they are The Same Thing Kinda)
NB do NOT add () to the end of arguments.callee in this example, unless you like seeing... bah dum tish!.
In fact, if you don't want to use arguments.callee, this also might work (untested):
blah.addEventListener('click', anyThingYouWantHere = function(e){
e.source.removeEventListener('click', anyThingYouWantHere);
blee bloo bleep
});
Where "anythingYouWantHere" is any variable name you'd like ~ you're effectively "naming" the function as you add it.
I just made a wrapper function that generates a self destructing event listener:
let addSelfDestructingEventListener = (element, eventType, callback) => {
let handler = () => {
callback();
element.removeEventListener(eventType, handler);
};
element.addEventListener(eventType, handler);
};
So far it works great :)
@bharal answer gave me now this solution:
//example
addBlurListener(element, field) {
const listenToBlur = (e) => {
e.target.removeEventListener(e.type, listenToBlur);
//your stuff
};
element.addEventListener('blur', listenToBlur);
},
You could try something like this, depending on how it's called:
some_div.onclick = function () {
...
this.onclick = null;
// or: some_div.onclick = null;
};
Or is it event listeners you're concerned with? Because those are a little bit more complicated.
If you want listener only trigger once, you can use this code:
element.addEventListener('eventname', function callback(){}, { once: true });
Or use wrapper to do the same thing:
function addOneTimeEventListener(element, event, callback) {
const wrapper = e => {
try {callback(e)} finally {
element.removeEventListener(event, wrapper);
};
}
element.addEventListener(event, wrapper);
}
// example
addOneTimeEventListener(document.body, 'click', e => {
console.log('this message only show once.');
});
If you want to decide when to remove listener:
function addEventListener(element, event, callback) {
const wrapper = e => {
callback(e, () => element.removeEventListener(event, wrapper));
}
element.addEventListener(event, wrapper);
}
// example
let count = 0;
addEventListener(document.body, 'click', (e, closeListener) => {
console.log(`click:${++count}`);
if(count == 3) closeListener();
});
If you use jQuery, you will probably have some convenience methods exposed for interacting with event handlers -- see bind()/unbind(), delegate()/undelegate(), one(), and similar methods.
I don't have much experience with other frameworks, but I'd imagine they offer similar functionality. If you're not using a framework at all, @sdleihssirhc has an acceptable answer.
EDIT: Ah, perhaps you're looking for something more like addEventListener() and removeEventListener(). Again, a framework will offer some convenience to your interactions and save you the trouble of reinventing the wheel in some cases.
