Question

我是jquery和javascript的新手。我正在研究Splunk如何实现它的一些模块而感到困惑。

以下是遗漏了大量内容的示例代码。

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

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

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

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

Answer 1

“outer”bind使用jQuery将事件处理程序绑定到focus事件。

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

因此，在这种情况下，对Function.bind的调用确保每次input都被关注时，onInputFocus方法的上下文设置为{{1}的当前值（可能是你正在使用的小部件/组件）。这是必要的，因为它通常是事件发生的元素。

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

为了更好地说明其工作原理，请举一个简单的例子：

<强> HTML：

this

<强>的JavaScript ：

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

在第一个事件绑定中，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。

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

jquery嵌套绑定

1 个答案: