blocks|key|2313044|text|(如果您真的想要已触发的元素，不要传递任何内容。this将自动设置为已触发的元素。)|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2313045|element.addEventListener("hover",+logOnInput,+false);
function+logOnInput(){
++++console.log(this);
}|code-block|syntax|javascript|2313046|回答你更一般性的问题.|BOLD|2313047|有几种方法可以将函数作为参数传递给已经设置的某些参数(这称为“部分应用程序”)。如果您能够使用现代JavaScript特性，最简单的方法可能是使用箭头函数。|2313048|element.addEventListener("hover",+()+=>+logOnInput(foo),+false);
function+logOnInput(message){
++++console.log(message);
}|2313049|这将只适用于非常现代的浏览器。例如，在IE11中，它不能工作。为了支持旧的浏览器，您可以使用函数表达式的更长的形式。|2313050|element.addEventListener("hover",+function()+{logOnInput(foo);},+false);
function+logOnInput(message){
++++console.log(message);
}|2313051|或者您可以定义一个单独的函数(不适用于this，而是使用其他变量)。|2313052|element.addEventListener("hover",+logFooOnInput,+false);
function+logOnInput(triggeredElement){
++++console.log(triggeredElement);
}
function+logFooOnInput()+{
++++logOnInput(foo);
}|2313053|或者你可以用bind。|2313054|element.addEventListener("hover",+logOnInput.bind(null,+foo),+false);
function+logOnInput(message){
++++console.log(message);
}|2313055|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions|1|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind^0|O|4|0|0|0|B|0|21|4|0|0|0|0|0|J|4|0|0|6|4|6|4|1|0|0^^$0|@$1|2|3|4|5|6|7|1D|8|@$9|1E|A|1F|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|1G|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1H|8|@$9|1I|A|1J|B|M]]|D|@]|E|$]]|$1|N|3|O|5|6|7|1K|8|@]|D|@$9|1L|A|1M|1|1N]]|E|$]]|$1|P|3|Q|5|H|7|1O|8|@]|D|@]|E|$I|J]]|$1|R|3|S|5|6|7|1P|8|@]|D|@]|E|$]]|$1|T|3|U|5|H|7|1Q|8|@]|D|@]|E|$I|J]]|$1|V|3|W|5|6|7|1R|8|@$9|1S|A|1T|B|C]]|D|@]|E|$]]|$1|X|3|Y|5|H|7|1U|8|@]|D|@]|E|$I|J]]|$1|Z|3|10|5|6|7|1V|8|@$9|1W|A|1X|B|C]]|D|@$9|1Y|A|1Z|1|20]]|E|$]]|$1|11|3|12|5|H|7|21|8|@]|D|@]|E|$I|J]]|$1|13|3|-4|5|6|7|22|8|@]|D|@]|E|$]]]|14|$15|$5|16|17|18|E|$19|1A]]|1B|$5|16|17|18|E|$19|1C]]]]

(If you really want the triggered element, don't pass anything. <code>this</code> will automatically be set to the triggered element.)

<pre><code>element.addEventListener("hover", logOnInput, false);
function logOnInput(){
 console.log(this);
}
</code></pre>

<hr>

To answer your more general question...

There are a few ways to pass a function as an argument with certain arguments already set (this is referred to as "partial application"). If you are able to use modern JavaScript features, the simplest way is probably to use an <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions" rel="nofollow">arrow function</a>.

<pre><code>element.addEventListener("hover", () =&gt; logOnInput(foo), false);
function logOnInput(message){
 console.log(message);
}
</code></pre>

This will only work on very modern browsers. It won't work, for example, in IE 11. In order to support older browsers, you can use the longer form of a function expression.

<pre><code>element.addEventListener("hover", function() {logOnInput(foo);}, false);
function logOnInput(message){
 console.log(message);
}
</code></pre>

Or you could define a separate function (won't work with <code>this</code> but will work with other variables).

<pre><code>element.addEventListener("hover", logFooOnInput, false);
function logOnInput(triggeredElement){
 console.log(triggeredElement);
}
function logFooOnInput() {
 logOnInput(foo);
}
</code></pre>

Or you could use <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind" rel="nofollow"><code>bind</code></a>.

<pre><code>element.addEventListener("hover", logOnInput.bind(null, foo), false);
function logOnInput(message){
 console.log(message);
}
</code></pre>

blocks|key|170370|text|它是一个javascript，当您想调用一个使用括号的函数时。没有括号外的函数是无用的。但是在作为参数的函数内部，您使用没有括号的函数，以便当该事件发生时，只有它才会运行。如果使用函数参数内的括号调用函数，它将立即执行，并且在事件发生时也会运行。要调用函数中的参数并在此情况下调用函数，需要使用如下所示的绑定方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|170371|element.addEventListener("hover",+logOnInput.bind(null,+argument1,+argument2,+etc),+false+);|code-block|syntax|javascript|170372|但是，如果您想选择上下文作为this，那么我建议您这样使用：|style|CODE|170373|function+logOnInput(elem,arguments)+{
++//now+you+can+use+**elem**+to+refer+**this**
}|170374|并对悬停事件使用匿名函数，如下所示：|170375|element.addEventListener("hover",+function(){
+++logOnInput(this,arguments)
},+false+);|170376|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind^0|48|2|0|0|0|E|4|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@$A|11|B|12|1|13]]|C|$]]|$1|D|3|E|5|F|7|14|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|15|8|@$A|16|B|17|K|L]]|9|@]|C|$]]|$1|M|3|N|5|F|7|18|8|@]|9|@]|C|$G|H]]|$1|O|3|P|5|6|7|19|8|@]|9|@]|C|$]]|$1|Q|3|R|5|F|7|1A|8|@]|9|@]|C|$G|H]]|$1|S|3|-4|5|6|7|1B|8|@]|9|@]|C|$]]]|T|$U|$5|V|W|X|C|$Y|Z]]]]

