Javascript.RU

Введение в события

Update: Более новый материал по этой теме находится по адресу https://learn.javascript.ru/introduction-browser-events.
В сотрудничестве с А. Параничевым.

Практически все JavaScript-приложения выполняют те или иные действия, откликаясь на различные события.

Событие - это сигнал от браузера о том, что что-то произошло.

Есть множество самых различных событий.

  • DOM-события, которые инициируются элементами DOM. Например, событие click происходит при клике на элементе, а событие mouseover - когда указатель мыши появляется над элементом,
  • События окна. Например событие resize - при изменении размера окна браузера,
  • Другие события, например load, readystatechange. Они используются, скажем, в технологии AJAX.

Именно DOM-события связывают действия, происходящие в документе, с кодом JavaScript, тем самым обеспечивая динамический веб-интерфейс.

Для того, чтобы скрипт реагировал на событие - нужно назначить хотя бы одну функцию-обработчик. Обычно обработчики называют "on+имя события", например: onclick.

Нужно сразу отметить, что JavaScript - однопоточный язык, поэтому обработчики всегда выпоняются последовательно и в общем потоке. Это значит, что при установке обработчиков двух событий, которые возникают на элементе одновременно, например mouseover (мышь появилась над элементом) и mousemove (мышь двигается над элементом), их обработчики будут выполнены последовательно.

Существует несколько способов назначать обработчик на конкретное событие элемента. Все они представлены ниже.

Обработчик события можно указать в виде inline-записи, прямо в атрибуте onсобытие.

Например, для обработки события click на кнопке input, можно назначить обработчик onclick вот так:

<input id="b1" value="Нажми Меня" onclick="alert('Спасибо!');" type="button"/>

Этот код в действии:

Можно назначить и функцию.

Например, пусть при клике на кнопку input запускается функция count_rabbits(). Для этого запишем вызов функции в атрибут onclick:

<html>

    <head>
        *!*
        <script type="text/javascript">
            function count_rabbits() {
                for(var i=1; i<=3; i++) {
                   // оператор + соединяет строки
                   alert("Из шляпы достали "+i+" кролика!")
                }
            }
         </script>
         */!*
    </head>

    <body>
         *!*<input type="button" onclick="count_rabbits()" value="Считать кролей!"/>*/!*
    </body>

</html>

Напомним, что имена атрибутов HTML-тегов нечувствительны к регистру, поэтому атрибут oNcLiCk сработает также, как onClick или onclick.

Но если вы хотите придерживаться хорошего стиля (или спецификации XHTML), то имена тегов и их атрибуты должны быть указаны в нижнем регистре.

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

У этого способа установки обработчика есть и минусы. Как только обработчик начинает занимать больше одной строки - читабельность резко падает.

Впрочем, сколько-нибудь сложные обработчики в HTML никто не пишет. Вместо этого лучше устанавливать обработчики из JavaScript способами, которые будут представлены ниже.

  • Просто для простых задач
  • Смесь javascript-кода и HTML-разметки
  • Сложные обработчики писать сложно или невозможно

Самый близкий родственник описанного выше способа - установка функции-обработчика через свойство onсобытие соответствующего элемента. Этот способ тоже будет работать в любом браузере с поддержкой JavaScript.

Для этого нужно:

  1. получить элемент
  2. назначить обработчик свойству on+имя

Вот пример установки обработчика события click на элемент с id="myElement":

document.getElementById('myElement').onclick = function() {
    alert('Спасибо')
}
<input id="myElement" type="button" value="Нажми меня"/>

Этот код в действии:

Стоит сразу обратить внимание на две детали:

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

    Кроме того, как и все свойства объектов JavaScript, имя свойства onсобытие чувствительно к регистру символов и должно быть в нижнем регистре.

  2. Обработчик - не текст, а именно функция javascript.

Когда браузер видит свойство on... в HTML-разметке - он создает функцию из содержимого кавычек.

В этом смысле эти два кода работают одинаково:

  1. Только HTML:
    <input type="button" onclick=" alert('Клик!') "/>
    
  2. HTML + JS:
    <input type="button" id="button"/>
    
    document.getElementById('button').onclick = function() {
         alert('Клик')
    }
    
Все вызовы типа getElementById должны запускаться после описания соответствующего HTML-узла, а лучше - после окончания загрузки страницы.

Иначе узел просто не будет найден.

Конечно, можно и не создавать анонимную функцию, а использовать любую уже готовую:

function doSomething() {
	alert('Спасибо')
}

document.getElementById('button').onclick = doSomething
Частая ошибка новичков

Обратите внимание - свойству присваивается именно сама функция-обработчик doSomething, а не doSomething():

document.getElementById('button').onclick = doSomething

doSomething() - это результат запуска функции, а так как вызова return в ее коде нет, то этот результат будет undefined.

Сравните это с атрибутом. Там - наоборот, скобки нужны:

<input type="button" id="mybutton" onclick="doSomething()"/>

Это различие легко объяснить. Дело в том, что при назначении onclick в HTML браузер автоматически создает функцию-обработчик из содержимого кавычек. Получается, что последний пример - это по сути то же самое, что:

document.getElementById('mybutton').onclick = function() {
     doSomething()  // внутри автосозданной функции
}

Описанная установка обработчика через свойство - очень популярный и простой способ.

У него есть один недостаток: на элемент можно повесить только один обработчик нужного события.

Например:

input.onclick = function() { alert(1) }
// ...
input.onclick = function() { alert(2) }  // заменит предыдущий
  1. Удобный и надежный способ, работает из javascript
  2. Только один обработчик на событие

Конечно, можно при назначении нового обработчика копировать предыдущий и запускать его самостоятельно. Но лучше использовать специальные методы назначения.

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

Классический пример - установка обработчика на событие "содержимое окна загрузилось":

// разные элементы интерфейса могут иметь интерес 
// в том, чтобы их вызвали при загрузке документа
window.onload = function() {
   alert('Документ загружен!')
}
Если заведомо нет локальной переменной onload, то можно и не упоминать про window. Пустячок, но код немного короче.

onload = function() { ... }

Существует два основных интерфейса для установки событий.

Методы, предложенные Microsoft, работают только в браузерах Internet Explorer и Opera(она поддерживает метод Microsoft для лучшей совместимости).

Установка обработчика:

element.attachEvent( "on"+имя события, обработчик)

Удаление обработчика:

element.detachEvent( "on"+имя события, обработчик)

Например:

var input = document.getElementById('b1')
var handler = function() {
    alert('Спасибо!')
}
input.attachEvent( "onclick" , handler) // поставить обработчик
// .... 
input.detachEvent( "onclick", handler) // убрать обработчик
Частая ошибка новичков

Обратите внимание - установка и удаление обработчика оперируют одной и той же функцией handler.

Так было бы неправильно:

input.attachEvent( "onclick" ,
   function() {alert('Спасибо')}
)
// .... 
input.detachEvent( "onclick", 
   function() {alert('Спасибо')}
)
// function(){} создает две разные функции

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

Как уже говорилось ранее, вы можете установить несколько обработчиков на одно событие одного элемента:

var myElement2 = document.getElementById("myElement2");
var handler = function() {
	alert('Спасибо!');
}

var handler2 = function() {
	alert('Еще раз спасибо!');
}

myElement2.attachEvent("onclick", handler);
myElement2.attachEvent("onclick", handler2);
<input id="myElement2" type="button" value="Нажми меня"/>

Этот код в действии (будет работать только в Internet Explorer/Opera):

Решение W3C работает во всех современных браузерах, кроме Internet Explorer.

Установка обработчика:

element.addEventListener( имя_события, обработчик, фаза)

Удаление обработчика:

element.removeEventListener( имя_события, обработчик, фаза)

Обратите внимание, что имя события указывается без префикса "on".

Еще одно отличие от решения Microsoft это третий параметр – фаза.
Если он установлен в true, то при срабатывании события во вложенном элементе, обработчик будет вызван на фазе "перехвата", а если значение будет false, то - на фазе "всплывания". Подробнее об этом будет написано далее, в разделе этой статьи "Порядок срабатывания событий".

При обычной установке обработчика третий параметр всегда должен быть false.

Использование - аналогично решению от Microsoft:

// ... объявить функцию-обработчик handler ...
input.addEventListener( "click" , handler, false) // поставить обработчик
// .... 
input.removeEventListener( "click", handler, false) // убрать обработчик

Как и в других случаях, вы должны передать имя обработчика не ставя круглых скобок, иначе функция будет выполнена сразу, а в качестве обработчика будет передан лишь её результат.

  1. Сколько угодно обработчиков
  2. Кросс-браузерные несовместимости

Далее мы вернемся к различным способам установки обработчиков и в подробностях рассмотрим, как сделать все кросс-браузерно.

Объект событие всегда передается обработчику и содержит массу полезной информации о том где и какое событие произошло.

Способов передачи этого объекта обработчику существует ровно два, и они зависят от способа его установки и от браузера.

В браузерах, работающих по рекомендациям W3C, объект события всегда передается в обработчик первым параметром.

Например:

function doSomething(event) {
	// event - будет содержать объект события
}

element.onclick = doSomething;

При вызове обработчика объект события event будет передан ему первым аргументом.

Можно назначить и вот так:

element.onclick = function(event) {
	// event - объект события
}

Интересный побочный эффект - в возможности использования переменной event при назначении обработчика в HTML:

<input type="button" onclick="alert(event)" value="Жми сюда не ошибешься"/>

Это работает благодаря тому, что браузер автоматически создает функцию-обработчик с данным телом, в которой первый аргумент event.

В Internet Explorer существует глобальный объект window.event, который хранит в себе информацию о последнем событии. А первого аргумента обработчика просто нет.

