点击事件的事件处理程序自动触发 - jQuery [英] Event handler for click event fires automatically - jQuery

问题描述

可能存在重复：

在我对Javascript的函数的理解方面存在差距，所以我很难理解为什么我的事件处理程序会自动被触发，如果我没有使用匿名包装器来定义它。

HTML

 < a href =＃id =change-html>更改HTML< / a> 
  

Javascript＃1

  var btn = $（'＃change-html'）; 
 btn.click（bindClick（btn））; // bindClick被立即执行并且只执行一次
 
函数bindClick（源）{
 console.log（'get here'）; 
 
  

Javascript＃2

$ b $ p

$ $ $ $ $ $ $''$ change-html'）;
btn.click（function（）{
bindClick（btn）; // bindClick仅在锚的点击事件中执行
}）;

函数bindClick（源）{
console.log（'get here'）;

解决方案

其实这里

  btn.click（bindClick（btn））; 
  

您只是将函数的返回值绑定到click事件，而不是函数本身。
由于在JavaScript中你可以返回一个函数，这将工作

  var btn = $（'＃change- HTML'）; 
 btn.click（bindClick（btn））; 
 
函数bindClick（源）{
返回函数（）{
 console.log（'get here'）; 
} 
} 
  

http://jsfiddle.net/VZ4Gq/

编辑 - 第二个函数是闭包吗？是这可能是。让我们来看看这个例子吧。
$ b $ pre $ var $ btn = $（'＃change-html'）;
btn.click（bindClick（btn））;
//全局范围
var内=我在关闭之外;
console.log（inside）;
函数bindClick（源）{
//本地范围
var内=我在关闭内;
返回函数（）{
console.log（inside）;
}
}

http://jsfiddle.net/VZ4Gq/1/

当你尝试这个时，你会得到记录我在关闭之外，然后当你点击按钮时，你会看到我在关闭之内。这是因为你实际上创建了一个闭包和ffunction，当它是executo时，它被执行在它原来的作用域内，它在bindClick（）内部。

Possible Duplicate:
Why does click event handler fire immediately upon page load?

There is a gap in my understanding of Javascript's function so I have trouble understanding why my event handlers get fired automatically if I define it without an anonymous wrapper.

HTML

<a href="#" id="change-html">Change HTML</a>

Javascript #1

var btn = $('#change-html');
btn.click(bindClick(btn)); // bindClick gets executed right away and only once

function bindClick(source){
    console.log('get here');
}

Javascript #2

var btn = $('#change-html');
btn.click(function(){
    bindClick(btn); // bindClick is only executed on the anchor's click event 
});

function bindClick(source){
    console.log('get here');
}

解决方案

Actually here

btn.click(bindClick(btn)); 

you are just binding the return value of the function to the click event, not the function itself.
Since in javascript you can return a function this would work

var btn = $('#change-html');
btn.click(bindClick(btn));

function bindClick(source){
    return function() {
        console.log('get here');
    }    
}

http://jsfiddle.net/VZ4Gq/

EDIT - is the second function a closure?Yes it might be.Let's lok at this example

var btn = $('#change-html');
btn.click(bindClick(btn));
// global scope
var inside = "i'm outside a closure";
console.log(inside);
function bindClick(source){
    // local scope 
    var inside = "i'm inside a closure";
    return function() {
        console.log(inside);
    }   
}

http://jsfiddle.net/VZ4Gq/1/

when you try this you get logged "i'm outside a closure" first and then when you click on the button you get "i'm inside a closure". this is because you actually created a closure and the ffunction, when it's executo, it's executed in it's original scope, which is inside bindClick()

这篇关于点击事件的事件处理程序自动触发 - jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！