Прохождение событий в JavaScript | Приоритет событий

Под прохождением событий в JavaScript понимается порядок, в котором событие передается для обработки от одного одного элемента Web-страницы к другому.

Рассмотрим пример. При его запуске на экран выводится прямоугольник, заштрихованный голубым цветом, и изображение рыбок, причем последний элемент является дочерним по отношению к прямоугольнику.

Если щелкнуть мышкой по изображению рыбок, на экране с помощью функции JavaScript alert() сначала будет выведено сообщение "IMAGE", затем сообщение "OBJECT", после этого - "BODY". Это происходит так потому, что после обработки события дочерним элементом событие передается для обработки родительским элементам: сначала элементу с идентификатором obj (прямоугольнику), затем тэгу <BODY>.

Если нежелательно передавать событие родительскому элементу, можно это запретить, задав свойству event.cancelBubble значение true. В примере для этого необходимо убрать комментарии в строке.

// event.cancelBubble=true;

Просмотреть пример

<HTML>
<HEAD>
<TITLE>Прохождение событий на Web-странице </TITLE>
<STYLE>
#obj{background:#E0E0FF;position:absolute;left:10;top:10;width:110;height:110}
#imgs{position:absolute;left:20;top:20}
</STYLE>
<SCRIPT>
function clickBody(){alert("BODY");}
function clickObj(){alert("OBJECT");}
function clickIMG()
{
alert("IMAGE");
// event.cancelBubble=true;
}
</SCRIPT>
</HEAD>
<BODY onClick="clickBody()">
<DIV ID="obj" onClick="clickObj()">
<IMG SRC="fish.gif" ID="imgs" onClick="clickIMG()">
</DIV>
</BODY>
</HTML>

Дата добавления: 2010-10-27

Вы можете --> Заказать скрипт