То есть, все должно работать так:

// обработчик без аргументов
function doSomething() {
	// window.event - объект события
}

element.onclick = doSomething;

Обратите внимание, что доступ к event при назначении обработчика в HTML (см. пример выше) по-прежнему будет работать. Такой вот надежный и простой кросс-браузерный доступ к объекту события.

Можно кросс-браузерно получить объект события, использовав такой приём:

function doSomething(event) {
    event = event || window.event

    // Теперь event - объект события во всех браузерах.
}

element.onclick = doSomething

Как мы уже говорили раньше, при описании обработчика события в HTML-разметке для получения события можно использовать переменную с названием event.

<input type="button" onclick="alert(event.type)" value="Нажми меня"/>

Этот код в действии:

Это совершенно кросс-браузерный способ, так как по стандарту event - название первого аргумента функции-обработчика, которую автоматом создаст браузер; ну а в IE значение event будет взято из глобального объекта window.

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

Например, для события по клику мыши (onclick), свойство event.target(в IE event.srcElement) содержит DOM-элемент, на котором этот клик произошел.

Более подробно это описано в следующей статье Свойства объекта событие.

Примечательно, что на одно событие может реагировать не только тот элемент, на котором произошло событие, но и элементы над ним.

Это очень удобно, например если в элементе содержатся много дочерних HTML-тегов - не обязательно ставить обработчик на каждый, достаточно указать один обработчик на родителе и в нем ловить все события.

Рассмотрим ситуацию, когда у вас есть три элемента "вложенных" друг в друга.

1

2

3
<div class="d1" >1<!-- самый верхний, в представлении DOM, элемент -->
    <div class="d2">2
        <div class="d3">3</div><!-- самый глубокий элемент -->
    </div>
</div>

Если на каждом из них будет свой обработчик события, например onclick, то обработчик для какого элемента будет вызван первым при клике, скажем, на d3?

Всего существует 2 модели поведения, они не имеют преимуществ между собой, но используют принципиально разные подходы. Стандарт W3C объединяет две модели в одну универсальную.

Bubbling events order
В этой модели сначала будет выполнен обработчик на элементе 3, затем на элементе 2, и последним будет выполнен обработчик на элементе 1.

Такой порядок называется "всплывающим", потому что событие поднимается с самых "глубоких" элементов в представлении DOM, к самым "верхним", как пузырек воздуха в воде.

Визуально это выглядит так (кликните на вложенном элементе, чтоб увидеть, какой будет порядок обработки события):

1

2

3
<div class="d1" onclick="alert(1)">
    <div class="d2" onclick="alert(2)">
        <div class="d3" onclick="alert(3)"></div>
    </div>
</div>

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

Если какой-то обработчик хочет остановить всплытие и не выпускать событие дальше вверх - это делает следующий код:

element.onclick = function(event) {
    event = event || window.event // кросс-браузерно
    
    if (event.stopPropagation) {
        // Вариант стандарта W3C:
        event.stopPropagation()
    } else {
        // Вариант Internet Explorer:
        event.cancelBubble = true
    }
}

Можно уложить блок if/else в одну строчку:

event.stopPropagation ? event.stopPropagation() : (event.cancelBubble=true)

Перехват - вторая, альтернативная всплытию модель порядка выполнения для события.

Capturing events order
В этой модели сначала будет выполнен обработчик на элементе 1, затем - на элементе 2 и последним будет выполнен обработчик на элементе 3. Она называется "перехват", потому что родительские элементы могут обработать событие раньше, чем непосредственная цель события, как бы "перехватывая" обработку.

Визуально это выглядит так (кликните на вложенном элементе, чтоб увидеть, какой будет порядок обработки события, не поддерживается в IE):

1

2

3
<div id="capt1" class="d1">
    <div id="capt2" class="d2">
        <div id="capt3" class="d3"></div>
    </div>
</div>

<script>
	document.getElementById("capt1").addEventListener("click", function() { alert(1) }, true);
	document.getElementById("capt2").addEventListener("click", function() { alert(2) }, true);
	document.getElementById("capt3").addEventListener("click", function() { alert(3) }, true);
</script>

Такой порядок был предложен Netscape и никогда не поддерживался в Internet Explorer, поэтому в IE вы не сможете увидеть этот пример в действии.

Остальные браузеры поддерживают одновременно такой порядок и порядок всплытия, но из-за проблем с Internet Explorer де-факто его почти никто не использует.

Решение от W3C объединяет обе модели: перехват и всплытие в одну универсальную.

W3C events order

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

Таким образом, разработчик сам решает, когда должен срабатывать обработчик события – при перехвате или при всплытии.

Визуально это выглядит так (кликните на вложенном элементе, чтоб увидеть, какой будет порядок обработки события, не для IE):

1

2

3
<div id="capt1" class="d1">
    <div id="capt2" class="d2">
        <div id="capt3" class="d3"></div>
    </div>
</div>

<script>
	document.getElementById("capt1").addEventListener("click", function() { alert(1) }, true);
	document.getElementById("capt2").addEventListener("click", function() { alert(2) }, true);
	document.getElementById("capt3").addEventListener("click", function() { alert(3) }, true);
	document.getElementById("capt1").addEventListener("click", function() { alert(1) }, false);
	document.getElementById("capt2").addEventListener("click", function() { alert(2) }, false);
	document.getElementById("capt3").addEventListener("click", function() { alert(3) }, false);
</script>

Если в качестве третьего параметра функции addEventListener передать значение true, то событие будет срабатывать на фазе захвата, если false – то после окончания захвата, на фазе всплытия.

При установке обработчиков классическими методами (через свойство элемента или атрибут html тега) события всегда будут срабатывать на фазе всплытия.

Дальше мы вообще не будем рассматривать фазу захвата, так как в реальной жизни используется только всплытие.

Браузер имеет своё собственное поведение по умолчанию для различных событий.

Например, клик по ссылке - сменить URL, клик правой кнопкой мыши - показать контекстное меню и т.п.

В ряде случаев реакцию браузера на событие можно убрать в обработчике.Для этого у IE и W3C есть, как и раньше, два по сути близких, но по виду разных способа:

element.onclick = function(event) {
    event = event || window.event 

    if (event.preventDefault) {
        // Вариант стандарта W3C: 
        event.preventDefault()
    } else {
        // Вариант Internet Explorer:
        event.returnValue = false
    }
}

Вместо if/else можно записать одну строчку:

..
event.preventDefault ? event.preventDefault() : (event.returnValue=false)
...

Некоторые поведения по умолчанию происходят до вызова обработчика события. В этом случае их, конечно же, отменить нельзя.

Например, при фокусировке на ссылке - браузер выделяет ее пунктирной рамочкой.
Это действие выполняется до события focus, поэтому отменить выделение в обработчике onfocus нельзя.

А переход по ссылке выполняется после события, поэтому его отменить можно.
Обработчики onfocus и onclick на этой ссылке отменяют поведение по умолчанию:

Кликни меня

При клике перехода не произойдет, а рамка вокруг ссылки появится.

Код примера:

var a = document.getElementById('my-focus-a')
a.onfocus = a.onclick = function(e) {
    e = e || window.event
    // другая кроссбраузерная запись остановки события
    e.preventDefault ? e.preventDefault() : (e.returnValue=false)
}

Возвращение return false из обработчика события предотвращает действие браузера по умолчанию, но не останавливает всплытие. В этом смысле следующие два кода эквивалентны:

function handler(event) {
  ...
  return false
}
function handler(event) {
  ...
  if (event.preventDefault) {
    event.preventDefault() 
  } else {
    event.returnValue = false
  }
}

Заметим, что хотя даже если всплытие и действия по умолчанию остановлены, но другие обработчики на текущем элементе все равно сработают.

elem = document.getElementById('TestStop')

function handler(e) {
  e.preventDefault() // браузер - стоять
  e.stopPropagation() // событие - не всплывать
  return false // и вообще, мне больше ничего не надо
}

elem.addEventListener('click', handler, false)

// следующий обработчик все равно сработает
elem.addEventListener('click', function() { alert('А я сработало..') }, false);

Проверить:

Действительно, браузер даже не гарантирует порядок, в котором сработают обработчики на одном элементе. Назначить можно в одном порядке, а сработают в другом.

Поэтому тем более один обработчик никак не может влиять на другие того же типа на том же элементе.

Вы узнали...

  • Что такое события и как они работают.
  • Как назначать обработчики - от HTML до специальных методов.
  • Зачем нужен объект события и как его получить.
  • Как событие плывет в DOM-документе. Где можно поймать и как остановить.
  • Что такое и как предотвратить действие браузера по умолчанию.
  • Как с этим соотносится return false.

В следующих статьях мы разберем, какие свойства есть у объекта события, как их кроссбраузерно обрабатывать и назначать обработчики.


Автор: Гость (не зарегистрирован), дата: 17 сентября, 2008 - 15:17
#permalink

Спасибо за статью.
Эта часть наверное самая важная для понимания javascript


Автор: Atlan†is, дата: 17 сентября, 2008 - 16:22
#permalink

Полностью согласен, давно ждал подобной статьи. Огромное спасибо.


Автор: Zheka (не зарегистрирован), дата: 25 сентября, 2008 - 12:46
#permalink

Статья супер, адрес в избранное


Автор: Гость (не зарегистрирован), дата: 30 сентября, 2011 - 19:28
#permalink

А вы знаете что когда вы нажимаете посмотреть! на одном из скриптов происходит xss атака??у меня просто защита стоит(noscript) всем посоветую


Автор: Гость (не зарегистрирован), дата: 30 сентября, 2011 - 19:28
#permalink

А вы знаете что когда вы нажимаете посмотреть! на одном из скриптов происходит xss атака??у меня просто защита стоит(noscript) всем посоветую


