VPF::Ввызов onclick для вложенных элементов

kolombo1

Дата 15.7.2009, 10:31 (ссылка)

(голосов:1)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 25
Регистрация: 15.7.2009

Репутация: нет
Всего: нет

Есть 2 варианта кода:
1.

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Events</title>
<script language="JavaScript" type="text/javascript">
function init()
{
   document.getElementById('d1').onclick = function(event)
    {
        alert(this.id);
    }
    document.getElementById('d2').onclick = function(event)
    {
        alert(this.id);       
    }
    document.getElementById('d3').onclick = function(event)
    {
        alert(this.id);
    }
}
</script>
</head>
<body onload="init()">
<div id="d1"> 1 <br />
    <div id="d2"> 2 <br />
        <div id="d3"> 3 <br />
        </div>
    </div>
</div>
</body>
</html>

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Events</title>
<script language="JavaScript" type="text/javascript">
function init()
{
   document.getElementById('d1').onclick = function(event)
    {
        event = event || window.event;
        alert( (event.target || event.srcElement).id);
    }
    document.getElementById('d2').onclick = function(event)
    {
        event = event || window.event;
        alert( (event.target || event.srcElement).id);
    }
    document.getElementById('d3').onclick = function(event)
    {
        event = event || window.event;
        alert( (event.target || event.srcElement).id);
    }
}
</script>
</head>
<body onload="init()">
<div id="d1"> 1 <br />
    <div id="d2"> 2 <br />
        <div id="d3"> 3 <br />
        </div>
    </div>
</div>
</body>
</html>

Вариант 1 работает как я и предполагал - при нажатии на 3 вложенный div вызывается 3 сообщения: d3, d2, d1. В варианте 2 эти сообщения выглядят так: d3, d3, d3. Почему так?

IDVsbruck

Дата 15.7.2009, 11:42 (ссылка)

(голосов:1)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 778
Регистрация: 12.11.2006

Репутация: 7
Всего: 22

Не понимаю, что удивляет ... Происходит всплавание события (bubbling) и каждый контейнер реагирует на него, но когда мы у каждого из контейнеров спрашиваем "А на кого мы кликнули?", они все показывают на источник "возмущения". Так что тут все нормально.

rabbitObject

Дата 15.7.2009, 12:11 (ссылка)

(голосов:1)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 34
Регистрация: 23.1.2007
Где: Беларусь

Репутация: 1
Всего: 1

есть такое понятие, event bubbling. Это когда ивент передается родителям исходного элемента. Поля target (для FF) и srcElement (для IE) содержат ссылки на элемент который породил событие.
У тебя в click-обработчиках и для d2 и d1 получается ссылка на один и тот же элемент: тот, который породил событие, т.е. - d3.
Для обращения к текущему элементу, который обрабатывает событие, должны использоваться другие поля:
currentTarget - для FF
для IE аналога этому полю нет, лучший выход здесь использовать this.

kolombo1

Дата 15.7.2009, 15:04 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 25
Регистрация: 15.7.2009

Репутация: нет
Всего: нет

Всем спасибо! Я понял.

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »