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 - 14:17
#permalink

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


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

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


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

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


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

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


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

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


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

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

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


Автор: vashurin, дата: 29 сентября, 2008 - 09: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 - 10:30
#permalink

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


Автор: vashurin, дата: 29 сентября, 2008 - 11: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 - 17:18
#permalink

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


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

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

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

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

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

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


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

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


Автор: Hank (не зарегистрирован), дата: 16 июня, 2020 - 21:52
#permalink

yes, I agree. Thanks. fencing contractors redding ca


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

Автор: Гость (не зарегистрирован), дата: 23 октября, 2008 - 08: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 - 21:07
#permalink

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

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


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

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

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


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

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


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

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

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

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

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


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

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

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

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

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


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

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


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

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

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


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

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


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

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


Автор: and0605 (не зарегистрирован), дата: 25 апреля, 2009 - 14: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 - 15: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 - 17:26
#permalink

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

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

  • onmouseover
  • onmousedown
  • onfocus
  • onclick

так верно?

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

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


Автор: Alazaur, дата: 17 мая, 2009 - 02: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 - 08:12
#permalink

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

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

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


Автор: Alazaur, дата: 17 мая, 2009 - 12: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 - 12:40
#permalink

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


Автор: Гость (не зарегистрирован), дата: 19 июня, 2009 - 13: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 - 13: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 - 21: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 - 21:20
#permalink

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


Автор: aldan8, дата: 29 августа, 2009 - 23: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 - 15:13
#permalink

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

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

var el = document.getElementById('wc')

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

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

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


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

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


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

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


Автор: subzey (не зарегистрирован), дата: 5 ноября, 2009 - 19: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 - 20:38
#permalink

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

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


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

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


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

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


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

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


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

В примере

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

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

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


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

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


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

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


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

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

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

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


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

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

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

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

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


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

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


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

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


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

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

window.onmousemove=MouseMoveEv;

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


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

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

document.attachEvent( "onmousemove" , MouseMoveEv)

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


Автор: JC (не зарегистрирован), дата: 6 февраля, 2010 - 15: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 - 01:30
#permalink

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


Автор: JC (не зарегистрирован), дата: 6 февраля, 2010 - 19: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 - 12:30
#permalink

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

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


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

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


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

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


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

нет


Автор: A1eX (не зарегистрирован), дата: 2 марта, 2010 - 21: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 - 12:35
#permalink

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


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

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


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

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


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

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


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

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


Автор: trikadin (не зарегистрирован), дата: 21 апреля, 2010 - 12: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 - 07: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 - 08:55
#permalink

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

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


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

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


Автор: Гость (не зарегистрирован), дата: 25 июня, 2010 - 22: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, дата: 25 июня, 2010 - 23: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 - 08:49
#permalink

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


Автор: Виталя (не зарегистрирован), дата: 1 июля, 2010 - 17: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 - 10: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 - 14: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 - 15:41
#permalink

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


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

addEventListener


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

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

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

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


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

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


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

Parse error: syntax error, unexpected ':'


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

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


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

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


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

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

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

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


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

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


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

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

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

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

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


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

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

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

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


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

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

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

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


Автор: Aetae, дата: 21 января, 2011 - 02: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 - 16: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 - 11:56
#permalink

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


Автор: Гость (не зарегистрирован), дата: 26 марта, 2011 - 17: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 - 22:34
#permalink

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


Автор: designer (не зарегистрирован), дата: 17 апреля, 2011 - 22: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 - 22: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);
}

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

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


Автор: designer (не зарегистрирован), дата: 17 апреля, 2011 - 23: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 - 16:59
#permalink

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

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

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

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

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

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

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


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

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


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

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


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

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

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


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

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


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

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

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


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

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


Автор: Guest (не зарегистрирован), дата: 16 декабря, 2011 - 17: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 - 11: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 - 13:56
#permalink

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