Автор: Алексей К (не зарегистрирован), дата: 26 сентября, 2008 - 10:51
#permalink

А если в FireFox тег div не реагирует на onkeyup (press и т.п.), можно ли ему прописать обработчик на событие onkeyup?

div.addEventListener('keyup', function(){alert('Ура, я реагирую на нажатие клавиш!')}, false);


Автор: vashurin, дата: 29 сентября, 2008 - 10:08
#permalink

Вот еще один метод установки нескольких обработчиков событий, о котором не было сказано в статье:

function clicker(obj){
	var old_func, my_obj = document.getElementById(obj);
	my_obj.onclick = function(){
		alert('1');
	}
	old_func = my_obj.onclick;
	my_obj.onclick = function(){
		old_func();
		alert('2');
	}
}

И вызов данного метода:

<h1 id="h1">Click</h1>
<script>
clicker('h1');
</script>

Автор: Илья Кантор, дата: 29 сентября, 2008 - 11:30
#permalink

А каким образом в данном подходе можно удалить один из вложенных обработчиков?


Автор: vashurin, дата: 29 сентября, 2008 - 12:26
#permalink

Например так:

<script>
function clicker(obj){
	var old_func, my_obj = document.getElementById(obj);
	my_obj.onclick = function(){
		alert('1');
	}
	old_func = my_obj.onclick;
	my_obj.onclick = function(){
		if(old_func != null) old_func();
		alert('2');
		old_func = null;
	}
}
</script>
<h1 id="h1">Click</h1>
<script>
clicker('h1');
</script>

т.е. alert('1'); произойдет лишь один раз, в момент первого клика, после оно никогда не повториться (сколько не кликай). Но при ситуации нескольких обработчиков на одно событие данный код начнёт разрастаться как снежный ком... И код может стать не универсальным... Sad
Хотя, может кто из читателей сайта то придумает более симпатичное решение по удалению обработчика?


Автор: Илья Кантор, дата: 13 октября, 2008 - 18:18
#permalink

Непонятно как реализовать функционал detachEvent в таком подходе...


Автор: vashurin, дата: 16 октября, 2008 - 12:27
#permalink

Ну если честно, то по-моему мнению, в хорошем коде вообще в событии стоит лишь вызов функции, реагирующих на событие и ни какой логики по обработке события! :-)

А показанный выше мной пример, скорее для того, что б все знали, что и такое тоже работает.

Непонятно как реализовать функционал detachEvent в таком подходе...

Сам думал долго над этим, но кроме варианта показанного чуть выше ничего не нашел.

--
С уважением, Владимир Вашурин


Автор: Гость (не зарегистрирован), дата: 4 октября, 2008 - 15:51
#permalink

Отличная статья! Спасибо.


Автор: Гость (не зарегистрирован), дата: 23 октября, 2008 - 09:43
#permalink

Есть еще нюанс, связанный со стилями для элементов. Если есть абсолютное позиционирование.
Например:

<div id="wndMain">
	<div id="barTitle">&nbsp;</div>
	<div id="barInfo">&nbsp;</div>
	<div id="barStatus">&nbsp;</div>
</div>
#wndMain				{ position: relative; z-index: 9000; width: 402px; }
#barTitle				{ position: relative; width: 400px; height: 20px; border: 1px solid #000; line-height: 16px; font-size: 12px; }
#barInfo				{ position: relative; width: 400px; height: 400px; border: 1px solid #000; }
#barStatus				{ position: relative; width: 400px; height: 20px; border: 1px solid #000; color: #000; line-height: 16px; font-size: 12px; }
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;
        }
}

var hiClick = function ( evt ) { window.alert( "hi" ) }

var div = document.getElementById( "barTitle" );
addEvent( div, "mousedown", hiClick, false );

Если в стилях поменять position: relative на position: absolute для элемента (чем выше по дереву DOM, тем хуже), то в IE(6/7) событие даже не будет генерироваться.
Например поменяем для wndMain, то события вообще не будут генериться для его внутренних элементов и его самого(хоть какой кнопкой кликать).


Автор: Илья Кантор, дата: 25 октября, 2008 - 22:07
#permalink

Выложили бы что ли где-нибудь этот код. Я пока не понимаю, что такого IE делает не так.

У меня лично абсолютно позиционированные элементы обрабатывались всегда без проблем. Может, чего-то не заметил?


Автор: da_ff, дата: 21 июля, 2009 - 15:22
#permalink

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

P.S. Знаю что некропост, просто такие комменты могу ввести в заблуждение тех кто этот инструмент (javascript) осваивает.


Автор: Вася (не зарегистрирован), дата: 26 октября, 2008 - 05:31
#permalink

Спасибо! Это лучший сайт по ява-скрипту! )))


Автор: EugenyK, дата: 28 октября, 2008 - 16:46
#permalink

Если необходимо прикрепить обработчик для события, передав ему параметры, специфичные для данного объекта, то как это сделать?

Например, при таком назначении в момент прикрепления сразу произойдёт вызов alert('test')

function al(q){
	alert(q);
}
obj.addEventListener('click',al('test'),false)

Если же вместо al('test') использовать function(){ al('test') }, то позже, как я понимаю, будет сложность снять этот обработчик?


Автор: DeX, дата: 31 октября, 2008 - 12:33
#permalink

Отличная статья!!! Доходчиво изложено и с примерами
Хотелось бы видеть развитие темы, углубление. В связи с этим появился вопрос. В статье было сказано что...

При установке обработчиков методами attachEvent/detachEvent this внутри обработчика всегда указывает на объект window и совершенно бесполезен.

Поэтому при использовании этих методов в библиотеках и фреймворках добавляется дополнительная "обертка для обработчика", устанавливающая правильный this.

Приведите, пожалуйста, пример реализации "обертки" или посоветуйте где об этом можно почитать?


Автор: Александр Астрахань, дата: 16 ноября, 2008 - 04:19
#permalink

Спасибо за статью, за существование этого сайта.


Автор: Гость (не зарегистрирован), дата: 17 ноября, 2008 - 23:24
#permalink

// Обработчик для mouseout
function mouseoutHandler(event) {
event = event || window.event
var relTarg = event.relatedTarget || event.fromElement;
// relTarg - элемент, на который перешел курсор мыши
}

тут наверно вместо fromElement надо toElement;


Автор: Гость (не зарегистрирован), дата: 30 ноября, 2008 - 19:05
#permalink

Спасибо полезная информация особенно про захват


Автор: wind (не зарегистрирован), дата: 9 марта, 2009 - 15:25
#permalink

Методы
myElement.attachEvent("on" + событие, обработчик) и
myElement.detachEvent("on" + событие, обработчик)
поддерживает не только IE, но и Opera


Автор: and0605 (не зарегистрирован), дата: 25 апреля, 2009 - 15:25
#permalink

Универсальный кроссбраузерный способ обработки событий:

/*el - элемент, на который вешаем событие,
evnt - тип события,
func - обработчик*/

function addEvent(el, evnt, func){ 
   if (el.addEventListener) {                   
        el.addEventListener(evnt.substr(2).toLowerCase(), func, false);
   } else if (el.attachEvent) {
      el.attachEvent(evnt.toLowerCase(), func);
   } else {
      el[evnt] = func;
   }
}

//массив типов событий
var events = new Array("onMouseOver", "onMouseout", "onclick");

//вешаем обработчики на все события на объект targt
function attachEvents(targt) {    
    for (evnt in events) {        
        addEvent(document.getElementById(targt), events[evnt], CatchEvent);
    }
}

function CatchEvent(event) {
    var event = event || window.event;    
    var target = event.target || event.srcElement;   
    var classNm = target.className;
    var tag = target.tagName;
           
	switch (event.type) {
		case "mouseover":              
			break;
            
		case "mouseout":
			break;
                        
		case "click":                      
			break;   			
	}        
}

Автор: and0605 (не зарегистрирован), дата: 25 апреля, 2009 - 16:59
#permalink

P. S.

В функции

attachEvents(targt)

targt - объект, поэтому запускать скрипт лучше вот так:

function main() {
	attachEvents(document.getElementById("имя идентификатора"));
}

а функцию attachEvents записать вот так:

function attachEvents(targt) {    
    for (evnt in events) {        
        addEvent(targt, events[evnt], CatchEvent);
    }
}

Да, ну и вызвать функцию main() в документе:

<body onload = "main()">

Автор: Гость (не зарегистрирован), дата: 30 апреля, 2009 - 18:26
#permalink

Объясните пожалуйста,
если у DOM элемента несколько свойств,
на которые повешены обработчики событий мыши,
то в какой последовательности они будут срабатывать?

Например при наведении на него и щелчке мыши:

  • onmouseover
  • onmousedown
  • onfocus
  • onclick

так верно?

и еще, чем отличается
onmouseover="return fun1(arg1,arg2)"
от
onmouseover="fun1(arg1,arg2)"

и куда собственно эти функции возвращают значение(если возвращают)?


Автор: Alazaur, дата: 17 мая, 2009 - 03:17
#permalink

Вот не пойму никак, а чего событие onclick() можно только Id присваивать, всему классу одно событие нельзя?
Например:
Вот так работает:

<a href="#" id="bbs"></a>
document.getElementById('bbs').onclick = function() {
alert('Ок');
}

А вот так нет:

<a href="#" class="bbs">клик</a>
document.getElementsByClassName('bbs').onclick = function() {
alert('Ок');
}

Почему?


Автор: Илья Кантор, дата: 17 мая, 2009 - 09:12
#permalink

Потому что событие вешается на элемент, а функция getElementsByClassName, которая, кстати, не кроссбраузерная, возвращает *список* элементов.

