Передача объекта event функции-обработчику
Как было сказано, событие передается вверх по иерархии от элемента-источника к родительскому элементу и дальше. Процесс может быть остановлен присвоением свойству cancelBubbleзначенияtrue.
<script type="text/javascript">
function checkCancel() {
if (window.event.shiftKey)
window.event.cancelBubble = true;
}
function showSrc() {
if (window.event.srcElement.tagName == "IMG")
alert(window.event.srcElement.src);
}
</script>
...
<body onclick="showSrc()">
<img onclick="checkCancel()" src="sample.gif">
</body>
...
В этом примере и элемент img, и его родительский элементbodyимеют обработчик событияonclick. При щелчке по изображению сначала вызывается функцияcheckCancel, которая проверяет состояние клавишиShift. Если клавиша нажата, передача вверх по иерархии прекращается, если нет, выполняется также функцияshowSrc. К сожалению, этот пример работает только в Internet Explorer (начиная с версии 4.0). Различия в объектной модели Internet Explorer и большинства других браузеров максимальны именно в объектеeventи доступе к нему. В случае Internet Explorer объектeventдоступен в функции-обработчике как глобальный объект, в других браузерах этот объект создается элементом-источником и доступен при вызове обработчика. Перепишем код следующим образом:
<script type="text/javascript">
function checkCancel(e) {
if (e.shiftKey)
e.cancelBubble = true;
}
function showSrc(e) {
if (e.srcElement.tagName == "IMG")
alert(e.srcElement.src);
}
</script>
...
<body onclick="showSrc(event)">
<img onclick="checkCancel(event)" src="sample.gif">
</body>
...
В этом варианте функция checkCancel работает как в Internet Explorer, так и в Mozilla Firefox, Apple Safari и Google Chrome, однако функция showSrc по-прежнему работает только в Internet Explorer. Дело в том, что элемент-источник события доступен в Internet Explorer как свойство событияsrcElement, а в других браузерах какtarget. Для учета различий можно применить один из нескольких методов:
Написать отдельные страницы для каждого браузера. Его мы обсуждать не будем.
Определить используемый браузер (при помощи объекта window.navigator).
function showSrc(e) {
// userAgent в Internet Explorer любой версии содержит
// подстроку 'MSIE', которой нет в других браузерах
var isIE = window.navigator.userAgent.indexOf('MSIE') > -1;
if (isIE) {
if (e.srcElement.tagName == "IMG")
alert(e.srcElement.src);
}
else {
if (e.target.tagName == "IMG")
alert(e.target.src);
}
}
Такой подход использовался и используется, однако он имеет существенный недостаток: мы не знаем, существует ли свойство targetу объектаeventв "другом" браузере.
Определить наличие интересующего свойства. Этот подход считается более плодотворным.
function showSrc(e) {
var elem = null;
if (e.srcElement)
elem = e.srcElement;
else if (e.target)
elem = e.target;
if (elem != null) {
if (elem.tagName == "IMG")
alert(elem.src);
}
else {
alert("Ваш браузер не поддерживает DOM модель");
}
}