Автор: frant32, дата: 23 августа, 2012 - 21: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 - 15:32
#permalink

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

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


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

Автор: Guest (не зарегистрирован), дата: 20 апреля, 2013 - 02: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 - 15:06
#permalink

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

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


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

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

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


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

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

<a ><img/></a>

делаю

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

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


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

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


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

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


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

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

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

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

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


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

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


Автор: abrakabara, дата: 1 октября, 2015 - 16: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 - 03:53
#permalink

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

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

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


Автор: Гость (не зарегистрирован), дата: 15 мая, 2018 - 11:43
#permalink

Здравствуйте. Скажите пожалуйста, почему в опере не работает , если нажатие на него осуществляется посредством . В хроме и мозиле все работает. Попытка увязать события клика по метке с кликом по кнопке безрезультатны. Я абсолютно узколобый в отношении JS (Паскалем всю жизнь занимался), пытаюсь разобраться и освоить. Буду весьма благодарен за консультацию. Интересуют лишь азы JS, без JQuery и прочих надстроек. Ваш сайт на редкость понятен и информативен, в отличие от остального мусора в Сети. С уважением, Amon.


Автор: Разработчик (не зарегистрирован), дата: 12 июня, 2018 - 21:16
#permalink

Незаменимая помощь в разработке любых программ и сайтов. То, что нужно!


Автор: emilypurlell (не зарегистрирован), дата: 15 февраля, 2022 - 05:38
#permalink

I adore this article for its well-researched content and great wording 1v1 battle


Автор: keer (не зарегистрирован), дата: 30 марта, 2022 - 03:12
#permalink

have a peek at these guys


Автор: Гость (не зарегистрирован), дата: 16 апреля, 2022 - 03:04
#permalink

Автор: Гость (не зарегистрирован), дата: 16 апреля, 2022 - 12:01
#permalink

Автор: Mariah Carey (не зарегистрирован), дата: 31 мая, 2022 - 12:21
#permalink

Wordle is a word game that combines the power of words with game-like fun. The goal of the game is to arrange as many words as possible into a grid and try to create a beautiful piece of artwork. This one-of-a-kind experience will challenge your mind while providing hours of entertainment.


Автор: Гость (не зарегистрирован), дата: 11 июля, 2022 - 09:57
#permalink

Мероприятия - один из важнейших компонентов любого веб-сайта. Они могут варьироваться от торжественного posterdle открытия компании до flagle запуска продукта или даже праздника для сотрудников.


Автор: mytom2, дата: 12 июля, 2022 - 17:52
#permalink

five nights at freddy's is a horror game series created by Scott Cawthon. The games are set in a pizza restaurant called Freddy Fazbear's Pizza, which is home to five animatronic animals - Freddy, Bonnie, Chica, Foxy and Golden Freddy.
The player controls the protagonist who must defend themselves from the animatronics and survive until 6 AM when they are rescued by the security guard.
The first game was released on August 8th, 2014 for Microsoft Windows and macOS platforms. A mobile version of Five Nights at Freddy's was released on November 17th, 2016 and a console version of the game was released on September 23rd, 2017 for Xbox One and PlayStation 4 consoles.
Five Nights at Freddy's has been critically acclaimed with some
You should also take part in wordle unlimited, the best crossword puzzle game out there!


Автор: alexusa, дата: 1 августа, 2022 - 04:55
#permalink

wow, great post. it gave me a lot of useful information. sedecordle I look forward to your next posts.


Автор: sofia167 (не зарегистрирован), дата: 2 августа, 2022 - 11:47
#permalink

Thank you for providing such useful information. I've been having trouble coming up with many questions about this topic. I'll stick with you! play build now gg free


Автор: gamerun (не зарегистрирован), дата: 4 августа, 2022 - 06:43
#permalink

I had a lot of harvest after seeing this post of yours! Before, I used to play games, this is a fun game for entertainment, but now I will follow you, read your articles will have more knowledge. run 3