Событие можно повесить на каждый.

Кстати, селекторы библиотеки jQuery предоставляют возможность вешать обработчики на список.


Автор: Alazaur, дата: 17 мая, 2009 - 13:18
#permalink

Илья Кантор спасибо
Просто я уже третий день бьюсь вот над такой задачей:

<a href='#' class="bbs">Клик 1</a>
<a href='#' class="bbs">Клик 2</a>
<a href='#' class="bbs">Клик...</a>
<a href='#' class="bbs">Клик 99</a>

И нужно присвоить одно событие onclick для всех ссылок. Не подскажете как это можно организовать?


Автор: Alazaur, дата: 17 мая, 2009 - 13:40
#permalink

Все решил задачу Спасибо за наводку, сам бы не догадался


Автор: Гость (не зарегистрирован), дата: 19 июня, 2009 - 14:21
#permalink

никогда не задумывался и писал всегда "ev = ev || window.event".

но ведь "ev" не передается только если обработчик задан так

nd.onclick = function(ev) {
  // ev - undefuned , не передается

  ev = ev || window.event;
  //...
  });

а если так то

nd.attachEvent('onclick', function(ev) {
  // ev - Event , передается

  //...
  });

те если нигде не ошибся то "ev = ev || window.event" совсем и не нужно когда речь идет о EventListener


Автор: da_ff, дата: 21 июля, 2009 - 14:54
#permalink

В Internet Explorer существует глобальный объект window.event, который хранит в себе информацию о последнем событии. А первого аргумента обработчика просто нет.

это не так. еще ие6 вполне корректно выполнял строчку

var f=function(e){alert(e.type+"\n")};
window.attachEvent ? document.getElementById("div").attachEvent("onclick",f) : alert("не ie");

Автор: Михаил (Москва) (не зарегистрирован), дата: 22 июля, 2009 - 22:33
#permalink

Ещё один способ напоследок:

function preview(e) {
    if (!e) e = window.event;
    var element = e.target || e.srcElement;

    if (element.id.match(/^idElement$/)) {
        window.alert('Вы кликнули на элементе с ID = "idElement"');
        // Выполняем необходимые действия для элемента с ID равным "idElement"
    }

    // Ну и так далее...
}

document.onclick = preview;

Автор: Aleks_mdma (не зарегистрирован), дата: 24 августа, 2009 - 22:20
#permalink

Доброго всем дня!!!
Объясните пожалуйста для "чайников" как правильно кроссбраузерно остановить всплытие?... на своих примерах получается только для IE сделать или только для FF...


Автор: aldan8, дата: 30 августа, 2009 - 00:20
#permalink

у меня почему то

addEventListener

не работает нигде кроме Opera , не подскажете почему ? вот так у меня это реализовано :

в html документе

...<input type="button" value="add event listener" id="wc" /> ...

в javascript документе

var el = document.getElementById('wc')
var func = function() {
	alert(' rabotaet ')
}
el.addEventListener("click", func, false)

да, кстати , когда javascript код переношу в html файл в конец

<script type="text/javascript">
var el = document.getElementById('wc')
var func = function() {
	alert(' rabotaet ')
}
el.addEventListener("click", func, false)
</script>

, то во всех браузерах(ff , opera , chrome, safari) работает нормально


Автор: GABRIEL_, дата: 10 сентября, 2009 - 16:13
#permalink

Все дело в разнице генерации страницы браузерами. В этой статье специально было выделено в рамочку:
"Все вызовы типа getElementById должны запускаться после описания соответствующего HTML-узла, а лучше - после окончания загрузки страницы.
Иначе узел просто не будет найден."

Судя по описанной вами проблеме, строчка:

var el = document.getElementById('wc')

Выполняется до того как сгенерится сам элемент. И следовательно выполнится:

var el = document.getElementById('wc');
alert(el); // Вот тут будет undefined

И корректно (вернее не корректно, а так чтобы работало) обработает только Опера. В остальных браузерах скрипт упадет в ошибку. А вот если перенести скрипт в конец, то все будет работать.


Автор: valek1989, дата: 3 ноября, 2009 - 19:32
#permalink

Здравствуйте, подскажите пожалуйста как организовать таку вещь:
мне нужно что бы при окне браузера развернутом не в максимайзе(т.е. не на весь экран) и при этом стрница находится в граничном положении(самый низ/верх/право/лево) при расширении окна вручную(когда наводишь на грань браузера и начинаешь ее увеличивать как хочешь) в сторону от границы наружу, сторона приклеевалась к стороне браузера, помогите плз...


Автор: Гость (не зарегистрирован), дата: 4 ноября, 2009 - 09:54
#permalink

В каких случаях alert() может выскакивать дважды?
Удивляет цепочка: post - alert ('ушло') - OK - alert ('ушло') -OK
Странно, что не 3 раза выскакивает - было бы ещё веселее ...


Автор: subzey (не зарегистрирован), дата: 5 ноября, 2009 - 20:23
#permalink

На самом деле, capturing в IE использовать можно. Ограничений масса: метод расчитан только на события мыши, перехват теряется при потере окном фокуса, геморройная работа с preventDefault и масса других факторов.
Но если в целом, это вкупе с альтернативными макрософтовыми событиями (напр. activate и deactivate — такие же focus и blur, только бабблятся) может помочь сделать более-менее вменяемую эмуляцию capturing.

Иллюстрация метода setCapture:

<BODY>
<BUTTON onclick="console.value += ('button call\r\n')">Click me!</BUTTON>
<a href="#">Click me too!</a>
<input >
<BUTTON onclick="document.body.setCapture(true);">Enable capturing</BUTTON>
<hr />
<textarea style="width: 100%; height: 400px" id="console"></textarea>
<SCRIPT>
function hurrah(e) {
	console.value += 'dispatcher call: ' + e.srcElement.tagName + '\r\n';
	return true;
}

function enableCapturing(){
	document.body.setCapture(false);
	console.value += 'enable capturing \r\n';
}

function captlost(){
	console.value += 'capturing lost\r\n';
}

document.body.attachEvent('onclick', hurrah);

document.body.attachEvent('onlosecapture', captlost);

enableCapturing();

</SCRIPT>
</BODY>

Не пугайтесь: в IE6 этот код может вызвать блокировку окна.

Под диспетчером (dispatcher) подразумевается некий корневой элемент, собирающий события, и потом обрабатывающий их с учетом (e.srcElement||e.target), т.е., непосредственно практическое применение capturing.


Автор: Гость (не зарегистрирован), дата: 9 ноября, 2009 - 21:38
#permalink

Автор:
"Все вызовы типа getElementById должны запускаться после описания соответствующего HTML-узла, а лучше - после окончания загрузки страницы.
Иначе узел просто не будет найден. " Тогда почему в
document.getElementById('myElement').onclick = function() {
alert('Спасибо')
}

вызов идет до создания кнопки?


Автор: Berserker, дата: 8 января, 2010 - 00:20
#permalink

Статья отличная.


Автор: Harru62 (не зарегистрирован), дата: 11 января, 2010 - 14:52
#permalink

Нашел статью по запросу getElementById. Сам щас пишу скрипт, и не могу прикрутить событие к iframe по onKeyUp.
Хорошая статья, но у меня в браузере не работают Ваши примеры с getElementById, даже с textarea, даже большая половина с вашего сайта не работает - странно...
У меня 7 ИЕ. Ни че не понимаю.


Автор: Илья Кантор, дата: 21 января, 2010 - 01:51
#permalink

Не могли бы подробнее?


Автор: Леонид Розенблюм, дата: 16 января, 2010 - 19:20
#permalink

В примере

"Кликни меня
При клике перехода не произойдет, а рамка вокруг ссылки появится."