Its a javascript when you want to call a function you use parentheses. Without parentheses outside a function is useless. But inside a function as argument you use the function without the parentheses so that when that event occurs then only it would run. If you call a function using parentheses inside function argument it will be executed immediately and would also run when the event occurs. To call a function with its parameters inside a function and just to invoke in that event you need to use the <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind" rel="nofollow">bind</a> method like below:

<pre><code>element.addEventListener("hover", logOnInput.bind(null, argument1, argument2, etc), false );
</code></pre>

However, if you want to select the context as <code>this</code> then I would recommend you to use like this:

<pre><code>function logOnInput(elem,arguments) {
 //now you can use **elem** to refer **this**
}
</code></pre>

And use the anonymous function for the hover event like this:

<pre><code>element.addEventListener("hover", function(){
 logOnInput(this,arguments)
}, false );
</code></pre>

blocks|key|2313097|text|如果您只针对现代浏览器，那么绑定函数可能是最干净的选项。一些博客谈到了绑定与匿名函数相比性能的损失。一些博客对匿名函数有不好的评论。匿名功能。在addEventListener上传递参数一切都很顺利。但是，当您到达removeEventListener时，传递参数的方式将不像在addEventListener中那样工作。我在2005年找到了这个家伙，答案是：http://www.codingforums.com/dom-and-json-scripting/5909-how-pass-arguments-independently-using-addeventlistener.html|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2313098|在简历中，将匿名函数设置为等于新声明的“事物”。如果这是变量或表达式，则为Idk。我测试了瓦尔，这是行不通的。在这一点上仔细考虑一下这方面的技术细节，但它是可行的。|2313099|function+addhoverIn(SELECTED)+{
++++++++SELECTED.addEventListener("mouseover",+addHIn+=+function()+{+hoverIn(SELECTED);+},+false);++
++++}
function+hoverIn(SELECTED)+{
++++++++SELECTED.removeEventListener("mouseover",+addHIn,+false);
++++}|code-block|syntax|javascript|2313100|entityMap|0|LINK|mutability|MUTABLE|url|http://www.codingforums.com/dom-and-json-scripting/5909-how-pass-arguments-independently-using-addeventlistener.html^0|50|38|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

The bind function is probably the cleanest option if you are targeting on modern browsers only. Some blogs talk about the loss of performance comparing bind with anonymous functions. Some blogs talk bad about anonymous functions.
On the anonymous function. All goes well passing arguments on the addEventListener. But when you get to removeEventListener passing the arguments won't work the same way as in the addEventListener.
I found this dude, in 2005, with the answer: 
<a href="http://www.codingforums.com/dom-and-json-scripting/5909-how-pass-arguments-independently-using-addeventlistener.html" rel="nofollow">http://www.codingforums.com/dom-and-json-scripting/5909-how-pass-arguments-independently-using-addeventlistener.html</a>

In resume, set your anonymous function to be equal to a newly declared "thing". Idk if this is a var or an expression. I tested var and it wont' work. Idk the technicalities of this at this point, but it works.

<pre><code>function addhoverIn(SELECTED) {
 SELECTED.addEventListener("mouseover", addHIn = function() { hoverIn(SELECTED); }, false); 
 }
function hoverIn(SELECTED) {
 SELECTED.removeEventListener("mouseover", addHIn, false);
 }
</code></pre>

I've noticed a difference between <code>function</code> and <code>function()</code> for addEventListener's callback.
Which isn't a problem till I tried passing a parameter. Basically, 

<pre><code>element.addEventListener("hover", logInput, false );
function logInput(){
 console.log('registered!');
}
</code></pre>

works as intended, but adding parenthesis will cause it log immediately, without continual response to the event trigger:

<pre><code>element.addEventListener("hover", logInput(), false );
function logInput(){
 console.log('registered!');
}
</code></pre>

Why is this? And how can I get it to work while passing a parameter such as:

<pre><code>element.addEventListener("hover", logOnInput(this), false );
function logOnInput(triggeredElement){
 console.log(triggeredElement);
}
</code></pre>

Javascript, addEventListener callback function executes immediately and only once?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

对于addEventListener的回调，我注意到了function和function()之间的区别。在我尝试传递一个参数之前，这不是一个问题。基本上，element.addEventListener("hover", logInput, false );function logInput(){    console...

问addEventListener回调函数只执行一次吗？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问addEventListener回调函数只执行一次吗？EN