Итак, вы оказываетесь с DOM. У вас есть элемент управления, и теперь вы можете использовать старый добрый Function.prototype.bind() , чтобы вы могли ссылаться на «это» в своих функциях, не слишком зацикливаясь на том, что «это» в данный момент.

Это большое дело. Вы нажимаете кнопку, кнопка «это».

Вы ссылаетесь на DOM, DOM — это «это».

Вы нажимаете кнопку, встроенную в DIV, который находится внутри ячейки таблицы в другом DIV, заключенном в DIV-контейнер, который является частью объектной модели документа — тогда что это?

Именно здесь вы можете привязать «это» к любому элементу, который вам нравится, так что, когда вы вызываете его в функции, вы можете ссылаться на него как на «это» без всей двусмысленности, которая возникает при попытке отследить событие, всплывающее через объекты DOM.

Вы нажали кнопку, div, ячейку таблицы, внешний div или сам DOM?

«Это» не может быть тем, если вы хотите сослаться на «это» и при этом сохранить то, о чем говорите.

Вот пример. Предположим, у вас есть эта функция updateZipCode:

var updateZipCode = function () {
console.log(this);
};
updateZipCode(78704);

вызов этой функции так, как она вызывается, просто выводит объект, потому что это все, что позволяет JS интерпретировать «это» как находящееся в этом конкретном контексте.

Итак, мы используем один из наших методов связывания (в данном случае «вызов»), а затем вызываем функцию следующим образом:

var updateZipCode = function () {
console.log(this);
};
var zipCode = {
zip: '11787'
};
> updateZipCode.call(zipCode);

На этот раз функция знает, что когда она ссылается на «это», она ссылается не на функцию (из-за области действия), а на объект zipCode (из-за привязки).

Это звучит сложно, но это одна из тех вещей, которые, когда вам это нужно, вам действительно нужно.

Или вы нажали кнопку, DIV, ячейку таблицы или DIV?

Вы нажали «это».