blocks|key|793295|text|我认为这就是匿名函数的意义所在，它缺乏一个名称或引用它的方式。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|793296|如果我是你，我只会创建一个命名函数，或者把它放在一个变量中，这样你就可以引用它了。|793297|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);|code-block|syntax|javascript|793298|然后，可以通过以下方式将其删除|793299|window.document.removeEventListener("keydown",+handler);+++|793300|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

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.

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

You can then remove it by

<pre><code>window.document.removeEventListener("keydown", handler); 
</code></pre>

blocks|key|793304|text|window.document.onkeydown+=+function(){};|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|793305|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>window.document.onkeydown = function(){};
</code></pre>

blocks|key|793360|text|提供一个更新的方法来实现这一点：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|793361|//one-time+fire
element.addEventListener('mousedown',+{
++handleEvent:+function+(evt)+{
++++element.removeEventListener(evt.type,+this,+false);
++}
},+false);|code-block|syntax|javascript|793362|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

To give a more up-to-date approach to this:

<pre><code>//one-time fire
element.addEventListener('mousedown', {
 handleEvent: function (evt) {
 element.removeEventListener(evt.type, this, false);
 }
}, false);
</code></pre>

blocks|key|1007584|text|在严格模式下工作的Otto+Nascarella解决方案的一个版本是：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1007585|button.addEventListener('click',+function+handler()+{
++++++///this+will+execute+only+once
++++++alert('only+once!');
++++++this.removeEventListener('click',+handler);
});|code-block|syntax|javascript|1007586|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/11511956/1293385^0|9|F|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

A version of <a href="https://stackoverflow.com/a/11511956/1293385">Otto Nascarella</a>'s solution that works in strict mode is:

<pre><code>button.addEventListener('click', function handler() {
 ///this will execute only once
 alert('only once!');
 this.removeEventListener('click', handler);
});
</code></pre>

blocks|key|793506|text|就您的要求而言，可能不是最好的解决方案。我还没有确定一种有效的方法来删除在事件侦听器调用中声明的匿名函数。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|793507|我个人使用一个变量来存储<target>并在事件侦听器调用之外声明函数，例如：|offset|length|style|CODE|793508|const+target+=+document.querySelector('<identifier>');|793509|function+myFunc(event)+{+function+code;+}|793510|target.addEventListener('click',+myFunc);|793511|然后删除监听程序：|793512|target.removeEventListener('click',+myFunc);|793513|这不是您会收到的最好的建议，但是要删除匿名函数，我发现唯一有用的解决方案就是删除然后替换HTML元素。我确信一定有更好的普通JS方法，但我还没有看到它。|793514|entityMap^0|0|C|8|0|0|1I|0|0|O|P|E|14|1|0|0|15|0|0|0|18|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@$D|X|E|Y|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|Z|8|@$D|10|E|11|F|G]]|9|@]|A|$]]|$1|J|3|K|5|6|7|12|8|@$D|13|E|14|F|G]|$D|15|E|16|F|G]|$D|17|E|18|F|G]]|9|@]|A|$]]|$1|L|3|M|5|6|7|19|8|@$D|1A|E|1B|F|G]]|9|@]|A|$]]|$1|N|3|O|5|6|7|1C|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|1D|8|@$D|1E|E|1F|F|G]]|9|@]|A|$]]|$1|R|3|S|5|6|7|1G|8|@]|9|@]|A|$]]|$1|T|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]]|U|$]]

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 <code>&lt;target&gt;</code> and declare the function outside of the event listener invocation eg:

<code>const target = document.querySelector('&lt;identifier&gt;');</code>

<code>function myFunc(event) {</code>
 <code>function code;</code>
<code>}</code>

<code>target.addEventListener('click', myFunc);</code>

Then to remove the listener:

<code>target.removeEventListener('click', myFunc);</code>

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.

