Javascript-форум - Что всё-таки возвращает window.event.srcElement в IE?

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Что всё-таки возвращает window.event.srcElement в IE? (https://javascript.ru/forum/events/34209-chto-vsjo-taki-vozvrashhaet-window-event-srcelement-v-ie.html)

Что всё-таки возвращает window.event.srcElement в IE?

Доброго времени суток, уважаемые форумчане! Вопрос в следующем:

В ниже приведённом примере при клике на ссылку с id='test1' или с id='test2' вызывается ф-я WrongMessage, которая выводит id этой самой ссылки алертом. То, что в IE this в функции НЕ указывает на текущий объект - это понятно... поэтому юзаем window.event.srcElement.

Почему window.event.srcElement.id возвращает ID текущей ссылки, а window.event.srcElement возвращает непонятно что, хотя по логике должен указывать на текущий объект ссылки!? :-?

P.S. правильная функция RightMessage(event) и ссылка с ID="respect" нам говорит, что всё ОК. Где же собака зарыта?!

P.S.S. статьи http://learn.javascript.ru/this, http://learn.javascript.ru/bubbling-and-capturing, http://javascript.ru/tutorial/events/, http://javascript.ru/tutorial/events/properties я уже прочитал ))

Код HTML

<!DOCTYPE html>
<html>

<head>
<title>Тест [this, return false] в IE</title>
<script type="text/javascript" src="test.js" ></script>
</head>

<body>
<!-- Чёткая ссылка )) -->
<a href="http://javascript.ru" id="respect">Ссылка без onclick в HTML и без ошибок :)</a><br/><br/>

<!-- Ссылки с неправильным JS (( -->
<a href="http://javascript.ru" id="test1">Ссылка без onclick в HTML</a><br/>
<a href="http://javascript.ru" id="test2" onclick="WrongMessage();return false;">Ссылка c onclick без this в HTML</a><br/>
</body>
</html>

Код файла test.js

// универсальная кросс-браузерная ф-я для добавления событий
function addEvent(elm, evType, fn, useCapture) {
    if (elm.addEventListener) {
    elm.addEventListener(evType, fn, useCapture);
    return true;
    }
    else if (elm.attachEvent) {
         var r = elm.attachEvent('on' + evType, fn);
         return r;
         }
         else {
         elm['on' + evType] = fn;
         }
}

function WrongMessage() {
// как ни странно, НО id выводится и ошибок в IE нет!!!
var aid=this.id || window.event.srcElement.id;
alert(aid);

// а вот здесь в IE aobj.id=undefined (( почему?!
var aobj=this || window.event.srcElement;
alert(aobj.id);

// нужно ТОЛЬКО для ссылки с id='test1'
// для ссылки с id='test2' прописано в onclick в HTML
return false;
}

function RightMessage(event) {
event = event || window.event;

// попутный вопрос №1: можно и грамотно ли писать так, раз работает?!
// var aobj=this || event.srcElement;

var aobj=event.target || event.srcElement;
alert(aobj.id);

// попутный вопрос №2: Есть ли разница между
// event.preventDefault ? event.preventDefault() : event.returnValue = false;
// и return false; !? Какой вариант лучше и почему?

return false;
}

function DOM_OK() {

    var resp=document.getElementById("respect");
    addEvent(resp, 'click', RightMessage, false);

    var a1=document.getElementById("test1");
    addEvent(a1, 'click', WrongMessage, false);

}

addEvent(window, 'load', DOM_OK, false);

думаю window.event.srcElement (если элемент есть <a>) возвращает его (элемента) href а именно строку "javascript.ru"

может попробуешь использовать например <span> вместо <а>

я вот в Опере у себя сейчас попробовал onclick="alert(this)", алертует "window.ru" (то что я указал в качестве href)

http://http://javascript.ru/forum/events/10421-ehlement-i.html

SegaMega,

Цитата:

/ как ни странно, НО id выводится и ошибок в IE нет!!!
var aid=this.id || window.event.srcElement.id;

конечно работает только в ие, потому что только ие поддерживает глобальное свойство event в которому храниться элемент от которого всплывает событие , а this == window.

onclick="WrongMessage.call(this)"

Цитата:

// event.preventDefault ? event.preventDefault() : event.returnValue = false;
// и return false; !? Какой вариант лучше и почему?

да,

Цитата:

Если обработчик назначен через on..., то return false из обработчика отменяет действие браузера:

http://learn.javascript.ru/default-browser-action

Цитата:

Сообщение от bushstas

думаю window.event.srcElement (если элемент есть <a>) возвращает его (элемента) href а именно строку "javascript.ru"

что за бред?

window.event.srcElement содержит ссылку на элемент у которого произошло событие, а то что элемент A возвращает строку ссылки, дык это потому что браузер перед отображением Ноды, пытается перевести переменную в строковой тип, тем самым вызывая метод .toString() у объекта.

<a href="yandex.ru" onclick="alert([this.toString(), this.nodeName, this.innerHTML].join('\n')); return false;">blah ololo</a>

Сорри Всем ))

