Почему бы не передать «this» вместо использования document.getElementById() в JavaScript

Question

Я начал изучать JavaScript, и в некоторых учебниках я увидел, что был использован document.getElementById(), а в некоторых учебниках в том же случае было использовано «это», что был передан из контроля, который произвел это событие. Может быть, кто-то может объяснить, почему я должен выбирать один из способов? Большое спасибо

Answer 1

Функции, назначенные как события, имеют свой контекст this как Объект, к которому относится Событие. Другими словами, сам Элемент.

// you can get Element a number of ways including document.getElementById('idHere') 
function someFunc(){ 
    this.style.color = 'blue'; 
} 
Element.onclick = someFunc; 

или

Element.addEventListener('click', someFunc); 

или

Element.onclick = function(){ 
    this.style.color = 'blue'; 
} 

или

function someFunc(context){ 
    context.style.color = 'blue'; 
} 
Element.onclick = function(){ 
    someFunc(this); 
    // more code here 
    // could use document.getElementById('whatever') to get HTML Element with id='whatever' 
} 

Answer 2

Вы имеете в виду документации из this MDN страницы на addEventListener? Убедитесь, что вы смотрите раздел на the value of this within the handler. Более ранние примеры используют document.getElementById для поиска произвольного элемента. Например, вы можете прикрепить обработчик клика к кнопке (или любому другому элементу), который модифицирует некоторый элемент другой, когда он щелкнут. В этом случае вы ничего не делаете с объектом, который создал событие click. Поэтому в обработчике вы будете использовать document.getElementById, чтобы изменить элемент, который вы хотите.

Однако в некоторых других случаях вы хотели бы изменить сам элемент. Например, вы можете изменить цвет элемента, на который пользователь нажимает, чтобы сообщить им, что его состояние изменилось (в основном переключиться). В этом случае вы хотите получить доступ к элементу, который фактически создал событие, и вы можете сделать это, используя this. Здесь this означает «Я - элемент HTML, который создал это событие».

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