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
먹튀검증


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

I have been looking for this information for a long time, this website retro bowl is so cool


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

I have read many other blogs, but yours is the only one that has persuaded me, and I hope that you will continue to share more insightful content with readers in the future.
papa's freezeria


Автор: phamhoai (не зарегистрирован), дата: 29 декабря, 2022 - 18:40
#permalink

Thanks to your instructions I was able to make my site wordle website perfectly functional. Admittedly you are a very good programmer and I really like that.


Автор: 카지노사이트 (не зарегистрирован), дата: 6 января, 2023 - 09:16
#permalink

I've been troubled for several days with this topic. 카지노사이트, But by chance looking at your post solved my problem! I will leave my blog, so when would you like to visit it?


Автор: cccddd (не зарегистрирован), дата: 17 января, 2023 - 14:41
#permalink

Many thanks to the author AI Tool for sharing this article about Java, which made my website run smoothly.[url=https://aitoolmall.com/]AI Tool[/url]


Автор: PutinvsmeГость (не зарегистрирован), дата: 21 января, 2023 - 13:44
#permalink

Wow, is this a fake Facebook Inattv.icu? Damn it looks so real! Use the settings to the left to begin - You can also add comments & emoticons.


Автор: Wordle (не зарегистрирован), дата: 5 февраля, 2023 - 19:54
#permalink

Hello there, I came into your blog while searching for such an educational post on Google, and your post appears to be extremely intriguing to me. wordle today


Автор: emmausa (не зарегистрирован), дата: 11 февраля, 2023 - 04:32
#permalink

It took me a long time to find a website with so many good articles krunker and interesting information. tetris unblocked


Автор: 메이저사이트 (не зарегистрирован), дата: 20 февраля, 2023 - 03:26
#permalink

Hello. Reading this article reminded me of the past. I want to talk again with the person who saw your post and told me about it. I'll pass it on so he can read it. Thanks for sharing.메이저사이트


Автор: 먹튀신고 (не зарегистрирован), дата: 20 февраля, 2023 - 03:32
#permalink

I visit the blog every day to see new posts and articles. I saw a good article on your site and took notes. We sincerely appreciate your information.먹튀신고


Автор: 먹튀검증 (не зарегистрирован), дата: 20 февраля, 2023 - 03:33
#permalink

Is it just me or does anyone else feel it? Reading your blog, I wondered how you came up with such an article. Please be the one who always writes amazing articles until the end.먹튀검증


Автор: 토토사이트 (не зарегистрирован), дата: 20 февраля, 2023 - 03:34
#permalink

You can tell from the articles on your blog that you are a person who thinks more deeply than anyone else. If you agree with that idea, I hope you will visit my site as well.토토사이트


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

Active cheat codes updated roblox codes 2023


Автор: lindausa0106 (не зарегистрирован), дата: 9 марта, 2023 - 04:40
#permalink

I can't believe I didn't know about your post until now. The information you share is very important to me because it is important documents slither io to complement the topic I am studying.


Автор: timothysykes (не зарегистрирован), дата: 11 марта, 2023 - 12:43
#permalink

Ваш пост меня удивил, он очень познавательный eggy car


Автор: 온라인바카라사이트 (не зарегистрирован), дата: 16 марта, 2023 - 11:29
#permalink

Your ideas inspired me very much. 온라인바카라사이트 It's amazing. I want to learn your writing skills. In fact, I also have a website. If you are okay, please visit once and leave your opinion. Thank you.


Автор: 메이저사이트 (не зарегистрирован), дата: 21 марта, 2023 - 05:27
#permalink

whoah this weblog is excellent i like studying your articles. 메이저사이트


Автор: Гость (не зарегистрирован), дата: 29 марта, 2023 - 07:21
#permalink

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


Автор: John5 (не зарегистрирован), дата: 30 марта, 2023 - 14:57
#permalink

Supreme Vision CCTV is a provider of CCTV installation and repair services, access control, and transmission security systems. Supreme Vision Stay updated with construction site security and the latest trends and technologies in the security industry.


Автор: Allen5 (не зарегистрирован), дата: 30 марта, 2023 - 15:02
#permalink

Steam Innovation was formed as an innovation academy to reveal kids' usual creativity and curiosity with the help of learning kits while helping parents who want to bring enriching experiences to their children. We hope monthly stem kits will produce the problem-solving skills and creative sureness that kids gain today and will help them tackle the experiments and breaks of tomorrow.


Автор: Гость (не зарегистрирован), дата: 31 марта, 2023 - 10:55
#permalink

Автор: 토토사이트추천 (не зарегистрирован), дата: 7 апреля, 2023 - 06:20
#permalink

Hello, I read the post well. 토토사이트추천 It's a really interesting topic and it has helped me a lot. In fact, I also run a website with similar content to your posting. Please visit once


Автор: 토토사이트순위 (не зарегистрирован), дата: 7 апреля, 2023 - 12:22
#permalink

Your ideas inspired me very much.토토사이트순위 It's amazing. I want to learn your writing skills. In fact, I also have a website. If you are okay, please visit once and leave your opinion. Thank you.


Автор: 다바오홀덤 (не зарегистрирован), дата: 10 апреля, 2023 - 05:12
#permalink

I’m not sure exactly why but this weblog is loading incredibly slow for me. Is anyone else having this problem or is it a problem on my end? I’ll check back later on and see if the problem still exists. 다바오홀덤


Автор: 안전놀이터 (не зарегистрирован), дата: 10 апреля, 2023 - 09:36
#permalink

While looking for articles on these topics, I came across this article on the site here. As I read your article, I felt like an expert in this field. I have several articles on these topics posted on my site. Could you please visit my homepage? 안전놀이터


Автор: 토토사이트순위 (не зарегистрирован), дата: 12 апреля, 2023 - 11:19
#permalink

Your ideas inspired me very much. 토토사이트순위 It's amazing. I want to learn your writing skills. In fact, I also have a website. If you are okay, please visit once and leave your opinion. Thank you.


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

Автор: 스포츠토토사이트 (не зарегистрирован), дата: 24 апреля, 2023 - 06:58
#permalink

I accidentally searched and visited your site. I still saw several posts during my visit, but the text was neat and readable. I will quote this post and post it on my blog. Would you like to visit my blog later? 스포츠토토사이트


Автор: 메이저놀이터 (не зарегистрирован), дата: 2 мая, 2023 - 09:11
#permalink

I am usually to blogging i genuinely appreciate your content. Your content has really peaks my interest. 메이저놀이터


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

Автор: 토토사이트 (не зарегистрирован), дата: 16 мая, 2023 - 20:57
#permalink

Well I truly enjoyed reading it. This subject offered by you is very helpful and accurate:) 토토사이트추천