blocks|key|793604|text|我也遇到过同样的问题，这是我能得到的最好的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|793605|/*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;|code-block|syntax|javascript|793606|请记住，我只对window元素和'mousemove'事件进行了测试，所以这种方法可能会有一些问题。|offset|length|style|CODE|793607|entityMap^0|0|0|7|6|G|B|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]|$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|N|$]]

I have stumbled across the same problem and this was the best solution I could get:

<pre><code>/*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;
</code></pre>

Please keep in mind I have only tested this for the <code>window</code> element and for the <code>'mousemove'</code> event, so there could be some problems with this approach.

blocks|key|793637|text|在现代浏览器中，您可以执行以下操作...|type|unstyled|depth|inlineStyleRanges|entityRanges|data|793638|button.addEventListener(+'click',+()+=>+{
++++alert(+'only+once!'+);
},+{+once:+true+}+);|code-block|syntax|javascript|793639|https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Parameters|offset|length|793640|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|2G|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|T|8|@]|9|@$I|U|J|V|1|W]]|A|$]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|H]]]]

in modern browsers you can do the following...

<pre><code>button.addEventListener( 'click', () =&gt; {
 alert( 'only once!' );
}, { once: true } );
</code></pre>

<a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Parameters" rel="noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Parameters</a>

blocks|key|1007964|text|我知道这是一个相当古老的帖子，但对于那些认为它有用的人，我想我可能会提出我的两点意见。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1007965|该脚本(对没有创意的方法名称表示歉意)：|1007966|window.Listener+=+{
++++_Active:+[],
++++remove:+function(attached,+on,+callback,+capture){
++++++++for(var+i+=+0;+i+<+this._Active.length;+i%2B%2B){
++++++++++++var+current+=+this._Active[i];
++++++++++++if(current[0]+===+attached+&&+current[1]+===+on+&&+current[2]+===+callback){
++++++++++++++++attached.removeEventListener(on,+callback,+(capture+%7C%7C+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%2B%2B){
++++++++++++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+%7C%7C+false));
++++++++if(this._Active.push([attached,+on,+callback])){
++++++++++++return+this._Active.length+-+1;
++++++++}
++++}
};|code-block|syntax|javascript|1007967|你可以这样使用它：|1007968|//+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);|1007969|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

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

<pre><code>window.Listener = {
 _Active: [],
 remove: function(attached, on, callback, capture){
 for(var i = 0; i &lt; this._Active.length; i++){
 var current = this._Active[i];
 if(current[0] === attached &amp;&amp; current[1] === on &amp;&amp; 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 &lt; 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;
 }
 }
};
</code></pre>

And you can use it like so:

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

blocks|key|1008023|text|我刚刚遇到了类似的复制保护wordpress插件的问题。代码是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1008024|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"
}|code-block|syntax|javascript|1008025|然后它被松散地放在|1008026|<script+type="text/javascript">disableSelection(document.body)</script>.|1008027|我只是通过将其他匿名函数附加到此事件来解决此问题：|1008028|document.body.onselectstart+=+function()+{+return+true;+};|1008029|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

I just experienced similiar problem with copy-protection wordpress plugin. The code was:
<pre><code>function disableSelection(target){
 if (typeof target.onselectstart!=&quot;undefined&quot;) //For IE 
 target.onselectstart=function(){return false}
 else if (typeof target.style.MozUserSelect!=&quot;undefined&quot;) //For Firefox
 target.style.MozUserSelect=&quot;none&quot;
 else //All other route (For Opera)
 target.onmousedown=function(){return false}
target.style.cursor = &quot;default&quot;
}
</code></pre>
And then it was initiated by loosely put
<pre><code>&lt;script type=&quot;text/javascript&quot;&gt;disableSelection(document.body)&lt;/script&gt;.
</code></pre>
I came around this simply by attaching other annonymous function to this event:
<pre><code>document.body.onselectstart = function() { return true; };
</code></pre>

blocks|key|1008147|text|除了Safari之外，大多数流行浏览器的最新版本都支持一种新的方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1008148|请查看caniuse以获取更新的支持。|offset|length|1008149|我们可以向addEventListner添加一个名为signal的选项，并从AbortController分配一个signal，稍后可以对其调用abort()方法。|style|CODE|1008150|下面是一个例子。|1008151|我们创建一个AbortController|1008152|const+controller+=+new+AbortController();|code-block|syntax|javascript|1008153|然后，我们创建eventListner并传入选项signal|1008154|document.addEventListener('scroll',()=>{
++++//+do+something
},{signal:+controller.signal})|1008155|然后，为了在以后删除eventListner，我们调用：|1008156|controller.abort()|1008157|entityMap|0|LINK|mutability|MUTABLE|url|https://caniuse.com/mdn-api_eventtarget_addeventlistener_options_parameter_options_signal_parameter^0|0|3|7|0|0|5|F|Q|6|12|F|1L|6|20|7|0|0|6|F|0|0|7|C|O|6|0|0|A|C|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|19|8|@]|9|@$D|1A|E|1B|1|1C]]|A|$]]|$1|F|3|G|5|6|7|1D|8|@$D|1E|E|1F|H|I]|$D|1G|E|1H|H|I]|$D|1I|E|1J|H|I]|$D|1K|E|1L|H|I]|$D|1M|E|1N|H|I]]|9|@]|A|$]]|$1|J|3|K|5|6|7|1O|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1P|8|@$D|1Q|E|1R|H|I]]|9|@]|A|$]]|$1|N|3|O|5|P|7|1S|8|@]|9|@]|A|$Q|R]]|$1|S|3|T|5|6|7|1T|8|@$D|1U|E|1V|H|I]|$D|1W|E|1X|H|I]]|9|@]|A|$]]|$1|U|3|V|5|P|7|1Y|8|@]|9|@]|A|$Q|R]]|$1|W|3|X|5|6|7|1Z|8|@$D|20|E|21|H|I]]|9|@]|A|$]]|$1|Y|3|Z|5|P|7|22|8|@]|9|@]|A|$Q|R]]|$1|10|3|-4|5|6|7|23|8|@]|9|@]|A|$]]]|11|$12|$5|13|14|15|A|$16|17]]]]

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 <a href="https://caniuse.com/mdn-api_eventtarget_addeventlistener_options_parameter_options_signal_parameter" rel="nofollow noreferrer">caniuse</a> for updated support.
We can add an option to <code>addEventListner</code> called <code>signal</code> and assign a <code>signal</code> from an <code>AbortController</code> on which you can later call the <code>abort()</code> method.
Here is an example.
We create an <code>AbortController</code>:
<pre><code>const controller = new AbortController();
</code></pre>
Then we create the <code>eventListner</code> and pass in the option <code>signal</code>:
<pre><code>document.addEventListener('scroll',()=&gt;{
 // do something
},{signal: controller.signal})
</code></pre>
And then to remove the <code>eventListner</code> at a later time, we call:
<pre><code>controller.abort()
</code></pre>

I have an object that has methods in it. These methods are put into the object inside an anonymous function. It looks like this:

<pre><code>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);
 };
}); 
</code></pre>

(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:

<pre><code>t.disable = function() {
 window.document.removeEventListener("keydown", this, false);
}
</code></pre>

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.

removeEventListener on anonymous functions in JavaScript

我有一个对象，里面有一些方法。这些方法被放入匿名函数内的对象中。它看起来是这样的：var t = {};window.document.addEventListener("keydown", function(e) {    t.scroll = function(x, y) {        window.scrol...

问JavaScript中匿名函数的removeEventListener
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JavaScript中匿名函数的removeEventListenerEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JavaScript中匿名函数的removeEventListener
EN