[JS Apps] Стойност на this в event handler


9

Здравейте,

Правя тази тема, защото ми направи впечатление, че на лекцията е обяснено не докрай стойността на this в event handlers. Също така на едно от домашните бях получих подобен коментар да използвам this вместо event.target, когато явно двете не са взаимно заменяеми. Това ме навежда на мисълта, че може би има някакво объркване.

В примерите, които са дадени, евентите са закачени за един елемент и тогава стойността на this сочи правилно към този елемент и event.target също сочи към този елемент.

В лекцията е пропуснато да се спомене, че this и event.target имат различна стойност, когато евента е закачен към елемент, който има други елементи в себе си. Event.target сочи към елемента, който е кликнат, докато this сочи елемента, върху който е закачен евента.

Демо - http://jsfiddle.net/3ep8y/

Тоест изводът е, че this не сочи към елемента, върху който се стартира евента, а сочи към елемента, върху който е закачен този евент.




Отговори



0
Можеш съвсем опростено да приемеш че евент хендлъра е пропърти на елемента, към който е закачен. Така че this в този случай е нормално да сочи към него.

от JulianG (5316 точки)


0
Здравей. Обясненията за this в event съм ги слушал от лекциите на Дончо. Той обясняваше разликата м/у this и event.target. Говорело се е за това. При решението на една от задачите за подготовка в курса по JS UI & DOM отново го обясняваше.
Иначе обяснението ти за разликата м/у е правилно. Event.target показва върху какво е кликнато, а this елементът към който е закачен event-a.

от Vazzzz (1380 точки)


0

Ако ползваш jQuery няма как да се обърка, което и да ползваш

var wrapper = $('#wrapper');

wrapper.on('click', 'div', function(ev) {
  console.log(this);
  console.log(ev.target);
});