var a = document.getElementById('my-focus-a')
a.onfocus = a.onclick = function() {
// другая кроссбраузерная запись остановки события
e.preventDefault ? e.preventDefault() : (e.returnValue=false)

В IE8 сыпется иксепшн а в хроме нет рамки


Автор: Илья Кантор, дата: 21 января, 2010 - 01:51
#permalink

Сейчас все ок ?


Автор: Леонид Розенблюм, дата: 3 мая, 2010 - 18:54
#permalink

Почти В IE8 нет иксепшна - это хорошо.
Но теперь в IE8 клик на ссылке перекидывает на самый верх страницы. А в Chrome рамка так и не появилась.


Автор: ADev (не зарегистрирован), дата: 1 июля, 2010 - 06:25
#permalink

Chrome не выделяет таким образом активные ссылки по стандарту.
Но можно сделать, добавив в css:

a:active { outline: 1px dotted #000; }

Аналогичным же способом данную пунктирную рамку можно убрать из firefox.
(P.S. Извиняюсь что не по коду, IE для меня пока не доступен.)


Автор: ADev (не зарегистрирован), дата: 2 июля, 2010 - 01:10
#permalink

А в ie "перебрасывает" на верх страницы, наверное из-за #

<a href="#" id="my-focus-a">Link</a>

Автор: Nazim, дата: 20 января, 2010 - 22:35
#permalink

Че то вообще ничего не понятно.... Когда начнется объяснение нормальное.. Может кто нить подкинет что нибудь по проще..Для новичка?7


Автор: Илья Кантор, дата: 21 января, 2010 - 01:52
#permalink

С какого момента непонятно? Что непонятно?


Автор: metae, дата: 21 января, 2010 - 19:42
#permalink

Если честно только сейчас понял разницу между свойством и атрибутом ...)


Автор: ROG, дата: 5 февраля, 2010 - 17:37
#permalink

А можно вопрос, использую

window.onmousemove=MouseMoveEv;

в FF срабатывает нормально, а в IE событие не присваивается


Автор: ROG, дата: 5 февраля, 2010 - 17:42
#permalink

все разобрался для IE написал

document.attachEvent( "onmousemove" , MouseMoveEv)

Хороший сайт, но к сожалению ссылку на вас разместить негде. Но советовать буду обязательно.


Автор: JC (не зарегистрирован), дата: 6 февраля, 2010 - 16:59
#permalink

Сколько не вчитывался в статью и приведенные в кометариях примеры, так и не смог понять как сделать в приведенном ниже примере так. Что бы событие срабатывало только для первого элемента, но не страбатывало для вложеных в него.

<style type="text/css">
.d1
{
	width:400px;
	height:400px;
	background:#0F0;
}

.d2
{
	width:300px;
	height:300px;
	background:#FF0000;
}

.d3
{
	width:200px;
	height:200px;
	background:#0000FF;
}
</style>

<div class="d1" id="d1" onmouseover="alert('test')">  
	<div class="d2" id="d2">  
		<div class="d3" id="d3"></div>  
	</div>  
</div>

Понятно что div c id="d2" наследует событие от div c id="d1", и div c id="d3" наследует событие от div c id="d2"

Но из статьи я так и не понял как ОСТАНОВИТЬ срабатывание события на "дочерних" к первому элементах, или если сказать по другому... как запретить наследование события "дочерними" элементами.

Очень надеюсь на помощь знающих людей.


Автор: Гость (не зарегистрирован), дата: 14 апреля, 2010 - 02:30
#permalink

Вписать обработчик того же события для всех потомков первого уровня, в котором добавить event.stopPropagation()(для Лисы)


Автор: JC (не зарегистрирован), дата: 6 февраля, 2010 - 20:51
#permalink

Небольшое уточнение к моему предыдущему посту, цель не просто остановить обработку событий, это можно было бы просто организовать через:

document.getElementById('d2').onmouseover = function(e)
{
	if (!e) e = event || window.event; // кросс-браузерно
	{
		e.cancelBubble = true;
		if (e.preventDefault) e.preventDefault();
	}
}

А сделать страбатывание Алерта в любом случае, даже когда onmouseover происходит над областями даже перекрытое Div с id="d2" и id="d3"

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


Автор: Гость (не зарегистрирован), дата: 14 апреля, 2010 - 13:30
#permalink

Простите, не заметил, что вы уточнили свой вопрос, и он изменился по сути. Впрочем, все же рассмотрим еще раз способ решения того вопроса, так как предложенный выше был неудачен. Соответственно, это относится и к этому вашему посту. В случае, если бы у корневого дива имелся не 1 потомок 1-го уровня, а несколько, то пришлось бы для каждого из них прописывать такой обработчик, который вы и предложили. В этом случае лучше всего проверять target(srcElement) в обработчике корневого дива. И если className(ну или id, если по нему проверять) не совпадает с таковым у корневого дива - то ничего не делать.

Теперь перейдем собственно к вашему вопросу. Для удобства понимания сути проблемы лучше переформулировать задачу так: mouseover не должен вызываться в случае, если переход мыши осуществляется между потомками одного корневого элемента(или между потомками и самим корневым элементом). Теперь способ решения становится очевиден. В обработчике корневого элемента производится проверка target и relatedTarget(toElement и fromElement). Если оба объекта имеют общим предком корневой элемент, то обработчик ничего не делает.


Автор: JC (не зарегистрирован), дата: 6 февраля, 2010 - 21:17
#permalink

О... нашел как проще обьяснить что мне нужно...
Нужен кросбраузерное решение - аналог функции onmouseenter


Автор: YUlyusya (не зарегистрирован), дата: 21 февраля, 2010 - 21:00
#permalink

отличная статья, но меня интересует вопрос: можно ли из javascript управлять перемещением курсоры мышки?


Автор: Мараторий, дата: 21 февраля, 2010 - 23:41
#permalink

нет


Автор: A1eX (не зарегистрирован), дата: 2 марта, 2010 - 22:23
#permalink

Помогите пожалуйста
есть такая функция(код из вашей статьи)

function position(){

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop

var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft

var message = document.getElementById("my-message")
message.style.top = scrollTop + 'px' 
message.style.left = scrollLeft + 200 + 'px' 
}

эта функция присваивается событию onScroll,в идеале нужно чтобы при прокручивании скрола,блок "my-message" оставался на месте,но при этом он перескакивает-как это можно исправить?


Автор: Гость (не зарегистрирован), дата: 14 апреля, 2010 - 13:35
#permalink

Для этого существует css правило position:fixed. А ИЕ6 бодро идет лесом


Автор: Гость (не зарегистрирован), дата: 15 апреля, 2010 - 13:59
#permalink

Ах, я вас так понимаю...


Автор: Trikadin (не зарегистрирован), дата: 7 апреля, 2010 - 22:48
#permalink

М... Есть возможность поверять, находится ли курсор мыши над объектом? Предположим, функция запускается, когда над объектом курсор мышки, в ней есть задержка, и некоторая другая функция запускается после этой задержки, но в случае, если курсор мыши остался над объектом. Как проверить?


Автор: Гость (не зарегистрирован), дата: 14 апреля, 2010 - 13:41
#permalink

Устанавливать флажок в событии mouseover. Снимать флажок в событии mouseout. В "некоторой другой" функции проверять значение флажка.


Автор: trikadin (не зарегистрирован), дата: 15 апреля, 2010 - 13:58
#permalink

Гость, спасибо! Да, старею я, похоже...


Автор: trikadin (не зарегистрирован), дата: 21 апреля, 2010 - 13:51
#permalink

Народ, как повесить событие на все строки ввода разом??

window.onload=function(){
	var elems = document.getElementsByTagName('input');
	for(var i=0; i<elems.length; i++){
		if( (elems[i].type == "text" || elems[i].type=="password") & !elems[i].readOnly){
			if(isMSIE()) {elems[i].attachEvent("onfocus", function(){clearDefault(elems[i])})
            }
            else {elems[i].addEventListener("focus", function(){clearDefault(elems[i])}, false)
            }
		};
	}
}

Что в этой шняге неправильно?

P.S. isMSIE() - функция, определяющая, уж не эксплорер ли это часом...


Автор: stah22, дата: 31 мая, 2010 - 08:58
#permalink
<button id="but" onclick="hidelem()">

Йаа кнопкоо! :)))
<br />
Не активный кнопкоо! :)))

</button>
function hidelem() {
    document.getElementById('but').disabled = "disabled"
}

Вообще понять не могу... Sad У меня в браузере кнопка не получила никакого события... Страница загрузилась и сразу "Не активный кнопкоо! ))"... Почему так? При том такая ситуация только в FF 3.5... Opera, Chrome, Safari выполняют скрипт именно так, как я ожидаю. В IE не пробовал.


Автор: stah22, дата: 31 мая, 2010 - 09:55
#permalink

Это проблема FF, как оказалось Разобрался

После данной статьи, я возненавидел окончательно и основательно, бесповоротно и навсегда IE!!!


Автор: Гость (не зарегистрирован), дата: 16 июня, 2011 - 16:35
#permalink

В IE6 "йа кнопкоо" работает нормально.


Автор: Гость (не зарегистрирован), дата: 25 июня, 2010 - 23:57
#permalink

Добрый вечер!Не могу понять, почему не работает обычный пример как в статье(в JS совсем еще зеленый), то есть при клике на #pip эффекта никакого

function p(event){alert('добрый вечер')}
h = document.getElementById('pip')
h.addEventListener("onclick", p, false) 
document.getElementById('mum').onclick=function(event){
 event.stopPropagation()
}

и соответственно html

<ul id="pip">
 <li id="mum"><a href="#">JavaScript</a></li>
</ul>

Причем Лис FireBug'ом ошибок не выдает


Автор: oleg.tsupka, дата: 26 июня, 2010 - 00:55
#permalink

Привет
Не работает потому что
1. addEventListener в качестве первого параметра принимает имя события без префикса on h.addEventListener("click", p, false);
2. li с обработчиком event.stopPropagation() перекрывает распространиение события к предку, попробуйте раскрасить список и все станет очевидно. Красная область кликабельная, так как клик происходит непосредственно на элементе ul, а вот синяя перекрытая stopPropagation и алерта нету.

<ul id="pip" style="background: red;">
 <li id="mum" style="background: blue;"><a href="#">JavaScript</a></li>
</ul>
function p(event){alert('hi')}
    h = document.getElementById('pip')
    h.addEventListener("click", p, false)
    document.getElementById('mum').onclick=function(event){
         event.stopPropagation()
    }

Автор: Гость (не зарегистрирован), дата: 26 июня, 2010 - 09:49
#permalink

Привет!Елки!насчет stopPropagation так задумано и было, опробовать хотел, останавливает он событие только для себя, или также и всплытие дальше по дереву DOM, а вот с "click" вместо "onclick" - спасибо, невнимательность, сейчас в статье повнимательнее глянул, так и есть.В общем благодарю!


Автор: Виталя (не зарегистрирован), дата: 1 июля, 2010 - 18:27
#permalink

Мне надо заблокировать все события на странице, в особенности onmousedown, onkeydown (onclick, ondblclick тоже). Чтобы и мышка, и клавиатура страницей на какое-то время не обрабатывалась. Как это сделать?

Такая штука не срабатывает (explorer игнорирую):

var condition = true;

function prevent(e) {
 if (condition) {  // заблокировать действия пользователя пока идет какой-либо процесс
  if (e.stopPropagation) e.stopPropagation();
  if (e.preventDefault) e.preventDefault();
  return false;
 }  
}

document.onmousedown = function (event) { prevent(event); }
document.onkeydown = function (event) { prevent(event); }
document.onclick = function (event) { prevent(event); }
document.ondblclick = function (event) { prevent(event); }

