Контекст this для событий
 

Привет всем! Давненько влотную не работал с JS, посему забыл мелочи. Необходимо вспомнить следующее:

<li id='l' onclick='f(event);'>11111111</li>
<script type="text/javascript">
function f(e){
    alert(e.target); //всё нормально, здесь li
    alert(this); //почему в контексте this - Window? Ф-ция же срабатывает лишь при наведении на li, => и this должен указывать на этот эл-т...
}

document.getElementById('l').onmouseover = function (e) {
	console.log(this) //вот здесь всё нормально, передаётся li. Но ведь в обоих случаях ф-ция является обработчиком СОБЫТИЯ на КОНКРЕТНОМ элементе, в чём же тут дело?
}
</script>

В разнице атрибутов и свойств...

Неправда.

Boolean_Type, ты неправильно сравнение делаешь.

<button onclick='alert(this);'>this в атрибуте (кликни)</button>
<button id="button2">this в свойстве (кликни)</button>
<script>
    button2.onclick = function() {
        alert(this);
    };
</script>

А теперь добавляем вызов функции:

<button onclick='f(event)'>this в атрибуте (кликни)</button>
<button id="button2">this в свойстве (кликни)</button>
<script>
    function f(event) {
        alert(this);
    }
    button2.onclick = function(event) {
        f(event);
    };
</script>

Boolean_Type, осознал косяк?

Указываем контекст при вызове функции:

<button onclick='f.call(this, event)'>this в атрибуте (кликни)</button>
<script>
    function f(event) {
        alert(this);
    }
</script>

Ответ надо искать в спецификациях. Нафиг, просто знайте что инлайновые вызовы требуют явного присвоения аргументов (this,event). Так всегда было, лежи оно так вовек.

А не-инлайновые что-ли не требуют?

Ответ надо искать в ECMA, он не имеет вообще никакого отношения к HTML-атрибутам, и вообще HTML

Все равно не понял почему, видимо так было задумано в эпоху зарождения браузеров со скриптами http://www.quirksmode.org/js/events_early.html

Не требуют. Браза без базаров подгоняет this.

То есть в примере поста #4 у тебя при клике на вторую кнопку показывает [object HTMLButtonElement] ?

По-моему, это то же, о чём писал я в вопросе, только чуть более наворочено) И так, и так в this - Window.

Неинлайновые передают this.

function f(event) {
        alert(this);
    }
    button2.onclick = function(event) {
        alert(this); //здесь покажет, kostyanet прав
        f(event); //а здесь нет, т.к. вызов не в контексте DOM-элемента
      
};

Спасибо всем, кто отписался, дали ответ на сайте-учебнике:
Атрибут onclick создает в качестве обработчика анонимную функцию, а код который вставлен в значение атрибута выполняется в этой функции. Т.е.
onclick="f(event);"
эквивалентно
el.onclick = function() {
f(event);
}
Т.к. функция f вызывается просто так, а не в контексте чего-то, то в качестве this в ней будет глобальный объект.
Похоже, что так, как бы глупо это ни звучало. Хотя всё равно это неприятный момент с учётом того, что ф-ция срабатывает при определённом действии польз-ля, а не просто так.

Да, спасибо. Похоже, остаётся лишь смириться)

Ну вы укурки ))) Два укурка ))
А теперь выдохни и посмотри на код из http://javascript.ru/forum/events/50...tml#post335625 .
Ниче не напоминает ? :D Или перестать укуриваться ) Ибо нет никакой разницы инлайн-не инлайн. Повторяю для накуренных: JavaScript не завязан на HTML. Нет никакой разницы между функцией созданной из атрибута, и функцией, присвоенной в js коде. Функция - она и в африке функция. Запусти ее в африке - ничего не изменится.

И еще пачку блоков with{}

Функция не является ничем кроме функции. Это ты, почему-то называешь ее обработчиком чего-то там. А вопрос в чем, вообще непонятно. Вызов функции в топлевеле -- это всегда вызов в контексте window, в браузере. И ты, значит, спрашиваешь, почему this связывается с тем объектом, с которым должна связываться, а не с тем, с которым мне хотелось бы чтобы он связывался, в этом чтоли вопрос? С таким же успехом можно спросить, почему трава зеленого цвета, ведь мне хотелось бы, чтобы она была синяя.

Все правильно, а глупо это звучит только для поциэнтов с жабой головного мозга в терминальной стадии. В JS Ъ-ООП в стиле смолтока, это куда более сильная модель чем статик-блядство в стиле лексических замыканий.

Да что Вы говорите.
http://learn.javascript.ru/introduct...событий

Причём тут укуриваться, чё за манера? :nono:
Вот именно, напоминает, ибо ты написал то же самое, где вызов идёт не в контексте элемента, а контексте Window. Об этом и писал мне отвечающий.
При инлайн надо явно передавать this в вызове!) Ты же сам видишь.

