jQuery的嵌套绑定

Question

我很新的jQuery和JavaScript的。我正在研究Splunk如何实现其某些模块并且感到困惑。

这是一个带很多的东西离开了示例代码。

this.input.bind("focus",this.onInputFocus.bind(this)) 

this.input指用于SearchBar的文本框。后来，在该文件中，onInputFocus声明

onInputFocus: function(evt) { 
    ... 
    ... 
    return true 
}, 

我知道了“this.input.bind”语句告诉当一个人点击在文本框中，但我不明白.bind执行onInputFocus浏览器（这）在事件处理结束时。请向我解释这个符号，以便我了解发生了什么。

Answer 1

“外” bind被结合的事件处理程序，以使用jQuery的focus事件。

“内部”Function.bind正在创建绑定到特定上下文的函数（使this等于该函数被调用时的上下文）。这不需要框架（但需要现代浏览器）。

因此，在这种情况下，调用Function.bind是确保每一次input聚焦时，onInputFocus方法的情况下被设置为this电流值（这可能是你使用的部件/组件）。这是必要的，因为它通常是事件发生的元素。

The MDN article on Function.bind有一个很好的解释。

---

为了更好地说明是如何工作的，举一个简单的例子：

HTML：

​<button id="test" type="button">Test</button> 
<button id="test2" type="button">Test 2</button> 
<div id="target"></div> 

的JavaScript：

var fill = function() { 
    $(this).css('background-color', 'yellow'); 
}; 
/* button#test will be colored yellow */ 
$("#test").bind("click", fill); 

/* div#target will be colored yellow */ 
$("#test2").bind("click", fill.bind($("#target"))); 

在第一事件绑定，fill被调用并this设置为#test（因为这是所单击元素）。

在第二个，fill被再次调用，但this设置为#target，因为在Function.bind里面的事件绑定的调用。

例子：http://jsfiddle.net/GK7L8/