Автор: 토토사이트 (не зарегистрирован), дата: 16 мая, 2023 - 20:57
#permalink

Well I truly enjoyed reading it. This subject offered by you is very helpful and accurate:) 토토사이트추천


Автор: 토토사이트 (не зарегистрирован), дата: 26 мая, 2023 - 04:53
#permalink

Outstanding information flow. We should take the five minutes it will take to read this text while lying down. (: 토토사이트


Автор: team helps you to guide in all aspects of Technology, Busine (не зарегистрирован), дата: 26 мая, 2023 - 04:53
#permalink

team helps you to guide in all aspects of Technology, Business, Gadgets, Marketing and Apps related news. Our goal is to provide all the latest information to our audience. 먹튀검증


Автор: 메이저사이트 (не зарегистрирован), дата: 26 мая, 2023 - 04:53
#permalink

I am very glad to see such excellent info being shared freely out there. Youre so cool! I dont suppose Ive read anything like this before (: 메이저사이트


Автор: 토토사이트 추천 (не зарегистрирован), дата: 26 мая, 2023 - 04:53
#permalink

I am hoping for the same best effort from you in the future as well. In fact, your creative writing skills have inspired me. (: 토토사이트 추천


Автор: 토토사이트2 (не зарегистрирован), дата: 27 мая, 2023 - 20:11
#permalink

Many people say it surrounds the simul. I'm afraid to see more than I can imagine먹튀검증사이트


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

Автор: adamusa (не зарегистрирован), дата: 8 июня, 2023 - 10:42
#permalink

Your post is awesome. Don't miss mapquest directions if you're looking for a good navigational tool.


Автор: ggg (не зарегистрирован), дата: 15 июня, 2023 - 17:59
#permalink

Автор: 카지노api (не зарегистрирован), дата: 24 июня, 2023 - 10:54
#permalink

Such a very useful article. Very interesting to read this article.I would like to thank you for the efforts you had made for writing this awesome article.
카지노알값


Автор: 안전슬롯사이트 (не зарегистрирован), дата: 24 июня, 2023 - 15:08
#permalink

I wanted to thank you for this great read!! I definitely enjoying every little bit of it I have you bookmarked to check out new stuff you post
안전슬롯사이트


Автор: 늑대닷컴 (не зарегистрирован), дата: 26 июня, 2023 - 09:55
#permalink

Amazingly delightful utilization of words and Keenly built by the author 늑대닷컴


Автор: 해외축구중계 (не зарегистрирован), дата: 27 июня, 2023 - 14:14
#permalink

I think this is a really good article. You make this information interesting and engaging. You give readers a lot to think about and I appreciate that kind of writing. 해외축구중계


Автор: 메이저놀이터 (не зарегистрирован), дата: 25 июля, 2023 - 06:55
#permalink

I’m really enjoying the theme/design of your weblog. Do you ever run into any browser compatibility problems? A couple of my blog visitors have complained about my site not operating correctly in Explorer but looks great in Safari. Do you have any tips to help fix this problem메이저놀이터


Автор: Everest (не зарегистрирован), дата: 25 июля, 2023 - 11:12
#permalink

I very much agree with what you said, and the content you shared is very practical, thank you for sharing.jordan reps


Автор: karausa (не зарегистрирован), дата: 27 июля, 2023 - 11:42
#permalink

Your share contains a lot of knowledge, retro bowl and I value your work. Continue publishing more intriguing content, please.


Автор: Chai app (не зарегистрирован), дата: 7 августа, 2023 - 15:02
#permalink

Open your cell phone's application store, type "Chai app" into the pursuit bar, and afterward download the "Chai - Visit with artificial intelligence bots" (or, on Android, "Chai - Talk with simulated intelligence Companions") application. Subsequent to downloading the program, clients are provoked to sign in utilizing a Facebook, Google, or Apple account.


Автор: Marin ai (не зарегистрирован), дата: 13 августа, 2023 - 18:29
#permalink

I fixed errors in the right panel of my AI News coming from the f-slic Java library. Thanks for sharing this informative guide.


Автор: ambbet-zone (не зарегистрирован), дата: 12 сентября, 2023 - 09:50
#permalink

เดิมพันออนไลน์กับเว็บเราสิ ยินดีให้บริการ เราเป็นเว็บตรงจากต่างประเทศจริง เราไม่ได้มาเล่นๆ แต่เราจริงจัง จัดเลย พร้อมบริการตลอด 24 ชั่วโมง ปลอดภัยไร้กังวล 100%
ambbet-zone


Автор: joker-123-th (не зарегистрирован), дата: 12 сентября, 2023 - 11:20
#permalink

เดิมพัน ของเราวันนี้มีโปรโมชั่นเพียบ สมัครเลย ด้วยเกมเดิมพันที่หลากหลายให้เล่น แทงบอลเป็นหลัก คาสิโนเป็นรอง พร้อมที่จะบริการลูกค้าทุกท่านให้ไปได้ไกลที่สุด แตกล้านจ่ายล้าน แน่นอนมั่นใจที่นี่ที่เดียว
joker-123-th


Автор: ai tech (не зарегистрирован), дата: 17 октября, 2023 - 09:08
#permalink

Thank you lot for sharing this useful information. you can also visit this AI NSFW tools for more related news about nsfw ai world.


Автор: ranker (не зарегистрирован), дата: 12 ноября, 2023 - 13:51
#permalink

I will really appreciate the writer's choice for choosing this excellent article appropriate to my matter.Here is deep description about the article matter which helped me more. satta matka


Автор: betflik vip (не зарегистрирован), дата: 16 ноября, 2023 - 14:17
#permalink

betflik vip An intriguing discussion may be worth comment. I’m sure you should write much more about this topic, may well be described as a taboo subject but generally folks are too little to chat on such topics. An additional. Cheers


Автор: amna (не зарегистрирован), дата: 22 ноября, 2023 - 19:44
#permalink

You actually make it look so easy with your performance but I find this matter to be actually something which I think I would never comprehend. It seems too complicated and extremely broad for me. I'm looking forward for your next post, I’ll try to get the hang of it! سحبة مزاج خوخ


Автор: amna seo (не зарегистрирован), дата: 23 ноября, 2023 - 12:25
#permalink

This is my first time i visit here. I found so many interesting stuff in your blog especially its discussion. From the tons of comments on your articles, I guess I am not the only one having all the enjoyment here keeherbal incense diablo
p up the good work


Автор: ranker (не зарегистрирован), дата: 26 ноября, 2023 - 17:40
#permalink

Truly, this article is really one of the very best in the history of articles. I am a antique ’Article’ collector and I sometimes read some new articles if I find them interesting. And I found this one pretty fascinating and it should go into my collection. Very good work! 自走式 移動式 破砕機中古


Автор: ranker (не зарегистрирован), дата: 26 ноября, 2023 - 19:15
#permalink

I'm happy to see the considerable subtle element here!. エアドライドッグフード


Автор: ranker (не зарегистрирован), дата: 27 ноября, 2023 - 19:38
#permalink

Some truly wonderful work on behalf of the owner of this internet site , perfectly great articles .
سحبة مزاج 4500


Автор: ranker (не зарегистрирован), дата: 28 ноября, 2023 - 09:35
#permalink

I have checked this link this is really important for the people to get benefit from. شيشة


Автор: ranker (не зарегистрирован), дата: 29 ноября, 2023 - 08:47
#permalink

You completely match our expectation and the variety of our information. gravel bike jersey


Автор: amnaseo (не зарегистрирован), дата: 5 декабря, 2023 - 09:33
#permalink

Amazing blog, with a lot of useful information for everyone. Please keep sharing more useful updates. きらら歯科


Автор: qaseo (не зарегистрирован), дата: 11 декабря, 2023 - 20:17
#permalink

Thanks for a wonderful share. Your article has proved your hard work and experience you have got in this field. Brilliant .i love it reading.
Design agency bali


Автор: ufa168 (не зарегистрирован), дата: 13 декабря, 2023 - 15:13
#permalink

Attractive portion of content. I simply stumbled upon your web site and in accession capital to assert that I get actually enjoyed account your weblog. ufa168


Автор: amna (не зарегистрирован), дата: 25 декабря, 2023 - 09:20
#permalink

This is a wonderful article, Given so much info in it, These type of articles keeps the users interest in the website, and keep on sharing more ... good luck 名古屋市千種区茶屋が坂 メンタルクリニック


Автор: Гость (не зарегистрирован), дата: 26 декабря, 2023 - 11:59
#permalink

The game is available for free on the New York sms activate Times website, and it has become incredibly popular in a short amount of time.


Автор: betflixvip เข้าสู่ระบบ (не зарегистрирован), дата: 30 декабря, 2023 - 10:40
#permalink

You have a good point here! I totally agree with what you have said !! Thanks for sharing your views ... hope more people will read this article. betflixvip เข้าสู่ระบบ


Автор: qaseo (не зарегистрирован), дата: 5 января, 2024 - 08:08
#permalink

Wow! Such an amazing and helpful post this is. I really really love it. It's so good and so awesome. I am just amazed. I hope that you continue to do your work like this in the future also.大阪中津 美容皮膚科 美容外科


Автор: ka (не зарегистрирован), дата: 7 января, 2024 - 09:19
#permalink

That is the clarification I can without a truly striking stretch picked power the making style and thoughtclicksud


Автор: nap (не зарегистрирован), дата: 8 января, 2024 - 13:27
#permalink

this is really nice to read..informative post is very good to read..thanks a lot!
名古屋市千種区茶屋が坂 メンタルクリニック


Автор: BETFLIXSUPERVIP (не зарегистрирован), дата: 9 января, 2024 - 18:54
#permalink

Thank you for another excellent article. Where else could anybody get that kind oof information in such an ideall means of writing? I’ve a presentation next week, and I’m at the look for such info.betflixvip เข้าสู่ระบบ


Автор: napeg (не зарегистрирован), дата: 11 января, 2024 - 09:00
#permalink

Love to read it,Waiting For More new Update and I Already Read your Recent Post its Great Thanks. 구글 상위 노출


Автор: dase (не зарегистрирован), дата: 13 января, 2024 - 08:23
#permalink

What a really awesome post this is. Truly, one of the best posts I've ever witnessed to see in my whole life. Wow, just keep it up.
مايلي


Автор: kirank (не зарегистрирован), дата: 14 января, 2024 - 08:36
#permalink

Much thanks for composing such an intriguing article on this point. This has truly made me think and I plan to peruse more شيشة الكترونية


Автор: Lanes (не зарегистрирован), дата: 14 января, 2024 - 21:10
#permalink

Today, I'm thrilled to share the inside scoop on a cyber haven meticulously crafted for enthusiasts of card games, Uno strategists, and those enticed by the allure of online casinos. Picture poker showdowns mirroring the intensity of a movie's grand finale, rummy extravaganzas rewriting the script of 'entertainment,' Uno battles that set your heart racing, and, brace yourself, a sprinkle of online casino allure to elevate the gaming saga – all accessible with a few clicks. The unexpected twist? Immerse yourself in this gaming adventure, enriched with a hint of casino charm, without leaving the cozy confines of your digital sanctuary.

A resounding applause to the ingenious minds sculpting this user-friendly utopia. Navigation glides smoother than a river flush with triumphs, and the game repertoire, now adorned with a touch of casino allure, is a symphony of gaming ecstasy. I've been mesmerized, tossing challenges like confetti, sculpting my digital gaming realm with the finesse of a seasoned strategist.


Автор: zimp (не зарегистрирован), дата: 17 января, 2024 - 09:19
#permalink

I have bookmarked your website because this site contains valuable information in it. I am really happy with articles quality and presentation. Thanks a lot for keeping great stuff. I am very much thankful for this site. 에볼루션


Автор: Craiyon AI (не зарегистрирован), дата: 23 января, 2024 - 13:42
#permalink

Transform your ideas into stunning visuals effortlessly with Craiyon AI, your go-to AI image generator tool. Whether you’re a designer, marketer, or just someone looking to add a creative touch to your projects, Craiyon AI is here to simplify the process and elevate your designs.


Автор: ngs (не зарегистрирован), дата: 23 января, 2024 - 20:12
#permalink

Your site is truly cool and this is an extraordinary moving article. FX


Автор: 토토사이트 (не зарегистрирован), дата: 24 января, 2024 - 11:28
#permalink

There are too many school assignments these days. I need your article to complete my assignment at school and the article and the subject are similar. This is a really heartwarming article. We will visit again next time. 토토사이트


Автор: Dom (не зарегистрирован), дата: 27 января, 2024 - 14:23
#permalink

불독티비 is a game-changer for sports enthusiasts! The variety of content and user-friendly interface make it my top choice.


Автор: SEO (не зарегистрирован), дата: 28 января, 2024 - 22:30
#permalink

Connect with like-minded fans through 해외축구중계's community.


Автор: SEP (не зарегистрирован), дата: 28 января, 2024 - 22:41
#permalink

Soccer enthusiasts unite under the banner of 해외축구중계.


Автор: baxer61 (не зарегистрирован), дата: 30 января, 2024 - 19:43
#permalink

Writing with style and getting good compliments on the article is quite hard, to be honest.But you've done it so calmly and with so cool feeling and you've nailed the job. This article is possessed with style and I am giving good compliment. Best! emperor33


Автор: gag16 (не зарегистрирован), дата: 31 января, 2024 - 19:47
#permalink

I enjoy every one of the content, I must say i appreciated, I would really like more details concerning this, due to the fact it is extremely great., Thank you regarding revealing. سحبات مزاج


Автор: Soulgen AI Art (не зарегистрирован), дата: 5 февраля, 2024 - 13:18
#permalink

Unleash the magic of artificial intelligence and transform your words into captivating visual masterpieces with SoulGen AI, the ultimate online AI art creation tool. Our platform merges cutting-edge technology with the boundless creativity of the human mind, allowing you to bring your imagination to life in ways you’ve never experienced before.


Автор: Гость (не зарегистрирован), дата: 6 февраля, 2024 - 08:34
#permalink

emperor33

A debt of gratitude is in order for the blog entry amigo! Keep them coming...


Автор: Гость (не зарегистрирован), дата: 6 февраля, 2024 - 19:38
#permalink

very interesting post.this is my first time visit here.i found so many interesting stuff in your blog especially its discussion..thanks for the post! food recipe dairy


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

I’m happy I located this blog! From time to time, students want to cognitive the keys of productive literary essays composing. Your first-class knowledge about this good post can become a proper basis for such people. nice one workout supplements


Автор: konoha toto78 (не зарегистрирован), дата: 11 февраля, 2024 - 13:44
#permalink

Konohatoto78 adalah tempat terbaik untuk pecinta judi online. Dengan status resmi dan terpercaya, pelayanan terbaik 24 jam nonstop, pilihan pembayaran lengkap, dan beragamnya pilihan permainan, kami berkomitmen untuk memberikan pengalaman berjudi yang tak terlupakan kepada Anda. Jangan ragu untuk bergabung dengan kami dan mulai petualangan judi Anda hari ini!


Автор: Гость (не зарегистрирован), дата: 11 февраля, 2024 - 19:56
#permalink

Fantastic blog it is full of knowledge and informative content dude I like it good work keep it up. سحبات مايلي


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

This is my first time i visit here and I found so many interesting stuff in your blog especially it's discussion, thank you.


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

Very informative post ! There is a lot of information here that can help any business get started with a successful social networking campaign ! https://amigo-tours.ru/aZSiCMHc/pgs/promokod-1xbet-bonus.html


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

Wow, excellent post. I’d like to draft like this too – taking time and real hard work to make a great article. This post has encouraged me to write some posts that I am going to write soon. diablo k2


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

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

Учебник javascript

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

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

Интерфейсы

Все об AJAX

Оптимизация

Разное

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

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