<button id="l" onclick="f();">инлайн-метод, не передаю this</button>
<button onclick="f(this);">инлайн-метод, передаю this</button>
<script type="text/javascript">
function f(obj_this){
    alert(this);
    alert(obj_this);
}
//здесь в вызове не передаётся this, но в ф-ции обработчики контекст устанавливается правильно, метод не инлайновый
document.getElementById('l').onmouseover = function (e) {
     console.log(this)
}
</script>

Накурился я или нет, а пример налицо. При инлайн-вызове надо просто this передавать, я запомню. И видна эта this будет лишь ф-ции, в кот-ую передаётся, а вот это говнище работать нормально не будет:

button2.onclick = function(event) {
   f(event);
};

т.к. внутри обработчика вызывается левая ф-ция в контексте Window. Вот это будет:

button2.onclick = function(event) {
   alert(this); //требуем this прямо в обработчике, а не посредством левой ф-ции
};

danik.js, меня отпустило :thanks:
Спасибо всем отписавшимся, вот бы на сайтах, пхп посвящённых, так же оперативно и с примерами отвечали...

Да блядь жеж! А при не-инлайн не надо чтоли? Ты троллишь чтоли? Покажи как ты в неинлайн обработчике вызываешь функцию f и не передаешь this, и в функции f this указывает не на window. Жду

Вот тебе функция f:
function f(event) {
alert(this);
}

Ах ты хитрая жопа!!! Значит, в неинлайн ты логируешь тупо this в теле обработчика, в инлайн вызываешь какую-то левую? f()

И в чем тут логика?

Вот инлайн обработчик. Что блядь в нем не так? Куда там this не показывает?

<button onclick="console.log(this)">Button</button>

:lol:
Эй, а кому же я предыдущий пример печатал??? Вот кусок из него:

<button id="l">тут НЕ инлайн</button>
<script type="text/javascript">
//ещё раз, об этом Костянет писал тоже: здесь в вызове не передаётся this, но в ф-ции обработчики контекст устанавливается правильно, метод не инлайновый
document.getElementById('l').onclick = function () { //НИ ХЕРА НЕ ПЕРЕДАЮ
     alert(this); //ОХРЕНЕТЬ, this - это [object HTMLButtonElement]
}
</script>

Да, тут показывает, ты же его явно передал. А в моём вопросе не показывал, ибо я не передал его явно :)

И чем отличается обработчик от функции? Функция, когда ее назвали обработчиком, перестает быть функцией? Приобретает новые свойства?

Смотрим твой код:
А ну немедленно перестань передавать this в console.log() !:D

Ты идиот. Что и куда тут можно передать? Ты записываешь функцию в свойство onclick
Онологично как я задаю атрибут onclick с телом функции.

Покажи, где тут разничия в поведении?

1)  <a onclick =                "       alert(this)      ">
2)    a.onclick = function() {       alert(this)      };

:lol: danik.js, я не успеваю за твоими ответами)
Вот именно, я не понимал, почему при вызове левой f() контекст не передаётся. Я думал - раз событие, так this во всех ф-циях будет показываться, которые запущены этим событием. Ошибался.

Тут их нет, ты же в строке this указал) А если чё-то типа <a onclick = "some_fucking_func()">, и в этой some_fucking_func прописано alert(this), этот this будет Window.

Ладно, danik.js, ну отстань уже, я разобрался :D

Корявые шрифты поломали вырванивание. Вот:

Нафиг стока пробелов, я и так понял, что там написано)))

То есть если сделать так то будет какая-то разница? :


Мы ведь это уже проходили, только вместо some_fucking_func() было f(). У тя провалы в памяти?

Так будет разница или нет?

А у тебя? Я же ответил выше.
http://javascript.ru/forum/events/50...tml#post335773

Ты не ответил. Дословно:То есть в варианте с атрибутом будет Window, а в варианте со свойством - что-то другое?
Можешь не гадать, я уже пример накидал: http://javascript.ru/forum/events/50...tml#post335625

Нахер такие переподвыподверты? Зачем из-под одной ф-ции было вызывать f(), этот пример нихрена не показателен, там Window везде, что ты им сказать-то пытался?

<button onclick='f(event)'>this в атрибуте (кликни)</button>
<button id="button2">this в свойстве (кликни)</button>
<script>
    function f(event) {
        alert(this);
    }
    button2.onclick = function(event) {
        alert(this); //нахер тут было f вызывать? Я уже понял, что там Window) И ты ещё говоришь, что я хитрая жопа?:D 
    };
</script>

Boolean_Type,
А кто сказал, что там правильно написано?

f=function(){alert(this.foo)}
el1.onclick=f
el2.onhuy=f

Здесь f -- обработчик какого события, какого эдемента?

А нахер в onclick="f()" вызывать f() ? :D

danik.js, нахер вообще что-то вписываете? какие-то ивенты-шмывенты.

смысла дискуссии я не уловил. Если у функции аргументы не обозначены явным образом - значит не обозначены явным образом, а this ну просто обожает появляться неявным образом, собственно как и все прочие переменные дружеского и вражеского окружения.

http://learn.javascript.ru/play/eG9lQ