Автор: aurorausa0106 (не зарегистрирован), дата: 15 августа, 2022 - 10:30
#permalink

The information you shared is very accurate, heardle anime drift boss it gives me the knowledge that I need to learn. Thank you for sharing this useful information.


Автор: Dimitri Macedon (не зарегистрирован), дата: 17 августа, 2022 - 21:12
#permalink

Я попробую реализовать это на сайте run games, и, возможно, это сработает. Я долго искал это решение, спасибо за разъяснение.


Автор: Car accident lawyer in NY (не зарегистрирован), дата: 26 августа, 2022 - 04:23
#permalink

If you live in NY you might want to watch of a potential accident. In the case of one, don't wait and contact today a car accident lawyer in NY


Автор: Marjorie Ball (не зарегистрирован), дата: 5 сентября, 2022 - 10:34
#permalink

Will discover several games from the most well-known developers. geometry dash


Автор: Гость (не зарегистрирован), дата: 10 октября, 2022 - 10:52
#permalink

An excellent way to show off the capabilities of a sports car's brakes is to drive up to their maximum while applying them, throwing the car into a controlled skid. drift boss


Автор: Betty Cooper (не зарегистрирован), дата: 26 октября, 2022 - 11:24
#permalink

The most alluring pastime possible is playing exciting io games with buddies. Take advantage of the opportunity to connect friendship and love while playing IO games.


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

It is very useful for me. I am so glad I found this article. I also always learn something new from your posts wordle answer today.


Автор: 메이저토토 (не зарегистрирован), дата: 14 ноября, 2022 - 10:06
#permalink

hi there, i do assume your blog ought to in all likelihood be having internet browser compatibility troubles. Each time i take a look at your weblog in safari, it appears high-quality but while opening in net explorer, it has a few overlapping issues. I truly wanted to provide you a short heads up! Except that, extremely good weblog! hello there! This blog put up couldn’t be written an awful lot better! Looking at this text reminds me of my previous roommate! He continuously saved talking approximately this. I maximum truly will ahead this newsletter to him. Pretty positive he could have a good examine. I appreciate you for sharing! This web site become… how do i say it? Relevant!! In the end i've found something that helped me.
메이저토토


Автор: 먹튀폴리스 (не зарегистрирован), дата: 14 ноября, 2022 - 10:08
#permalink

Please do maintain up the extremely good paintings. I surely adored perusing your blog. It become quite all around created and simple. By no means like specific web sites i've perused that are genuinely no longer that accurate. Thank you alot! Certainly, this text is genuinely one of the very best in the history of articles. I am a antique ’article’ collector and that i from time to time read a few new articles if i discover them interesting. And i found this one pretty captivating and it must move into my series. Excellent paintings! Thank you a lot! A way to play on-line slots for the pleasant online casino apps, the quality online on line casino apps are apps like on-line casino video games which can be compiled for you in one app. Which has been very famous whether or not in thailand or neighboring countries and additionally meet the worldwide on line casino requirements of the world as properly similarly .먹튀폴리스


Автор: 토토사이트 (не зарегистрирован), дата: 14 ноября, 2022 - 11:16
#permalink

It’s a great and helpful piece of information. I am glad that you simply shared this information with us. I also refer to our article about these sources are trustworthy to use as tools for research. thank you so much for sharing this, it is extremely useful. Thanks again . Thanks for providing such good training. & Thank you for giving us such a great information. Thank you for sharing the information. Looking for such more content in the future. I feel very grateful that I read this. It is very helpful and very informative and I really learned a lot from it.
토토사이트


Автор: 선시티카지노도메인 (не зарегистрирован), дата: 14 ноября, 2022 - 11:16
#permalink

