Question

I am very new to jquery and javascript. I am looking at how Splunk implements some of its modules and got confused.

Here is sample code with a lot of stuff left out.

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

this.input refers to a textbox used for a SearchBar. Later, in the file, onInputFocus is declared

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

I know the “this.input.bind” statement tells the browser to execute onInputFocus when a person clicks in the textbox but I do not understand .bind(this) at the end of the eventhandler. Please explain to me this notation so I understand what is happening.

Answer 1

The “outer” bind is binding an event handler to the focus event using jQuery.

The “inner” Function.bind is creating a function that is bound to a particular context (making this equal to that context when the function is called). This does not require a framework (but does require a modern browser).

So, in this case, the call to Function.bind is making sure that every time input is focused, the onInputFocus method’s context is set to the current value of this (which is probably the widget/component you’re using). This is necessary because it usually would be the element the event occurred on.

The MDN article on Function.bind has a good explanation of this.

---

To better illustrate how this works, take a simple example:

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")));

In the first event binding, fill is called and this is set to #test (since that was the element that was clicked).

In the second, fill is called again, but this is set to #target because of the call to Function.bind inside of the event binding.

Example: http://jsfiddle.net/GK7L8/