Автор: alex33, дата: 3 ноября, 2013 - 11:36
#permalink

Виталя,

Мне надо заблокировать все события на странице, в особенности onmousedown, onkeydown (onclick, ondblclick тоже). Чтобы и мышка, и клавиатура страницей на какое-то время не обрабатывалась. Как это сделать?

Вариант 1. Вернуть false при возникновении события.
Пример:

window.onload = function() { /* функцию можешь поставить свою, */
var dElem = window; /* и объект тоже. */
dElem.onclick = function() { return false; }
dElem.ondblclick = function() { return false; }
dElem.onmousedown = function() { return false; }
dElem.onmouseup = function() { return false; }
dElem.oncontextmenu = function() { return false; }
dElem.onkeydown = function() { return false; }
dElem.onkeyup = function() { return false; }
window.setHotKeys(false);
}

но в таком случае вложенные элементы со своими событиями будут отрабатывать (из-за перехвата).
Вариант 2. Заблокировать клики мыши лежащим слоем overlay по верх всех элементов.
Пример:

<div class="overlay"> </div>
<style>
.overlay {
position: fixed; /***** IE 6 position: fixed   not supported. *****/
top: 0px;
left: 0px;
z-index: 1000;
width: 100%;
height: 100%;
/* background-color:#DDDDDD; */
opacity: 0.6;
-moz-opacity: 0.6;
-khtml-opacity: 0.6;
}
</style>

и 2 варианта вместе тоже можно применять.


Автор: Yamazl, дата: 9 июля, 2010 - 15:50
#permalink

У меня такой вопрос: допустим написал свою очень нужную функцию (myfunction), приаттачил к HTML такой файлик:

function myfunction()
{
//....
}
document.onload = function() {
    if (...) myfunction()
}

Далее написал еще одну функцию и приаттачил еще один подобный файлик. Ясно что я переопределил событие onload для document и работать будет только вторая функция. Ну а что же делать когда я прикручу jQuery? Получается будет работать только что-то одно. Не хочется в конец HTML перед тегом < /body> вставлять < script> if (...) ...; if (...) ...;< /script> Как обойти не навредив другим скриптам и чтоб все в onload влезло? Писать перед < body> : этот злосчастный < script> c "ифами"? — выход, но я не знаю что случится если я прикручу стороннюю библиотеку которая может переназначить событие onload! Или в этих умных библиотеках как то все по другому и они onload не трогают?


Автор: Yamazl, дата: 9 июля, 2010 - 16:41
#permalink

Спасибо автору сайта ответ нашел http://javascript.ru/tutorial/events/crossbrowser


Автор: B@rmaley.e><e, дата: 10 июля, 2010 - 18:52
#permalink

addEventListener


Автор: starro_serge, дата: 24 августа, 2010 - 02:34
#permalink

Вопрос может быть и глупый, но...
На радиокнопку навешена функция

$('#radios-0').click(function()
  {
alert(this.id+' '+this.checked)
  });

Выдаёт TRUE независимо от состояния кнопки до клика.
Собственно вопрос - как тогда узнать состояние кнопки?


Автор: PaulG (не зарегистрирован), дата: 24 августа, 2010 - 14:06
#permalink

а если так?
if($(this).is(":checked"))


Автор: starro_serge, дата: 24 августа, 2010 - 19:48
#permalink

Parse error: syntax error, unexpected ':'


Автор: starro_serge, дата: 24 августа, 2010 - 19:57
#permalink

Виноват, насчёт ошибки - сгрешил.
Но результат тот же.
Можно, конечно, пробежаться по значениям всех других кнопок.
Их состояние даётся реальное.
И методом исключения, так сказать, установить состояние кликнутой кнопки до клика.
Но как-то это коряво.


Автор: starro_serge, дата: 24 августа, 2010 - 21:42
#permalink

Сам себе говорю - глупость сморозил.
В функцию по клику передаются уже изменённые значения радиокнопок.
Поэтому всегда TRUE.
Никакого другого выхода кроме как запоминать кликнутую кнопку в переменной не проглядывается.
Тогда в функции можно определить повторное нажатие той же кнопки


Автор: vahrusha, дата: 6 ноября, 2010 - 13:38
#permalink

Не очень понял смысл return false в этом примере (да и вообще отличия в работе, когда для остановки действия по умолчанию используется возврат, от метода preventDefault и свойства returnValue):

function handler(e) {
  e.preventDefault() // браузер - стоять
  e.stopPropagation() // событие - не всплывать
  return false // и вообще, мне больше ничего не надо
}

preventDefault останавливает действие браузера по умолчанию, зачем еще false возвращать?


Автор: B@rmaley.e><e, дата: 7 ноября, 2010 - 21:58
#permalink

На всякий случай.


Автор: dviktor, дата: 19 ноября, 2010 - 14:05
#permalink

Проясните пожалуйста один момент:

Зачем нужно event = event || window.event

если во всех браузерах, реализующих w3c, event и без того будет доступен в теле обработчика как первый параметр, а в IE - как глобальный объект?

То есть в каком таком случае код не заработает без этой строки???


Автор: Aetae, дата: 19 ноября, 2010 - 20:29
#permalink

В ослике не заработает.

function a(*!*event*/!*){
event = event || window.event
}

Как видите event уже резервируется как локальная переменая перекрывая глобальную, а потому ту приходится получать через window.


Автор: big_mac (не зарегистрирован), дата: 20 января, 2011 - 17:24
#permalink

Подскажите плиз, как реализовать следующую задачу:

На сайте есть окно для ввода текста с применением тега input и ниже текстовая гиперссылка. необходимо чтобы она отправляла на две разные страницы: в первом случае - при вводе в окно определенного слова или значения - на одну страницу, во втором случае - при вводе любых других слов или значений - на другую страницу.

Очень нужно, помогите пожалуйста с кодом! Зараннее благодарен!


Автор: Aetae, дата: 21 января, 2011 - 03:16
#permalink
<input type="text" id="text">
<a href="#nojs" onclick="location.href=~document.getElementById('text').value.indexOf('СЛОВО')?'http://ssilka1.ru/':'http://ssilka2.ru/';return false">Перейти.</a>

А вообще для вопросов есть форум, в комментариях следует задавать вопросы по статье.


Автор: Электра, дата: 28 февраля, 2011 - 17:39
#permalink

Привет,
пытаюсь повторить ваш пример и не получается Sad. Событие не назначается. Т.е. я нажимаю на кнопку, а сообщение с текстом "test" не появляется.

<head>
</head>
<body>
<script>

var y = document.getElementById("t");
y.onclick= function tt() { alert("test") }

</script>
<input type ="button" id="t" value = "ok" />

</body>

Автор: Гость (не зарегистрирован), дата: 24 марта, 2011 - 12:56
#permalink

Необходимо поменять местами код кнопки и код скрипта. Код кнопки должен быть выше.


Автор: Гость (не зарегистрирован), дата: 26 марта, 2011 - 18:47
#permalink
x=0;
function a() {
if (x==0) {
alert(x)
};
alert('2');
x++
}
document.getElementById('button').onclick=a

Здесь сначала один раз сработает alert(x), а потом всё время alert('2')

x=0;
function a() {
if (x==0) {
alert(x)
};
x++
}
document.getElementById('button').onclick=a

а здесь кнопка сработает всего лиш один раз


Автор: designer (не зарегистрирован), дата: 17 апреля, 2011 - 23:34
#permalink

Здравствуйте!
Сразу скажу, что я не кодер (или не скриптер, как это у вас правильно сказать не знаю, не программист в общем), я дизайнер.
Но не думайте, я именно по теме пишу! Вопрос касается объект события - window.event.
Мне в работе моей частенько помогает одна страничка, уж не помню где добытая. Она подбирает более менее приемлемую цветовую гамму на основе одного цвета. Но есть одна загвоздка: на отрез отказывается работать в FF и замечательно пашет в IE. Из-за моей ненависти к ослику (как это у меня так сдержанно получилось!? %) без мата даже) я решился-таки на изучение js (ну, изучение - это сильно сказано).
Цель простая: понять, где мелкософтовская собака зарыта в том коде, и исправить этот код. Причём замечу, мне хочется исправить не на кроссбраузерность, а именно так, чтоб в FF всё работало а в ie - кукиш!
Кстати, тег мета сообщает, что штуковина сгенерирована фронтпэйдем, может это важная информация для вас.
Для себя я уже выделил в одтельные файлы таблицу css (отредактировав её не мало) и скрипт js (который изначально был одной строчкой, мной же отстркуктурирован в более читабельный вид переводами строк)
Здесь попытаюсь представить код, изначальный, но скрипт для вас же вставлю отструктурированный.


Автор: designer (не зарегистрирован), дата: 17 апреля, 2011 - 23:53
#permalink

Не удаётся всё сразу, попытаюсь отдельно.

.s {
		border-right : 1px inset;
		border-top : 1px inset;
		border-left : 1px inset;
		width : 50px;
		border-bottom : 1px inset;
	}
	.s2 {
		border-right : 1px outset;
		border-top : 1px outset;
		left : 1px;
		border-left : 1px outset;
		width : 19px;
		border-bottom : 1px outset;
		position : absolute;
		top : 1px;
		height : 19px;
		background-color : #e6e6e6;
	}
	.t {
		font : 11px tahoma;
		color : #555555;
	}
	.t2 {
		font : bold 36px verdana;
	}