This submit couldn’t be written a great deal better! Looking through this post reminds me of my previous roommate! This is very exciting, you're a completely skilled blogger. I have joined your feed and look forward to seeking more of your top notch publish. The writer is fiery about acquiring wood fixtures on the net and his examination approximately satisfactory wood furnishings has understood the association of this text. Exquisite data! I recently got here throughout your blog and had been studying alongside. I notion i might leave my first remark. I don’t understand what to say besides that i have. Quite accurate post. I simply stumbled upon your blog and desired to mention that i've honestly loved studying your weblog posts. Any way i will be subscribing on your feed and i wish you post once more soon. Massive thank you for the beneficial info. That is a fab weblog. Extremely helpful information. Thanks! Pleasant weblog here! Moreover your internet site loads up very fast! What internet host are you using? Can i am getting your accomplice link on your host?
선시티카지노도메인


Автор: 토토사이트 (не зарегистрирован), дата: 14 ноября, 2022 - 12:35
#permalink

For older parents, retirement or a large promotion at paintings is a time whilst celebration events are going to be a notable idea. Wonderful know-how. With thanks. That is a extremely good platform. I also give you an article about fortnite. Essentially, it's far a pc recreation. It gives a brand new pores and skin to your favorite characters. Get this skins with skin generator. Revel in your fortnite enjoy. Thank you. This is such a notable resource that you are offering and you give it away without cost. I like seeing blog that recognize the cost of supplying a quality useful resource for free. I assume this is an informative put up and it's far very beneficial and knowledgeable. I simply tripped upon your blog and ached to mention that i have absolutely loved reading your blog submit. Thank you for sharing. You've got stated very interesting information ! Ps first rate web page. fantastic goods from you, guy. I have apprehend your stuff previous to and you are just too outstanding. I clearly like what you’ve obtained here, surely like what you’re saying and the way in that you say it.
토토사이트


Автор: yanfi (не зарегистрирован), дата: 14 ноября, 2022 - 12:44
#permalink

It's so useful! Those seeking relaxation should go with this option
stumble guys 2


Автор: 토디즈 (не зарегистрирован), дата: 14 ноября, 2022 - 13:17
#permalink

you are so exciting! I don’t consider i’ve examine some thing like this before. So great to discover any other character with a few proper mind in this issue. Significantly.. Thanks for beginning this up. This website is some thing that is required at the net, a person with some originality! I quite like studying via a submit which can make males and females assume. Also, many thank you for allowing me to comment! Spot on with this write-up, i genuinely suppose this superb web site needs a remarkable deal more attention. I’ll likely be returning to peer more, thanks for the advice! I’m very thrilled to discover this page. I wanted to thanks on your time for this outstanding read!! I certainly truely favored every little bit of it and i also have you ever saved as a favourite to have a look at new matters to your internet site.

토디즈


Автор: 안전놀이터 (не зарегистрирован), дата: 14 ноября, 2022 - 13:27
#permalink

I have been searching to find a comfort or effective procedure to complete this process and I think this is the most suitable way to do it effectively. I am really enjoying reading your well written articles. It looks like you spend a lot of effort . thank for dropping this story. I am definitely tired of struggling to find relevant and intelligent commentary on this subject. Everyone nowadays seem to go to extremes to either drive home their viewpoint or suggest that everybody else in the globe is wrong. thank for your concise and relevant insight. This is such a great resource that you are providing and you give it away for free.
안전놀이터


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

I’m having a small problem. I’m unable to subscribe to your rss feed for some reason. I’m using google reader by the way. This is actually appealing, You’re a significantly seasoned author. I have joined with your feed plus expect witnessing the very good write-ups. And additionally, We’ve shared your web blog inside our social networking sites. After reading your article I was amazed. I know that you explain it very well. And I hope that other readers will also experience how I feel after reading your article. I found this one pretty fascinating and it should go into my collection. Very good work!
다음드보증업체


Автор: 메이저토토사이트 (не зарегистрирован), дата: 14 ноября, 2022 - 14:41
#permalink

