I have an object that has methods in it. These methods are put into the object inside an anonymous function. It looks like this:
var t = {};
window.document.addEventListener("keydown", function(e) {
t.scroll = function(x, y) {
window.scrollBy(x, y);
};
t.scrollTo = function(x, y) {
window.scrollTo(x, y);
};
});
(there is a lot more code, but this is enough to show the problem)
Now I want to stop the event listener in some cases. Therefore I am trying to do a removeEventListener but I can't figure out how to do this. I have read in other questions that it is not possible to call removeEventListener on anonymous functions, but is this also the case in this situation?
I have a method in t created inside the anonymous function and therefore I thought it was possible. Looks like this:
t.disable = function() {
window.document.removeEventListener("keydown", this, false);
}
Why can't I do this?
Is there any other (good) way to do this?
Bonus info; this only has to work in Safari, hence the missing IE support.
You can name the function passed and use the name in the removeEventListener. as in:
button.addEventListener('click', function eventHandler() {
///this will execute only once
alert('only once!');
this.removeEventListener('click', eventHandler);
});
EDIT:
This will not work if you are working in strict mode ("use strict";)
EDIT 2:
arguments.callee is now deprecated (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments/callee)
I believe that is the point of an anonymous function, it lacks a name or a way to reference it.
If I were you I would just create a named function, or put it in a variable so you have a reference to it.
var t = {};
var handler = function(e) {
t.scroll = function(x, y) {
window.scrollBy(x, y);
};
t.scrollTo = function(x, y) {
window.scrollTo(x, y);
};
};
window.document.addEventListener("keydown", handler);
You can then remove it by
window.document.removeEventListener("keydown", handler);
A version of Otto Nascarella's solution that works in strict mode is:
button.addEventListener('click', function handler() {
///this will execute only once
alert('only once!');
this.removeEventListener('click', handler);
});
in modern browsers you can do the following...
button.addEventListener( 'click', () => {
alert( 'only once!' );
}, { once: true } );
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Parameters
window.document.removeEventListener("keydown", getEventListeners(window.document.keydown[0].listener));
May be several anonymous functions, keydown1
Warning: only works in Chrome Dev Tools & cannot be used in code: link
There's a new way to do this that is supported by the latest versions of most popular browsers with the exception of Safari.
Check caniuse for updated support.
Update: Now also supported by Sefari (version 15^).
We can add an option to addEventListner called signal and assign a signal from an AbortController on which you can later call the abort() method.
Here is an example.
We create an AbortController:
const controller = new AbortController();
Then we create the eventListner and pass in the option signal:
document.addEventListener('scroll',()=>{
// do something
},{signal: controller.signal})
And then to remove the eventListner at a later time, we call:
controller.abort()
This is not ideal as it removes all, but might work for your needs:
z = document.querySelector('video');
z.parentNode.replaceChild(z.cloneNode(1), z);
Cloning a node copies all of its attributes and their values, including
intrinsic (in–line) listeners. It does not copy event listeners added using
addEventListener()
Node.cloneNode()
A not so anonymous option
element.funky = function() {
console.log("Click!");
};
element.funky.type = "click";
element.funky.capt = false;
element.addEventListener(element.funky.type, element.funky, element.funky.capt);
// blah blah blah
element.removeEventListener(element.funky.type, element.funky, element.funky.capt);
Since receiving feedback from Andy (quite right, but as with many examples, I wished to show a contextual expansion of the idea), here's a less complicated exposition:
<script id="konami" type="text/javascript" async>
var konami = {
ptrn: "38,38,40,40,37,39,37,39,66,65",
kl: [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ]
};
document.body.addEventListener( "keyup", function knm ( evt ) {
konami.kl = konami.kl.slice( -9 );
konami.kl.push( evt.keyCode );
if ( konami.ptrn === konami.kl.join() ) {
evt.target.removeEventListener( "keyup", knm, false );
/* Although at this point we wish to remove a listener
we could easily have had multiple "keyup" listeners
each triggering different functions, so we MUST
say which function we no longer wish to trigger
rather than which listener we wish to remove.
Normal scoping will apply to where we can mention this function
and thus, where we can remove the listener set to trigger it. */
document.body.classList.add( "konami" );
}
}, false );
document.body.removeChild( document.getElementById( "konami" ) );
</script>
This allows an effectively anonymous function structure, avoids the use of the practically deprecated callee, and allows easy removal.
Incidentally: The removal of the script element immediately after setting the listener is a cute trick for hiding code one would prefer wasn't starkly obvious to prying eyes (would spoil the surprise ;-)
So the method (more simply) is:
element.addEventListener( action, function name () {
doSomething();
element.removeEventListener( action, name, capture );
}, capture );
To give a more up-to-date approach to this:
//one-time fire
element.addEventListener('mousedown', {
handleEvent: function (evt) {
element.removeEventListener(evt.type, this, false);
}
}, false);
JavaScript: addEventListener
method registers the specified listener on the EventTarget(Element|document|Window) it's called on.
EventTarget.addEventListener(event_type, handler_function, Bubbling|Capturing);
Mouse, Keyboard events Example test in WebConsole:
var keyboard = function(e) {
console.log('Key_Down Code : ' + e.keyCode);
};
var mouseSimple = function(e) {
var element = e.srcElement || e.target;
var tagName = element.tagName || element.relatedTarget;
console.log('Mouse Over TagName : ' + tagName);
};
var mouseComplex = function(e) {
console.log('Mouse Click Code : ' + e.button);
}
window.document.addEventListener('keydown', keyboard, false);
window.document.addEventListener('mouseover', mouseSimple, false);
window.document.addEventListener('click', mouseComplex, false);
removeEventListener
method removes the event listener previously registered with EventTarget.addEventListener().
window.document.removeEventListener('keydown', keyboard, false);
window.document.removeEventListener('mouseover', mouseSimple, false);
window.document.removeEventListener('click', mouseComplex, false);
caniuse
I have stumbled across the same problem and this was the best solution I could get:
/*Adding the event listener (the 'mousemove' event, in this specific case)*/
element.onmousemove = function(event) {
/*do your stuff*/
};
/*Removing the event listener*/
element.onmousemove = null;
Please keep in mind I have only tested this for the window element and for the 'mousemove' event, so there could be some problems with this approach.
Possibly not the best solution in terms of what you are asking. I have still not determined an efficient method for removing anonymous function declared inline with the event listener invocation.
I personally use a variable to store the <target> and declare the function outside of the event listener invocation eg:
const target = document.querySelector('<identifier>');
function myFunc(event) {
function code;
}
target.addEventListener('click', myFunc);
Then to remove the listener:
target.removeEventListener('click', myFunc);
Not the top recommendation you will receive but to remove anonymous functions the only solution I have found useful is to remove then replace the HTML element. I am sure there must be a better vanilla JS method but I haven't seen it yet.
I know this is a fairly old thread, but thought I might put in my two cents for those who find it useful.
The script (apologies about the uncreative method names):
window.Listener = {
_Active: [],
remove: function(attached, on, callback, capture){
for(var i = 0; i < this._Active.length; i++){
var current = this._Active[i];
if(current[0] === attached && current[1] === on && current[2] === callback){
attached.removeEventListener(on, callback, (capture || false));
return this._Active.splice(i, 1);
}
}
}, removeAtIndex(i){
if(this._Active[i]){
var remove = this._Active[i];
var attached = remove[0], on = remove[1], callback = remove[2];
attached.removeEventListener(on, callback, false);
return this._Active.splice(i, 1);
}
}, purge: function(){
for(var i = 0; i < this._Active.length; i++){
var current = this._Active[i];
current[0].removeEventListener(current[1], current[2]);
this._Active.splice(i, 1);
}
}, declare: function(attached, on, callback, capture){
attached.addEventListener(on, callback, (capture || false));
if(this._Active.push([attached, on, callback])){
return this._Active.length - 1;
}
}
};
And you can use it like so:
// declare a new onclick listener attached to the document
var clickListener = Listener.declare(document, "click" function(e){
// on click, remove the listener and log the clicked element
console.log(e.target);
Listener.removeAtIndex(clickListener);
});
// completely remove all active listeners
// (at least, ones declared via the Listener object)
Listener.purge();
// works exactly like removeEventListener
Listener.remove(element, on, callback);
I just experienced similiar problem with copy-protection wordpress plugin. The code was:
function disableSelection(target){
if (typeof target.onselectstart!="undefined") //For IE
target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined") //For Firefox
target.style.MozUserSelect="none"
else //All other route (For Opera)
target.onmousedown=function(){return false}
target.style.cursor = "default"
}
And then it was initiated by loosely put
<script type="text/javascript">disableSelection(document.body)</script>.
I came around this simply by attaching other annonymous function to this event:
document.body.onselectstart = function() { return true; };
Set anonymous listener:
document.getElementById('ID').addEventListener('click', () => { alert('Hi'); });
Remove anonymous listener:
document.getElementById('ID').removeEventListener('click',getEventListeners(document.getElementById('ID')).click[0].listener)
Using the AbortController, neat and clean
Attaching EventListener
const el = document.getElementById('ID')
const controller = new AbortController;
el.addEventListener('click',() => {
console.log("Clicked")
},{signal: controller.signal})
when you want to remove the event listener
controller.abort()
Another alternative workaround to achieve this is adding an empty event handler and preventing event propagation.
Let's assume you need to remove mouseleave event handler from an element which has #specific-div id, that is added with an anonymous function, and you can't use removeEventListener() since you don't have a function name.
You can add another event handler to that element and use event.stopImmediatePropagation(), for being sure this event handler works before existing ones you should pass the third parameter (useCapture) as true.
The final code should look like the below:
document.getElementById("specific-div")
.addEventListener("mouseleave", function(event) {
event.stopImmediatePropagation()
}, true);
This could help for some specific cases that you can't prefer cloneNode() method.
window.document.onkeydown = function(){};
I have a script that adds a click event to a div to add a new element. Then the function creates and adds the element, and is then supposed to remove the click even from the Div so no farther elements can be added. I understand why the removeEventListener isn't working, but I don't know how to fix it. Here are the lines of code that are giving me the problem:
function enable_add(tag, type){return function(e){add_element(e, tag, type);};} //Function call for adding new elements
document.getElementById("body_visual_editor").addEventListener("click", enable_add(tag, type));
document.getElementById("body_visual_editor").removeEventListener("click", enable_add());
Fire bug says that function(e) is assigned as the event, not enable_add, so the remove event does not find the right event. How do I write these three lines so they all work right?
No javascript libraries please.
Update: So i got the orignal isue sovled by rewriting it like this:
var handler;
function enable_add(tag, type) //Function call for adding new elements
{
handler= function handler(e){add_element(e, tag, type);};
return handler
}
document.getElementById("body_visual_editor").addEventListener("click", enable_add(tag, type));
document.getElementById("body_visual_editor").removeEventListener("click", handler);
But now it creates a element on the add_element call for etting the handler, and one on click. How do I fix that?
Here's the problem:
You've got a partially applied function, that you're passing directly into addEventListener.
removeEventListener only works on the exact same function instance as what was passed to addEventListener.
function makeFunction () {
return function () { };
}
var func1 = makeFunction();
var func2 = makeFunction();
func1 === func2; // false
So your solution is to cache the created function as a reference, which you then pass into addEventListener, remember it, and pass it into removeEventListener.
var myHandler = makeFunction();
el.addEventListener("click", myHandler);
el.removeEventListener("click", myHandler);
...of course, you probably don't intend to remove it, instantly.
Which means that you need to get more creative.
function handleEventOnce (evt, el, action) {
function doSomething (e) {
action(e);
el.removeEventListener(evt, doSomething);
}
el.addEventListener(evt, doSomething);
}
handleEventOnce("click", button, somePartialFunction(a, b));
Edit, Updated
Try naming anonymous function , utilizing Function.prototype.call() , Function.prototype.bind() , arguments , to pass this , event objects
var namedHandler;
function enable_add(tag, type) {
namedHandler = function namedHandler() {
add_element.call(this, arguments[arguments.length - 1], tag, type)
}.bind(this, tag, type);
return namedHandler
}
function add_element(e, tag, type) {
var el = document.createElement(tag);
el.setAttribute("type", type);
document.body.appendChild(el);
this.removeEventListener("click", namedHandler)
}
var elem = document.getElementById("body_visusal_editor");
elem.addEventListener("click", enable_add.call(elem, "input", "text"))
<div id="body_visusal_editor">click to add one element</div>
jsfiddle http://jsfiddle.net/oe71yfn8/
Calling the function again will create a new function, so that won't work. You would have to store the EventListener as a variable in order to pass it to removeEventListener.
In building an extended input field (a complex date picker), I need to use two key event listeners. One is attached to the input field, and launches the interface. This is easy.
The second is attached to document, in order to close the complex overlay. Click on the overlay, and it does nothing. Click outside: the overlay disappears and the input field's value is updated.
It also needs to remove the event listener from the document.
This would all be straightforward… if it weren't based on object structures. I am not calling a stand-alone function. I am calling a child function of the data object associated with the field (which the field then has no way of referencing back to).
__DateField.prototype.activate = function () {
…
var t = this;
window.setTimeout(function () { document.addEventListener("click", function (ev) { t.closeDateSelector(ev) }, false); }, 0);
…
}
(I haven't figured out why that event attachment needs to be nested within the setTimeout, but if I don''t do it that way, it calls itself immediately.)
Anyhow, the problem is then that I cannot successfully call document.removeEventListener() because I it's not the same initial function.
Also, I can't approach it by attaching the function as a stand-alone, because I need the reference to the related __DateField object.
How can I remove that function from document?
I have looked at the various threads that say there is no way to inspect event listeners added via 'addEventListener`, though wonder if they may be out of date, as Firebug can list them…
To remove it, you must have a reference to the function, so the question boils down to: How can I keep a reference to the function?
The simplest answer, since you already have an object handy, is a property on the object, if you can rely on this being correct as of when you do the removal:
__DateField.prototype.activate = function () {
// …
var t = this;
window.setTimeout(function () {
t.listener = function (ev) {
t.closeDateSelector(ev)
};
document.addEventListener("click", listener, false);
}, 0);
// …
};
// To remove
__DateField.prototype.deactivate = function() {
if (this.listener != null) {
document.removeEventListener("click", this.listener, false);
this.listener = null;
}
};
Or if that's a problem for some reason, you could use a variable in a scoping function:
(function() {
var listener = null;
__DateField.prototype.activate = function () {
// …
var t = this;
window.setTimeout(function () {
listener = function (ev) {
t.closeDateSelector(ev)
};
document.addEventListener("click", listener, false);
}, 0);
// …
};
// Later, when removing
function removeIt() {
if (listener != null) {
document.removeEventListener("click", listener, false);
listener = null;
}
}
})();
I'm creating a listener for the event show_keyboard. In the handler, I need to unbind from this event. In this case, the event is thrown from a native android plugin.
appView.sendJavascript("cordova.fireWindowEvent('native.showkeyboard', { 'keyboardHeight':" + Integer.toString(keyboardHeight)+"});");
In addHeightHandler, I need this to be the parent to addHeightHandler in order to unbind from it. Therefore I'm passing self when calling addHeightHandler. However, when I do this, I cannot get access to e and the keyboardHeight attribute.
Note: my employer insists it must be done like this, without anonymous functions or global setting of the self variable
/*
* When keyboard is shown, add height of keyboard to body to make scrollable.
*/
this.addHeightHandler = function (e) {
keyboardHeight = e.keyboardHeight;
//e is undefined
//do some stuff to add keyboard height
window.removeEventListener('show_keyboard', this.addHeightHandler);
};
/*
* Listen for showkeyboard events thrown by native code on Android
*/
this.addKeyboardListeners = function () {
var self = this;
window.addEventListener('native.showkeyboard', function () {
self.addHeightHandler(self)
}, false);
};
I know there are other ways of doing this, but this is the way I've been directed to do it. I believe passing self to addHeightHandler means e will be overwritten, is this correct?
Yes, the following:
this.addKeyboardListeners = function () {
var self = this;
window.addEventListener(eventConstants.nativeShowKeyboard, function () {
self.addHeightHandler(self);
});
};
Is passing self as the value of e.
What you can do is bind the addHeightHandler function to the desired context. In addKeyboardListeners, you could:
this.addKeyboardListeners = function () {
var handler = this.addHeightHandler.bind(this);
addEventListener(eventConstants.nativeShowKeyboard, handler);
};
What the above does is "bind" the context of the addHeightHandler function to this, meaning that when it is called, the this keyword inside the function will be a reference to whatever this was when you bound it.
The function will still take e as an argument, so when the event occurs and the handler is run, e will still be the event.
How can you decorate a DOM node so that you add an event handler, but within the new handler you can call the previous handler?
I assume that you are binding events in the way element.onclick = function () {};.
Yes, you can make a function that wraps previous event handlers and execute them sequentially, e.g.:
function addEvent(el, event, handler) {
var oldEvent = el['on'+event];
if (typeof oldEvent != 'function') {
el['on'+event] = handler;
} else {
el['on'+event] = function() {
oldEvent();
handler();
}
}
}
var el = document.getElementById('el');
addEvent(el, 'click', function () { alert('1'); });
addEvent(el, 'click', function () { alert('2'); });
Check the above example here.
It depends on how you're adding your handlers, of course, but here's one old-fashioned way:
function addClickHandler(nodeId, handler) {
var node = document.getElementById(nodeId), old = node.onclick;
node.onclick = function() {
handler(old);
}
}
Your handler function would check it's parameter to see if it's not null.
You could of course get as fancy as you wanted to here. Note that most Javascript frameworks actually don't give your event handlers much information about other handlers. Generally it's a fragile pattern to work with that sort of relationship, but I suppose if you set out with a design that regularizes tthe handler setup, it could work fine.