[英]“onclick” event gets fired automatically
I have this code that has an onclick
handler and an IIFE . 我有这段代码具有
onclick
处理程序和IIFE 。
var btn = document.getElementById("btn");
btn.onclick = function clickHandler(){console.log("Button clicked"); }
//btn.onclick = function clickHandler(){console.log("Now clicked"); };
(function(){
console.log("Hello");
})();
The issue is that the clickHandler gets invoked automatically after the page loads and the IIFE isn't invoked . 问题是clickHandler在页面加载后自动被调用 , 并且IIFE没有被调用 。 However, on commenting out line 2, and un-commenting out line 3 (the commented out line in the above code), the code works as expected.
但是,在注释掉第2行和取消注释第3行(上述代码中的注释掉的行)时,该代码将按预期工作。
The only difference between the two lines is that the 2nd line has no ; 这两行之间的唯一区别是第二行没有; in the end, but the 3rd line has.
最后,但是第三行。
Also, if I remove the IIFE and keeping the rest of the code unchanged, the code works fine. 另外,如果我删除IIFE并保持其余代码不变,则代码可以正常工作。
Demo : https://codepen.io/anon/pen/Pezpqv 演示: https : //codepen.io/anon/pen/Pezpqv
This is tricky. 这很棘手。 Because semicolon is missing in the second line of your code, parser doesn't stop there - and consumes all the tokens it can.
因为在代码的第二行中缺少分号,所以解析器不会在那里停下来,而是会消耗所有可能的令牌。 In the end, the code's parsed as...
最后,代码被解析为...
btn.onclick = function clickHandler() {
console.log("Button clicked");
}(
//btn.onclick = function clickHandler(){console.log("Now clicked"); };
function() {
console.log("Hello");
}
)
();
See the difference ()
makes - your function expression is invoked immediately . 请参见difference
()
make-您的函数表达式将立即被调用。 It's funny that ... 有趣的是...
function() { console.log('Hello') }
... is treated as its parameter value - which is ignored anyway. ...被视为其参数值-仍然会被忽略。
After that, result of clickHandler
is attempted to be reused as a function - but, as it returns undefined
, JS stops with (intermediate value)(...) is not a function
. 之后,尝试将
clickHandler
结果作为函数重用-但由于返回undefined
,因此JS停止以(intermediate value)(...) is not a function
。
Thought it's a good idea to twist your code a bit - and made the following snippet to illustrate the idea with more, well, drama in it. 认为稍微修改一下代码是一个好主意-并制作了以下代码片段,以期在其中包含更多,更生动的内容来说明该想法。
const btn = document.getElementById('btn'); btn.onclick = function clickHandler(e) { console.log('Now clicked'); return e; } //btn.onclick = function clickHandler(){console.log("Now clicked"); }; (function() { console.log('Hi!'); })();
<button type="button" id="btn">Click me!</button>
Show this to your colleagues and ask the same question (why doesn't click handler work here?) if you want to make them a bit... mad. 如果您想让他们有点生气,请向您的同事展示并询问相同的问题(为什么单击处理程序在这里不起作用?)。 )
)
您在这里错过了半列
btn.onclick = function clickHandler(){console.log("Button clicked"); } ;
The problem is in starting code with (
while the previous line of code does not end with semicolon ( ;
). This treats both line of codes to be executed together like: 问题是在与起始码
(
而代码不与分号(结束前一行;
)。此处理二者线被一起执行的代码的这样的:
}(
To solve the problem either you have to put ;
要解决这个问题要么你必须提出
;
at the end of the statemnet or move the IIFE code to the top of your code: 在statemnet的末尾,或将IIFE代码移到代码顶部:
(function(){ console.log("Hello"); })(); var btn = document.getElementById("btn"); btn.onclick = function clickHandler(){console.log("Button clicked"); }
<button type="button" id="btn" >Click</button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.