:stop: Уважаемые Господа!!! Вынужден признать свою грубую ошибку, публично покаяться и как-то попытаться реабилитироваться :thanks: в глазах всех, кто читал моё первое сообщение... К тому же надеюсь, данная тема поможет тем кто плавает ещё в JavaScript - обязательно меня поправьте, если что!!! Итак пойдём вместе логичным путём с самого начала:

Есть ссылка с id="respect"

<a href="http://javascript.ru" id="respect">Ссылка</a>

Нужно на событие клика по ней повесить функцию RightMessage, показывающую алертом какой-нить атрибут ссылки... и соответственно DOM-объект этой ссылки должен быть доступен в теле функции.

Назначаем функцию одним из способов:
из HTML (инлайновый способ типа):

<a href="http://javascript.ru" id="respect" onclick="RightMessage();return false;">Ссылка</a>

или из JS после готовности DOM документа

var resp=document.getElementById("respect");
resp.attachEvent( "onclick" , RightMessage); // только для IE или Opera. В теле функции this будет указывать на глобальный объект window (!)

или

resp.addEventListener( "click" , RightMessage, false) // только для браузеров, поддерживающих стандарт W3C. В теле функции this будет указывать на исходный объект, т.е. resp (!)

или

resp.onclick=RightMessage; // кросс-браузерно и this 100% указывает на resp!!!

или

resp.onclick=RightMessage.call(this); //  Вот с этим честно признаюсь - пока не разобрался, но здесь ошибка 100% !!! т.к. идёт не присвоение функции событию клика, а ВЫЗОВ функции...

Вот грамотные ссылки по теме:
http://javascript.ru/tutorial/events/ - назначение событий
http://habrahabr.ru/post/119841/ - вызовы функции

Итак теперь переходим к самой функции RightMessage

function RightMessage(event) {
event = event || window.event; // event или window.event (для IE) = объект "событие"

// попутный вопрос №1: можно и грамотно ли писать так, раз работает?!
// var aobj=this || event.srcElement;

var aobj=event.target || event.srcElement; // event.target/srcElement - означает исходный элемент, на котором произошло событие.

alert(aobj.id); // выводим атрибут ID ссылки (aobj=resp) 

return false; // отмена перехода по дефолтной ссылке 
}

