1

我对 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)。请向我解释这个符号，以便我了解正在发生的事情。

4

1 回答 1

1

“外部”使用 jQuerybind将事件处理程序绑定到事件。focus

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

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

MDN 上的文章Function.bind对此有很好的解释。

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

HTML：

​&lt;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被设置为。#targetFunction.bind

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

于 2012-08-13T00:08:49.127 回答