Hello I am so delighted I located your blog, I really located you by mistake, while I was watching on google for something else, Anyways I am here now and could just like to say thank for a tremendous post and a all round entertaining website. Please do keep up the great work. Wonderful article, thanks for putting this together! This is obviously one great post. Thanks for the valuable information and insights you have so provided here. Pretty wonderful post. I simply came across your blog and wanted to state that I have really enjoyed surfing your post. I'll be subscribing to your feed and I hope you compose once again soon . Found your blog in the Google bulk turtleneck shirts directory, very nice job, thanks.
메이저토토사이트


Автор: 메이저사이트 (не зарегистрирован), дата: 14 ноября, 2022 - 15:21
#permalink

I perpetually visit your blog and retrieve everything you post here however I never commented however these days once I saw this post,메이저사이트


Автор: 토토커뮤니티 (не зарегистрирован), дата: 14 ноября, 2022 - 15:25
#permalink

I have been searching to find a comfort or effective procedure to complete this process and I think this is the most suitable way to do it effectively. I am really enjoying reading your well written articles. It looks like you spend a lot of effort . thank for dropping this story. I am definitely tired of struggling to find relevant and intelligent commentary on this subject. Everyone nowadays seem to go to extremes to either drive home their viewpoint or suggest that everybody else in the globe is wrong. thank for your concise and relevant insight. This is such a great resource that you are providing and you give it away for free. 토토커뮤니티


Автор: 스포츠토토 (не зарегистрирован), дата: 14 ноября, 2022 - 16:42
#permalink

A debt of gratitude is in order for sharing the information, keep doing awesome... I truly delighted in investigating your site. great asset. I really appreciate this wonderful post that you have provided for us. I assure this would be beneficial for most of the people. Thank you for another informative website. Where else could I get that type of information written in such a perfect way? I have a project that I’m just now working on, and I’ve been on the look out for such information. Usually dislike any form of commenting, but when you read an excellent publish occasionally you simply have to get from those lazy techniques. That is such a submit!

스포츠토토


Автор: 스포츠토토 (не зарегистрирован), дата: 14 ноября, 2022 - 16:42
#permalink

A debt of gratitude is in order for sharing the information, keep doing awesome... I truly delighted in investigating your site. great asset. I really appreciate this wonderful post that you have provided for us. I assure this would be beneficial for most of the people. Thank you for another informative website. Where else could I get that type of information written in such a perfect way? I have a project that I’m just now working on, and I’ve been on the look out for such information. Usually dislike any form of commenting, but when you read an excellent publish occasionally you simply have to get from those lazy techniques. That is such a submit!

스포츠토토


Автор: 먹튀폴리스주소 (не зарегистрирован), дата: 14 ноября, 2022 - 16:43
#permalink

this turned into honestly an interesting subject matter and i kinda consider what you have got cited here! Whats up, i have browsed most of your posts. This submit is probably wherein i got the most useful data for my studies. Thank you for posting, maybe we can see more in this. Are you aware of any other websites on this subject .
먹튀폴리스주소


Автор: Гость (не зарегистрирован), дата: 14 ноября, 2022 - 18:26
#permalink

hey there, i do think your website online is probably having browser compatibility issues. Every time i test your site in safari, it appears first-class but, if establishing in i. E., it has some overlapping troubles. I simply desired to offer you with a short heads up! Other than that, notable website! I’d want to thank you for the efforts you have got installed writing this site. I am hoping to peer the same high-grade content material by means of you afterward as properly. In fact, your creative writing skills has inspired me to get my personal web site now ???? it’s hard to find well-informed people approximately this subject matter, however, you sound like you know what you’re talking about! Thanks
먹튀검증


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

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
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
Антиспам
3 + 15 =
Введите результат. Например, для 1+3, введите 4.
 
Текущий раздел
Поиск по сайту
Содержание

Учебник javascript

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

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

Интерфейсы

Все об AJAX

Оптимизация

Разное

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

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