Сразу разберём мои ошибки:
1) var aobj=this || event.srcElement;
так ни в коем случае писать нельзя, для получения исходного объекта!!! во всяком случае при назначении событий через attachEvent (для IE). Почему?! Да потому что this = window в IE, а event.srcElement - исходный элемент (т.е. resp) В итоге получим: aobj=window или resp (!!!) - значит, aobj мы присвом глобальный объект window ((( А это не гуд ((

Вот для resp.addEventListener(...) или для resp.onclick=RightMessage; в теле функции this будет указывать на resp 100%

2) Дальше... :nono: какого фига я вообще использую event.target || event.srcElement; для получения (!) объекта в теле функции, которая весит на этом же объекте?! Эту тему грамотно использовать при делегировании например (http://learn.javascript.ru/event-delegation).

В общем... хотел-то всего-навсего просто в теле функции, повешенной на ссылку через attachEvent или addEventListener, получить быстрый доступ к объекту этой ссылки... а получилось каши.... :(

Объясните мне ещё раз плз несколько моментов:
1) как использовать конструкцию вида RightMessage.call(this), чтобы 100% this в теле функции указывал на исходный объект?! - если это вообще правильный вопрос... насколько я понял (http://javascript.ru/Function/call) - это именно ВЫЗОВ ф-ии...
2) как грамотно повесить событие через attachEvent, чтобы опять же в теле ф-ии this указывал на исходный объект? вариант resp.onclick=RigthMessage; - не вариант ))
3) как передавать АРГУМЕНТЫ в функцию при её назначении событию?! т.е. что-то типа:

var arg="hello";
resp.onclick=RigthMessage(arg); // неправильно
resp.addEventListener('click', RigthMessage(arg), false);  // неправильно

Заранее спасибо за помощь всем...

resp.onclick=RightMessage.call(this);

вот так нельзя делать не в коем случаем, можно только так

<a href="http://javascript.ru" id="respect" onclick="RightMessage.call(this);return false;">Ссылка</a>

Цитата:

Сообщение от SegaMega

3) как передавать АРГУМЕНТЫ в функцию при её назначении событию?! т.е. что-то типа:

вот так

resp.onclick= function(){
 RigthMessage(arg);
};

Спасибо большое )) а как насчёт 2-го вопроса?! Как же надёжно (точнее, правильно) получать this в теле функции для IE, после назначения этой функции через attachEvent?

И ещё один вопрос - если в HTML юзать

<a href="http://javascript.ru" id="respect" onclick="RightMessage.call(this);return false;">Ссылка</a>

то this указывает в функции на ссылку 100%... а если так

<a href="http://javascript.ru" id="respect" onclick="RightMessage(this);return false;">Ссылка</a>

то this передаётся в ф-ю просто как аргумент (кстати тогда нужно и функцию переписывать, чтоб она принимала параметр). По этому параметру можно и получить сам исходный объект... Правильно!?

И насколько я понимаю здесь аргумент функции - не сам объект со всеми свойствами, методами и пр... а просто ссылка на него!?

Вопрос №2 в силе...

Цитата:

Сообщение от SegaMega

Спасибо большое )) а как насчёт 2-го вопроса?! Как же надёжно (точнее, правильно) получать this в теле функции для IE, после назначения этой функции через attachEvent?

Я иногда деляю это так:

var methodType = "addEventListener" in window ? ["addEventListener", ""] : ["attachEvent", "on"];
elem[methodType[0]](methodType[1] + 'click', function(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;

    // target и есть ссылка на элемент
}, false);

Цитата:

Сообщение от devote (Сообщение 223377)

Я иногда деляю это так:

var methodType = "addEventListener" in window ? ["addEventListener", ""] : ["attachEvent", "on"];
elem[methodType[0]](methodType[1] + 'click', function(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;

    // target и есть ссылка на элемент
}, false);

:blink: такс... значит, пока кроме глобального объекта window.event и его свойства window.event.srcElement вариантов для IE нет?!... я по сути в ф-и RightMessage это и юзал...

да и ещё!!! Забыл добавить описание ещё одной своей ошибки в ф-и WrongMessage...

function WrongMessage() {

var aid=this.id || window.event.srcElement.id;
alert(aid);
 
var aobj=this || window.event.srcElement;
alert(aobj.id);
 
return false;
}

Меня смутило, что в IE window.event.srcElement.id показывало ID ссылки, а window.event.srcElement "ЯКОБЫ" не ссылался на её объект... всё потому, что this.id = window.id = false, а window.event.srcElement.id = resp.id = true. В итоге: aid=resp.id и всё путём ))) ну, а про свой косяк в использовании такой конструкции в IE ~~var aobj=this || window.event.srcElement;~~ я уже писал выше )))