Автор: designer (не зарегистрирован), дата: 17 апреля, 2011 - 23:59
#permalink
var mover=moveg=moveb=moveh=0;
var hs=new Object();
var rg=new Object();
rg.r=rg.g=rg.b=0;
function click(x,s){
	if(x<10){x=10};
	if(x>265){x=265}x-=10;
	eval("h"+s+".style").left=x+1;
	eval("rg."+s+"="+x);
	rg2hs(rg);
	ud("0",rg);
	sw.style.backgroundColor="rgb("+rg.r+","+rg.g+","+rg.b+")";
	dom();
}
function bclick(s){
*!*
	x=window.event.offsetX+eval("h"+s+".style.pixelLeft-1");
*/!*
	click(x,s);
*!*
}
*/!*
function sc(s){
	x=window.event.offsetX;
	click(x,s);
}
function movee(s){
	eval("move"+s+"=0")
}
function rc(x,m){
	if(x>m){
		return m
	}
		if(x<0){
			return 0
		}
			else{
				return x
			}
}
function rg2hs(rg){
	m=rg.r;
	if(rg.g<m){m=rg.g};
	if(rg.b<m){m=rg.b};
	v=rg.r;
	if(rg.g>v){v=rg.g};
	if(rg.b>v){v=rg.b};
	value=100*v/255;
	delta=v-m;
	if(v==0.0){hs.s=0}
		else{hs.s=100*delta/v};
	if(hs.s==0){hs.h=0}
		else{
			if(rg.r==v){hs.h=60.0*(rg.g-rg.b)/delta}
				else if(rg.g==v){hs.h=120.0+60.0*(rg.b-rg.r)/delta}
					else if(rg.b=v){hs.h=240.0+60.0*(rg.r-rg.g)/delta}	
						if(hs.h<0.0){hs.h=hs.h+360.0}
		}
		hs.v=Math.round(value);
		hs.h=Math.round(hs.h);
		hs.s=Math.round(hs.s);
		return(true);
}
function rg2html(z){
	return "#"+d2h(z.r)+d2h(z.g)+d2h(z.b);
}
function d2h(d){
	hch="0123456789abcdef";
	a=d%16;
	b=(d-a)/16;
	return hch.charAt(b)+hch.charAt(a);
}
function c2r(d){
	k=window.event.srcElement.style.backgroundColor;
	j=(k.substr(4,k.indexOf(")")-4)).split(",");
	click(parseInt(j[0])+10,"r");
	click(parseInt(j[1])+10,"g");
	click(parseInt(j[2])+10,"b");
}
function h2r(hs){
	var rg=new Object();
	if(hs.s==0){
		rg.r=rg.g=rg.b=Math.round(hs.v*2.55);
		return rg;
	}
	hs.s=hs.s/100;
	hs.v=hs.v/100;
	hs.h/=60;
	i=Math.floor(hs.h);
	f=hs.h-i;
	p=hs.v*(1-hs.s);
	q=hs.v*(1-hs.s*f);
	t=hs.v*(1-hs.s*(1-f));
	switch(i){
		case 0:rg.r=hs.v;
		rg.g=t;rg.b=p;
		break;
		case 1:rg.r=q;
		rg.g=hs.v;
		rg.b=p;
		break;
		case 2:rg.r=p;
		rg.g=hs.v;
		rg.b=t;
		break;
		case 3:rg.r=p;
		rg.g=q;
		rg.b=hs.v;
		break;
		case 4:rg.r=t;
		rg.g=p;
		rg.b=hs.v;
		break;
		default:rg.r=hs.v;
		rg.g=p;
		rg.b=q;
	}
	rg.r=Math.round(rg.r*255);
	rg.g=Math.round(rg.g*255);
	rg.b=Math.round(rg.b*255);
	return rg;
}
function ps(x){
	document.write('<td><div style="width: 70pt; height: 70pt; background-color: rgb(0,0,0); cursor: hand;" class="s" id="sw'+x+'" onClick="c2r()" title="Кликните, чтобы сделать цвет главным в гамме."></div></td>');
}
function ph(x){
	document.write('<td><div class=t id="hc'+x+'">#000000</div></td>');
}
function ud(x,c){
	eval("sw"+x).style.backgroundColor="rgb("+c.r+","+c.g+","+c.b+")";
	eval("hc"+x).innerHTML=rg2html(c)
}
function pl(t,c,l){
		document.write('<div style="position: absolute; left: 30pt; top: '+t+'pt; background-color: black;"><div class="s" style="width: 276pt; height: 21pt; background-color:'+c+'; filter: alpha(style=1,startx=360,finishx=0);" onMouseDown="move'+l+'=1; sc(\''+l+'\');" onMouseMove="if(move'+l+'==1){sc(\''+l+'\');}"></div><div class="s2" id="h'+l+'" onMouseDown="move'+l+'=1; bclick(\''+l+'\');" onMouseUp="movee(\''+l+'\');" onMouseMove="if(move'+l+'==1){bclick(\''+l+'\');}"></div></div>')
	}
function dom(){
	z=new Object();
	y=new Object();
	yx=new Object();
	y.s=hs.s;
	y.h=hs.h;
	if(hs.v>70){
		y.v=hs.v-30
	}
		else{
			y.v=hs.v+30
		};
		z=h2r(y);
		ud("1",z);
		if((hs.h>=0)&&(hs.h<30)){
			yx.h=y.h=hs.h+20;
			yx.s=y.s=hs.s;
			y.v=hs.v;
			if(hs.v>70){
				yx.v=hs.v-30
			}
			else{yx.v=hs.v+30}
		}
				if((hs.h>=30)&&(hs.h<60)){
					yx.h=y.h=hs.h+150;
					y.s=rc(hs.s-30,100);
					y.v=rc(hs.v-20,100);
					yx.s=rc(hs.s-70,100);
					yx.v=rc(hs.v+20,100);
				}
					if((hs.h>=60)&&(hs.h<180)){
						yx.h=y.h=hs.h-40;
						y.s=yx.s=hs.s;
						y.v=hs.v;
						if(hs.v>70){
							yx.v=hs.v-30
						}
							else{
								yx.v=hs.v+30
							}
					}
	if((hs.h>=180)&&(hs.h<220)){
		yx.h=hs.h-170;
		y.h=hs.h-160;
		yx.s=y.s=hs.s;
		y.v=hs.v;
		if(hs.v>70){
			yx.v=hs.v-30
		}
			else{
				yx.v=hs.v+30
			}
	}
		if((hs.h>=220)&&(hs.h<300)){
			yx.h=y.h=hs.h;
			yx.s=y.s=rc(hs.s-60,100);
			y.v=hs.v;
			if(hs.v>70){
				yx.v=hs.v-30
			}
				else{
					yx.v=hs.v+30
				}
		}
			if(hs.h>=300){
				if(hs.s>50){
					y.s=yx.s=hs.s-40
				}
					else{
						y.s=yx.s=hs.s+40
					}
					yx.h=y.h=(hs.h+20)%360;
					y.v=hs.v;
					if(hs.v>70){
						yx.v=hs.v-30
					}
						else{
							yx.v=hs.v+30
						}
			}
				z=h2r(y);
				ud("2",z);
				z=h2r(yx);
				ud("3",z);
				y.h=0;
				y.s=0;
				y.v=100-hs.v;
				z=h2r(y);
				ud("4",z);
				y.h=0;
				y.s=0;
				y.v=hs.v;
				z=h2r(y);
				ud("5",z);
}

Автор: Гость (не зарегистрирован), дата: 16 августа, 2011 - 00:42
#permalink

не запускается, как его запустить


Автор: designer (не зарегистрирован), дата: 18 апреля, 2011 - 00:24
#permalink

C html вообще ничего не удалось вставить но внутри тела его есть вставки скрипров:

pl(170,"red","r");
pl(200,"green","g");
pl(230,"blue","b")
ps(0);
ps(1);
ps(2);
ps(3);
ps(4);
ps(5);
ph(0);
ph(1);
ph(2);
ph(3);
ph(4);
ph(5);

Я выделил в предыдущем посте строки, на которые ругается FireBug - мол window.event is not defined
Я пробовал и с этой страницы кроссбраузерную примочку применить, пробовал даже прикрутить event.js с вашего же сайта.
Я сдаюсь, не понимаю как это вылечить.
А программка эта очень нужна (часто в момент общения с заказчиком нужно пожонглировать цветовыми гаммами).

Помогите переделать этот скрипт в скрипт для FireFox (желательно, чтоб ie при этом отвалилось!)
Было бы вообще супер, если бы я ещё и понял, как лечение прошло! Потому что, меня js заинтересовал в процессе чтения этого самоучителя.
Кстати, огроное спасибо Илье, автору самоучителя!
И конечно же тем спасибо, кто в проблеме моей мне поможет)


Автор: melky, дата: 30 апреля, 2011 - 17:59
#permalink

только в IE ивентом является window.event
в нормальных браузерах ивент передается в функцию

function bclick(s){
x=*!*s*/!*.offsetX+eval("h"+s+".style.pixelLeft-1");
	click(x,s);
}

Автор: Гость (не зарегистрирован), дата: 26 августа, 2011 - 14:00
#permalink

привет, нужна помощь...
в функции сделал вот такой цикл

for (var i = 0; i < document.links.length; i++) {
         document.links[i].onclick = function() { alert(i) };
      }

по идее после выполнения цикла при щелчке на любой ссылке должен всплывать ее номер, а у меня всегда выводится последний номер ссылки...

В чем проблема?? Зарание спасибо....


Автор: B@rmaley.e><e, дата: 26 августа, 2011 - 20:08
#permalink

Классический пример на замыкания.


Автор: Гость (не зарегистрирован), дата: 26 августа, 2011 - 20:18
#permalink

прочитал про замыкания, разобрался....


Автор: Dimitryi83 (не зарегистрирован), дата: 27 августа, 2011 - 16:43
#permalink

