Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.12.2012, 15:08
Интересующийся
Отправить личное сообщение для SegaMega Посмотреть профиль Найти все сообщения от SegaMega
 
Регистрация: 20.09.2012
Сообщений: 16

Что всё-таки возвращает 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);
Ответить с цитированием
  #2 (permalink)  
Старый 24.12.2012, 20:20
жажду знаний
Отправить личное сообщение для bushstas Посмотреть профиль Найти все сообщения от bushstas
 
Регистрация: 17.07.2009
Сообщений: 202

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

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

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


элемент <a> и this

Последний раз редактировалось bushstas, 24.12.2012 в 20:25.
Ответить с цитированием
  #3 (permalink)  
Старый 24.12.2012, 21:29
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

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
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.

Последний раз редактировалось cyber, 24.12.2012 в 22:41.
Ответить с цитированием
  #4 (permalink)  
Старый 24.12.2012, 21:35
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Сообщение от 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>
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
  #5 (permalink)  
Старый 25.12.2012, 09:18
Интересующийся
Отправить личное сообщение для SegaMega Посмотреть профиль Найти все сообщения от SegaMega
 
Регистрация: 20.09.2012
Сообщений: 16

Сорри Всем ))
Уважаемые Господа!!! Вынужден признать свою грубую ошибку, публично покаяться и как-то попытаться реабилитироваться в глазах всех, кто читал моё первое сообщение... К тому же надеюсь, данная тема поможет тем кто плавает ещё в JavaScript - обязательно меня поправьте, если что!!! Итак пойдём вместе логичным путём с самого начала:
  1. Есть ссылка с id="respect"
    <a href="http://javascript.ru" id="respect">Ссылка</a>
    
  2. Нужно на событие клика по ней повесить функцию 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) Дальше... какого фига я вообще использую 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);  // неправильно


Заранее спасибо за помощь всем...
Ответить с цитированием
  #6 (permalink)  
Старый 25.12.2012, 09:47
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

resp.onclick=RightMessage.call(this);

вот так нельзя делать не в коем случаем, можно только так
<a href="http://javascript.ru" id="respect" onclick="RightMessage.call(this);return false;">Ссылка</a>
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #7 (permalink)  
Старый 25.12.2012, 09:50
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

Сообщение от SegaMega
3) как передавать АРГУМЕНТЫ в функцию при её назначении событию?! т.е. что-то типа:
вот так
resp.onclick= function(){
 RigthMessage(arg);
};
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #8 (permalink)  
Старый 25.12.2012, 10:40
Интересующийся
Отправить личное сообщение для SegaMega Посмотреть профиль Найти все сообщения от SegaMega
 
Регистрация: 20.09.2012
Сообщений: 16

Спасибо большое )) а как насчёт 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 в силе...
Ответить с цитированием
  #9 (permalink)  
Старый 25.12.2012, 10:45
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Сообщение от 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);
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
  #10 (permalink)  
Старый 25.12.2012, 12:02
Интересующийся
Отправить личное сообщение для SegaMega Посмотреть профиль Найти все сообщения от SegaMega
 
Регистрация: 20.09.2012
Сообщений: 16

Сообщение от devote Посмотреть сообщение
Я иногда деляю это так:
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);
такс... значит, пока кроме глобального объекта 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; я уже писал выше )))

Последний раз редактировалось SegaMega, 25.12.2012 в 14:16. Причина: Забыл добавить описание ещё одной своей ошибки...
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
http://gigalit.info - Мои контакты Маэстро Ваши сайты и скрипты 70 08.12.2011 03:12
Вывести все картинки что есть на странице padonak Общие вопросы Javascript 14 27.11.2011 23:20
фрактальный сыр x-yuri Оффтопик 76 23.11.2011 21:59
xslt и все что его касается розовый слоник Общие вопросы Javascript 3 22.02.2011 14:36
Название ячейки таблицы Questioner Общие вопросы Javascript 6 16.02.2011 09:58