Подскажите пож. Хотел посмотреть, как можно менять надпись на кнопке, оперативно. Не стал заморачиваться, немного изменил код кролей. Где ошибка? Я хотел что бы после нажатия, надпись на самой кнопки поменялась, а не выскакивал в отельном окне. Спасибо.

function count_rabbits() {
onclick="this.style.value = "спасибо"
}


Автор: B@rmaley.e><e, дата: 28 августа, 2011 - 09:51
#permalink

Ошибка во второй строчке. Огромная такая ошибка. "Полнейшее незнание и непонимание JS" называется. Исправляется так.


Автор: Dimitryi83 (не зарегистрирован), дата: 2 сентября, 2011 - 13:24
#permalink

Да, действительно. Такая строка была допустима в ActionSсript , так как там изначально скрипт можно расположить в теле объекта и его ID использовано по умолчанию, без дополнительно указания.

Буду искать книги по JS, на сайте материал хороший, но структура и объяснения хромают. Нужны базовые навыки JS для понимания.


Автор: Wayne, дата: 5 сентября, 2011 - 02:02
#permalink

пустой комментарий.


Автор: LMnet, дата: 25 октября, 2011 - 14:14
#permalink

удалить


Автор: Andrew - гость (не зарегистрирован), дата: 3 декабря, 2011 - 07:57
#permalink

Очень хочется понять как реализовать самому событие mouseenter из jQuery. Я так понимаю, что весь фокус в игре со всплытием и перехватом событий, только вот ничего не приводит в нужному результату.
У кого нибудь есть идеи, или все пользуются jQuery mouseenter и даже не задумываются как это работает?


Автор: Guest (не зарегистрирован), дата: 16 декабря, 2011 - 18:44
#permalink

Привет!
А подскажите пожалуйста, как с помощью указанных примеров добавлять данные в функцию, и можно ли вообще.

Скрипт для примера:

function ComMenuIn(e, menuid, menutext){
var e = e || window.event;
document.getElementById(menuid).style.display = 'block';
document.getElementById(menuid).style.top = e.clientY+'px';
document.getElementById(menuid).style.left = e.clientX+'px';
document.getElementById(menuid).innerHTML = menutext;
<img id="im1" src="" onmousemove ="ComMenuIn('', 'ComMenu', 'текст');">
<div id="ComMenu"></div>

В Хроме ИЕ - работает в ФФ - нет,
а -

document.getElementById('im1').onmuseover = ComMenuIn('', 'ComMenu', 'текст');

сообщает e=null во всех браузерах?
заранее спасибо )


Автор: Гость (не зарегистрирован), дата: 20 февраля, 2012 - 12:49
#permalink

Добрый день!

Задачка такая:
Есть ряд кнопок

<input type="submit" ...>

в форме

<form action="processor_php"...>

Мне нужно прикрутить к ним обработчик onclick "processor_javascript".
При этом если в браузере включено исполнение javascript, то мне не нужно обращаться к "processor_php", а все обрабатывать в "processor_javascript".

Вроде все просто...

for(i = 0; i < form.childNodes.length; i++) {
  if(form.childNodes[i].toLowerCase() == 'input') {
    form.childNodes[i].onclick = function(){код processor_javascript; return false};
  }
}

Запускаю (в FF), кликаю, а меня все равно отправляет в "processor_php".

При этом если тупо писать в тег

<input onclick="processor_javascript(); return false;"...>

, то все работает как задумано - при включенном js - работает processor_javascript, при выключенном - processor_php.

Долго экспериментировал, нашел такую конструкцию (думаю что она кривая)

<input onclick="return function() {return false;};"...>

Можно ли как-то решить мою задачу способом form.childNodes[i].onclick = function(){}?

Спасибо.


Автор: Гость (не зарегистрирован), дата: 18 августа, 2012 - 14:56
#permalink

Подскажите пожалуйста, а можно ли с помощью события onclick в теге <а> достать значение атрибута title и поместить его в переменную


Автор: frant32, дата: 23 августа, 2012 - 22:40
#permalink


Методы, предложенные Microsoft, работают только в браузерах Internet Explorer и Opera(она поддерживает метод Microsoft для лучшей совместимости).

Установка обработчика:

element.attachEvent( "on"+имя события, обработчик)

Удаление обработчика:

element.detachEvent( "on"+имя события, обработчик)

а вот здесь я наблюдаю что этим методо пользуется только IE , Opera также использует метод addEventListener как и Firefox , так что получается Opera в первую очередь использует этот метод.

<div id='id1' style='background:#ccc'> sfcsdf</div>

<script type="text/javascript">
func = function(){alert('result');}
window.onload = function(){
  var el = document.getElementById('id1');
  
  if(el.attachEvent){
    el.attachEvent('onclick',func);
	alert('browser ie or opera');
  }else if(el.addEventListener){
    el.addEventListener('click',func,false);
	alert('all browsers  without IE');
  }
}

</script>

Автор: Lux0r (не зарегистрирован), дата: 1 ноября, 2012 - 16:32
#permalink

Здравствуйте, у меня вопрос. Если присвоить событию анонимную функцию, как передаваемые параметры function(arg1,arg2...) будут интерпретироваться в событии

document.getElementById('button').onclick = function() {
alert('Клик')
равнозначно строке ниже.
Только HTML:


Автор: Lux0r (не зарегистрирован), дата: 1 ноября, 2012 - 16:33
#permalink
<input type="button" onclick=" alert('Клик!') "/>

Автор: Guest (не зарегистрирован), дата: 20 апреля, 2013 - 03:01
#permalink

Спасибо за статью. Хотелось бы уточнить некоторые моменты.

В этом смысле следующие два кода эквивалентны:
function handler(event) {
...
return false
}
function handler(event) {
...
if (event.preventDefault) {
event.preventDefault()
} else {
event.returnValue = false
}
}

Для основных обработчиков событий (не назначенных с помощью addEventListener) эти два кода полностью эквивалентны? Или есть разница?
И какие ещё стандартные объекты, кроме event, доступны в атрибутах?

И чтобы не появлялись контуры вокруг объектов, нужно определять css свойства:

* { outline: none !important }
*::-moz-focus-inner { border: none !important }

Автор: Dmitriy K. (не зарегистрирован), дата: 1 августа, 2013 - 16:06
#permalink

>Способов передачи этого объекта обработчику существует ровно два, и они зависят от способа его установки и от браузера.

Почему в браузере firefox 22.0 ни один из них не работает? Существует какой-то еще способ для fiirefox'a или firefox не умеет работать с событиями?


Автор: гость (не зарегистрирован), дата: 16 августа, 2013 - 01:17
#permalink

"Заметим, что хотя даже если всплытие и действия по умолчанию остановлены, но другие обработчики на текущем элементе все равно сработают"

- как сделать чтобы другие обработчики на текущем элементе останавливали срабатывание первого обработчика ???


Автор: Гость (не зарегистрирован), дата: 24 декабря, 2013 - 23:55
#permalink

Объясните кто знает плиз
есть html

<a ><img/></a>

делаю

a.addEventListener(event, callback, true); // и false  пробовал в третьем параметре

в результате в callback в event.target - img
почему?


Автор: Merkury, дата: 5 марта, 2014 - 21:38
#permalink

Потому что клик происходит по изображению, то есть, если просто, то таргет - это объект вызвавший событие, а до элемента "а" просто "доходит" событие по всплытию или перехвату.
В колбеке "а" - это this.
О порядке срабатывания события


Автор: Асылбек (не зарегистрирован), дата: 19 апреля, 2014 - 21:13
#permalink

Не могу понять, почему кросс платформенная запись event = event || window.event вдруг превратилась в e = e || window.event. e - это эквивалент event?


Автор: OlegSmirnov, дата: 9 мая, 2014 - 17:00
#permalink

В статье говорится:

Решение W3C работает во всех современных браузерах, кроме Internet Explorer.

Наверно, стоит добавить, что в последних версиях IE (по крайней мере, в IE 11 - точно) работает решение W3C, а вот прежнее решение MS (attachEvent) - больше не работает.

И "перехват событий" (capturing) - в IE 11 работает, а в статье говорится, что нет.


Автор: Гость (не зарегистрирован), дата: 17 июля, 2014 - 18:01
#permalink

дата первого камента: 17 сентября, 2008 - 15:17
стало быть статья из тех времен, если не редактируется постоянно.
за 6 лет много чего поменялось.


Автор: abrakabara, дата: 1 октября, 2015 - 17:07
#permalink

Пробую следующий код:
HTML-HEAD-SCRIPT
function showevent(a) {
alert(a);
alert("event" in window);
alert("tag: " + event.srcElement.tagName);
}
/SCRIPT-/HEAD-BODY-TABLE-TBODY-TR
TD onmousedown="showevent('first-param')">Событие mousedown
/TR-/TBODY-/TABLE-/BODY-/HTML
Работает одинаково в:
IE6
Opera 32.0
Google Chrome 45.0.2454.101 m
и говорит, что "event" in window == true.
Вопрос: если первым параметром передается объект event, то почему "a" не является объектом event?


Автор: Гость (не зарегистрирован), дата: 25 января, 2016 - 04:53
#permalink

Может кто-нибудь объяснить эту конструкцию?

function setupHandlers(root){
setAttributes(root, {
В особенности это ->
"onmouseup" : "handleMouseUp(evt)",
"onmousedown" : "handleMouseDown(evt)",
"onmousemove" : "handleMouseMove(evt)",
});
}

function setAttributes(element, attributes){
// doSomething
}


Отправить комментарий

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
5 + 7 =
Введите результат. Например, для 1+3, введите 4.
 
Текущий раздел
Поиск по сайту
Реклама
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Последние комментарии
Последние темы на форуме
Forum