Какой параметр в обработчике события передает объект события которое обрабатывается

Какой параметр в обработчике события передает объект события которое обрабатывается

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

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

В конструкторе устанавливаем начальную сумму, которая хранится в свойстве Sum. С помощью метода Put мы можем добавить средства на счет, а с помощью метода Take, наоборот, снять деньги со счета. Попробуем использовать класс в программе — создать счет, положить и снять с него деньги:

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

Казалось, теперь мы будем извещены об операции, увидев соответствующее сообщение на консоли. Но тут есть ряд замечаний. На момент определения класса мы можем точно не знать, какое действие мы хотим произвести в методе Put в ответ на добавление денег. Это может вывод на консоль, а может быть мы захотим уведомить пользователя по email или sms. Более того мы можем создать отдельную библиотеку классов, которая будет содержать этот класс, и добавлять ее в другие проекты. И уже из этих проектов решать, какое действие должно выполняться. Возможно, мы захотим использовать класс Account в графическом приложении и выводить при добавлении на счет в графическом сообщении, а не консоль. Или нашу библиотеку классов будет использовать другой разработчик, у которого свое мнение, что именно делать при добавлении на счет. И все эти вопросы мы можем решить, используя события.

Определение и вызов событий

События объявляются в классе с помощью ключевого слова event , после которого указывается тип делегата, который представляет событие:

В данном случае вначале определяется делегат AccountHandler, который принимает один параметр типа string. Затем с помощью ключевого слова event определяется событие с именем Notify, которое представляет делегат AccountHandler. Название для события может быть произвольным, но в любом случае оно должно представлять некоторый делегат.

Определив событие, мы можем его вызвать в программе как метод, используя имя события:

Поскольку событие Notify представляет делегат AccountHandler, который принимает один параметр типа string — строку, то при вызове события нам надо передать в него строку.

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

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

Объединим все вместе и создадим и вызовем событие:

Теперь с помощью события Notify мы уведомляем систему о том, что были добавлены средства и о том, что средства сняты со счета или на счете недостаточно средств.

Добавление обработчика события

С событием может быть связан один или несколько обработчиков. Обработчики событий — это именно то, что выполняется при вызове событий. Нередко в качестве обработчиков событий применяются методы. Каждый обработчик событий по списку параметров и возвращаемому типу должен соответствовать делегату, который представляет событие. Для добавления обработчика события применяется операция += :

Определим обработчики для события Notify, чтобы получить в программе нужные уведомления:

В данном случае в качестве обработчика используется метод DisplayMessage, который соответствует по списку параметров и возвращаемому типу делегату AccountHandler. В итоге при вызове события Notify?.Invoke() будет вызываться метод DisplayMessage, которому для параметра message будет передаваться строка, которая передается в Notify?.Invoke() . В DisplayMessage просто выводим полученное от события сообщение, но можно было бы определить любую логику.

Если бы в данном случае обработчик не был бы установлен, то при вызове события Notify?.Invoke() ничего не происходило, так как событие Notify было бы равно null.

Консольный вывод программы:

Теперь мы можем выделить класс Account в отдельную библиотеку классов и добавлять в любой проект.

Добавление и удаление обработчиков

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

В качестве обработчиков могут использоваться не только обычные методы, но также делегаты, анонимные методы и лямбда-выражения. Использование делегатов и методов:

В данном случае разницы между двумя обработчиками никакой не будет.

Установка в качестве обработчика анонимного метода:

Установка в качестве обработчика лямбда-выражения:

Управление обработчиками

С помощью специальных акссесоров add/remove мы можем управлять добавлением и удалением обработчиков. Как правило, подобная функциональность редко требуется, но тем не менее мы ее можем использовать. Например:

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

Во второй части определяем акссесоры add и remove. Аксессор add вызывается при добавлении обработчика, то есть при операции +=. Добавляемый обработчик доступен через ключевое слово value . Здесь мы можем получить информацию об обработчике (например, имя метода через value.Method.Name) и определить некоторую логику. В данном случае для простоты просто выводится сообщение на консоль:

Блок remove вызывается при удалении обработчика. Аналогично здесь можно задать некоторую дополнительную логику:

Внутри класса событие вызывается также через переменную notify. Но для добавления и удаления обработчиков в программе используется как раз Notify:

Консольный вывод программы:

Передача данных события

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

Данный класс имеет два свойства: Message — для хранения выводимого сообщения и Sum — для хранения суммы, на которую изменился счет.

Теперь применим класс AccoutEventArgs, изменив класс Account следующим образом:

По сравнению с предыдущей версией класса Account здесь изменилось только количество параметров у делегата и соответственно количество параметров при вызове события. Теперь делегат AccountHandler в качестве первого параметра принимает объект, который вызвал событие, то есть текущий объект Account. А в качестве второго параметра принимает объект AccountEventArgs, который хранит информацию о событии, получаемую через конструктор.

Теперь изменим основную программу:

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

Событийная модель

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

Время чтения: 7 мин

1. Кратко
2. Как пишется
   1. on-свойства DOM-элементов
   2. Метод addEventListener()
   1. Функция-обработчик
   2. Всплытие событий
   1. Николай Лопин советует
   • Егор Левченко ,
   • Светлана Коробцева

   Обновлено 14 октября 2022

   Кратко

   Скопировать ссылку «Кратко» Скопировано

   Чтобы приложение было интерактивным, нам нужно понимать, что пользователь совершил то или иное действие на странице. Браузер распознает действия пользователя и создаёт событие.

   События — это сигналы, которые браузер посылает разработчику, а разработчик может на сигнал реагировать. По аналогии со светофором: видим зелёный свет, едем дальше ��

   События бывают разных типов: клик, нажатие клавиши на клавиатуре, прокрутка страницы и так далее.

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

   Как пишется

   Скопировать ссылку «Как пишется» Скопировано

   Существует два способа обработать события:

   • с помощью on -свойств DOM-элементов;
   • методом add Event Listener ( ) .

   on -свойства DOM-элементов

   Скопировать ссылку «on-свойства DOM-элементов» Скопировано

   Большинство событий связаны с DOM-элементами. Если пользователь кликнул на кнопку, то событие click связано с конкретным DOM-элементом — кнопкой, на которой кликнул пользователь.

   Каждый DOM-элемент имеет большой набор свойств, которые начинаются на on :

   • onclick ;
   • onscroll ;
   • onkeypress ;
   • onmouseenter ;
   • и так далее.

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

   Чтобы перестать обрабатывать событие, нужно записать в свойство значение null .

   Метод add Event Listener ( )

   Скопировать ссылку «Метод addEventListener()» Скопировано

   �� Если обрабатывать события с помощью on -свойств, то получится добавить только одну функцию-обработчик на каждый элемент. Часто одного обработчика недостаточно. Чтобы не создавать ограничение на пустом месте, используют альтернативный метод подписки на события — метод add Event Listener ( ) .

   Метод вызывается у DOM-элемента. Аргументами нужно передать тип события (справочная информация) и функцию, которую нужно выполнить:

   Как понять

   Скопировать ссылку «Как понять» Скопировано

   Функция-обработчик

   Скопировать ссылку «Функция-обработчик» Скопировано

   Функция-обработчик, или просто обработчик, — это функция, которая вызывается браузером при наступлении события.

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

   Объект события — это JavaScript-объект с информацией о событии. В объекте события есть как общие свойства (тип события, время события), так и свойства, которые зависят от типа события (например, на какую кнопку нажал пользователь).

   Чтобы работать с объектом события, нужно добавить параметр в объявление обработчика. Обработаем нажатие на кнопки клавиатуры и получим из объекта события информацию о нажатой кнопке:

   Помимо объекта события, внутри функции можно использовать ключевое слово this . Оно позволяет получить DOM-элемент, на котором сработал обработчик. Это позволяет создать обработчик один раз, но привязать её к нескольким DOM-элементам.

   Например, мы объявим обработчик в виде именованной функции и повесим её на нажатие нескольких кнопок. При клике на кнопку будем менять её цвет:

   Всплытие событий

   Скопировать ссылку «Всплытие событий» Скопировано

   Рассмотрим пример. У нас есть <div> элемент, в который вложено видео. Мы подписались на события click как на <div> , так и на <video> . Если событие происходит на <div> , то мы меняем его цвет на случайный из списка. Если событие происходит на <video> , то мы запускаем видео. Попробуйте кликнуть на коробку:

   �� Обратите внимание, что событие срабатывает на обоих элементах — цвет фона меняется и запускается видео. Этому есть объяснение, оно называется всплытие событий (event bubbling).

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

   В нашем примере мы кликнули на <video> , это самый вложенный элемент. Браузер создал событие, и мы обработали его в коде. После этого браузер передаёт событие родителю <video> (то есть элементу, который содержит <video> ) — элементу <div> . Мы получаем его и обрабатываем. И он всплывает дальше, пока не дойдёт до <body> .

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

   Если кликнуть по блокам на демо, то можно увидеть, как событие всплывает вверх к родителям:

   Всплытие события можно остановить с помощью метода stop Propagation ( ) у объекта события:

   На практике

   Скопировать ссылку «На практике» Скопировано

   Николай Лопин советует

   Скопировать ссылку «Николай Лопин советует» Скопировано

   �� Всегда подписывайтесь на события с помощью add Event Listener ( ) , так вы избежите доработок, когда потребуется повесить несколько обработчиков на одно и то же событие.

   �� Если нужно обработать все события определённого типа, вызовите метод add Event Listener ( ) у объекта window :

   �� Если вы не используете объект события в обработчике, то можно не указывать его в списке параметров обработчика. Вместо function ( event ) <…>пишите function ( ) <…>.

   �� Всплытие событий — важный концепт, поэкспериментируйте с ним, чтобы лучше в нём разобраться.

   Читайте также

   На чём стоят три слона, на которых держится веб?

   Загрузка файла с прогресс-баром

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

   JavaScript [4]

   Для взаимодействия с пользователем в JavaScript определен механизм событий. Например, когда пользователь нажимает кнопку, то возникает событие нажатия кнопки. В коде JavaScript мы можем определить возникновение события и как-то его обработать.

   В JavaScript есть следующие типы событий:

   • События мыши (перемещение курсора, нажатие мыши и т.д.)
   • События клавиатуры (нажатие или отпускание клавиши клавиатуры)
   • События жизненного цикла элементов (например, событие загрузки веб-станицы)
   • События элементов форм (нажатие кнопки на форме, выбор элемента в выпадающем списке и т.д.)
   • События, возникающие при изменении элементов DOM
   • События, возникающие при касании на сенсорных экранах
   • События, возникающие при возникновении ошибок

   Рассмотрим простейшую обработку событий. Например, на веб-странице у нас есть следующий элемент div:

   Здесь определен обычный блок div, который имеет атрибут onclick, который задает обработчик события нажатия на блок div. То есть, чтобы обработать какое-либо событие, нам надо определить для него обработчик.

   Также можно было бы вынести все действия по обработке события в отдельную функцию:

   Теперь обработчиком события будет выступать функция displayMessage.

   — Передача параметров в обработчик события

   В обработчик можно передавать параметры. Например, мы можем передать текущий объект, на котором возникает событие:

   Ключевое слово this указывает на текущий объект ссылки, на которую производится нажатие. И в коде обработчика мы можем получить этот объект и обратиться к его свойствам, например, к свойству href.

   Кроме того, надо отметить, что здесь обработчик возвращает результат. Хотя в первом примере с блоком div от обработчика не требовалось возвращения результата. Дело в том, что для некоторых обработчиков можно подтвердить или остановить обработку события. Например, нажатие на ссылку должно привести к переадресации. Но возвращая из обработчика false, мы можем остановить стандартный путь обработки события, и переадресации не будет. Если же возвращать значение true, то событие обрабатывается в стандартном порядке.

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

   В данном случае с помощью свойства type объекта event получаем тип события (в данном случае тип click).

   Обработчики событий

   Встроенные обработчики (inline event handler) определяются в коде элемента с помощью атрибутов:

   Хотя этот подход прекрасно работает, но он имеет кучу недостатков:

   • Код HTML смешивается с кодом JavaScript, в связи с чем становится труднее разрабатывать, отлаживать и поддерживать приложение
   • Обработчики событий можно задать только для уже созданных на веб-странице элементов. Динамически создаваемые элементы в этом случае лишаются возможности обработки событий
   • К элементу для одного события может быть прикреплен только один обработчик
   • Нельзя удалить обработчик без изменения кода

   — Свойства обработчиков событий

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

   В итоге нам достаточно взять свойство onclick и присвоить ему функцию, используемую в качестве обработчика. За счет этого код HTML отделяется от кода JavaScript. Стоит также отметить, что в обработчик события браузер автоматически передает объект Event, хранящий всю информацию о событии.

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

   Для работы со слушателями событий в JavaScript есть объект EventTarget, который определяет методы addEventListener() (для добавления слушателя) и removeEventListener() для удаления слушателя. И поскольку html-элементы DOM тоже являются объектами EventTarget, то они также имеют эти методы. Фактически слушатели представляют те же функции обработчиков.

   Метод addEventListener() принимает два параметра: название события без префикса on и функцию обработчика этого события. Например:

   То есть в данном случае опять же обрабатывается событие click. И также можно было бы в качестве второго параметра передать название функции.

   Удаление слушателя аналогично добавлению:

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

   Объект event

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

   • bubbles: возвращает true, если событие является восходящим. Например, если событие возникло на вложенном элементе, то оно может быть обработано на родительском элементе
   • cancelable: возвращает true, если можно отменить стандартную обработку события
   • currentTarget: определяет элемент, к которому прикреплен обработчик события
   • defaultPrevented: возвращает true, если был вызван у объекта Event метод preventDefault()
   • eventPhase: определяет стадию обработки события
   • target: указывает на элемент, на котором было вызвано событие
   • timeStamp: хранит время возникновения события
   • type: указывает на имя события

   — Остановка выполнения события

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

   Например, запретим переход по ссылке после 12 часов:

   Распространение событий

   Когда мы нажимаем на какой-либо элемент на станице и генерируется событие нажатия, то это событие может распространяться от элемента к элементу. Например, если мы нажимаем на блок div, то также мы нажимаем и на элемент body, в котором блок div находится. То есть происходит распространение события.

   Есть несколько форм распространения событий:

   • Восходящие: событие распространяется вверх по дереву DOM от дочерних узлов к родительским
   • Нисходящие: событие распространяется вниз по дереву DOM от родительских узлов к дочерним, пока не достигнет того элемента, на котором это событие и возникло

   Рассмотрим восходящие (bubbling) события, которые распространяются в верх по дереву DOM. Допустим, у нас есть следующая веб-страница:

   Если мы нажмем на вложенный div, то событие пойдет к родительскому элементу div и далее к элементу body:

   Надо сказать, что подобное поведение не всегда является желательным. И в этом случае мы можем остановить распространение события с помощью метода stopPropagation() объекта Event:

   И в результате нажатия событие будет обработано только обработчиком для redRect.

   События также могут быть нисходящими (capturing). Для их использования в метод addEventListener() в качестве третьего необязательного параметра передается логическое значение true или false, которое указывает, будет ли событие нисходящим. По умолчанию все события восходящие.

   Возьмем ту же веб-станицу, только изменим ее код JavaScript:

   Теперь события будут распространяться в обратном порядке:

   События мыши

   Одну из наиболее часто используемых событий составляют события мыши:

   • click: возникает при нажатии указателем мыши на элемент
   • mousedown: возникает при нахождении указателя мыши на элементе, когда кнопка мыши находится в нажатом состоянии
   • mouseup: возникает при нахождении указателя мыши на элементе во время отпускания кнопки мыши
   • mouseover: возникает при вхождении указателя мыши в границы элемента
   • mousemove: возникает при прохождении указателя мыши над элементом
   • mouseout: возникает, когда указатель мыши выходит за пределы элемента

   Например, обработаем события mouseover и mouseout:

   Теперь при наведении указателя мыши на блок blueRect он будет окрашиваться в красный цвет, а при уходе указателя мыши — блок будет обратно окрашиваться в синий цвет.

   Объект Event является общим для всех событий. Однако для разных типов событий существуют также свои объекты событий, которые добавляют ряд своих свойств. Так, для работы с событиями указателя мыши определен объект MouseEvent, который добавляет следующие свойства:

   • altKey: возвращает true, если была нажата клавиша Alt во время генерации события
   • button: указывает, какая кнопка мыши была нажата
   • clientX: определяет координату Х окна браузера, на которой находился указатель мыши во время генерации события
   • clientY: определяет координату Y окна браузера, на которой находился указатель мыши во время генерации события
   • ctrlKey: возвращает true, если была нажата клавиша Ctrl во время генерации события
   • metaKey: возвращает true, если была нажата во время генерации события метаклавиша клавиатуры
   • relatedTarget: определяет вторичный источник возникновения события
   • screenX: определяет координату Х относительно верхнего левого угла экрана монитора, на которой находился указатель мыши во время генерации события
   • screenY: определяет координату Y относительно верхнего левого угла экрана монитора, на которой находился указатель мыши во время генерации события
   • shiftKey: возвращает true, если была нажата клавиша Shift во время генерации события

   Определим координаты клика:

   События клавиатуры

   Другим распространенным типом событий являются события клавиатуры:

   • keydown: возникает при нажатии клавиши клавиатуры и длится, пока нажата клавиша
   • keyup: возникает при отпускании клавиши клавиатуры
   • keypress: возникает при нажатии клавиши клавиатуры, но после события keydown и до события keyup. Надо учитывать, что данное событие генерируется только для тех клавиш, которые формируют вывод в виде символов, например, при печати символов. Нажатия на остальные клавиши, например, на Alt, не учитываются

   Для работы с событиями клавиатуры определен объект KeyboardEvent, который добавляет к свойствам объекта Event ряд специфичных для клавиатуры свойств:

   • altKey: возвращает true, если была нажата клавиша Alt во время генерации события
   • charCode: возвращает символ Unicode для нажатой клавиши (используется для события keypress)
   • keyCode: возвращает числовое представление нажатой клавиши клавиатуры
   • ctrlKey: возвращает true, если была нажата клавиша Ctrl во время генерации события
   • metaKey: возвращает true, если была нажата во время генерации события метаклавиша клавиатуры
   • shiftKey: возвращает true, если была нажата клавиша Shift во время генерации события

   Например, мы можем с помощью клавиш клавиатуры перемещать элемент на веб-странице:

   В данном случае обрабатывается событие keydown. В обработчике moveRect с помощью метода window.getComputedStyle() получаем стиль элемента blueRect. А затем из этого стиля выбираем значения свойств marginLeft и marginTop.

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

   Формы и их элементы

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

   Для создания формы используется элемент <form>:

   В JavaScript форма представлена объектом HtmlFormElement. И после создания формы мы можем к ней обратиться различными способами.

   Первый способ заключается в прямом обращении по имени формы:

   Второй способ состоит в обращении к коллекции форм документа и поиске в ней нужной формы:

   С помощью свойства name объекта формы мы можем получить значение атрибута name у соответствующего элемента формы в коде HTML.

   Еще один способ сочетает оба подхода:

   И также можно применять стандартные способы для поиска элемента формы, например, по id, по тегу или по селектору. Например:

   Форма имеет ряд свойств, из которых наиболее важными являются вышерассмотренное свойство name, а также свойство elements, которое содержит коллекцию элементов формы.

   Среди методов формы надо отметить метод submit(), который отправляет данные формы на сервер, и метод reset(), который очищает поля формы:

   Кнопки

   Для отправки введенных данных на форме используются кнопки. Для создания кнопки используется либо элемент button:

   Либо элемент input:

   С точки зрения функциональности в HTML эти элементы не совсем равноценны, но в данном случае они нас интересуют с точки зрения взаимодействия с кодом JavaScript.

   При нажатии на любой из этих двух вариантов кнопки происходит отправка формы по адресу, который указан у формы в атрибуте action, либо по адресу веб-страницы, если атрибут action не указан. Однако в коде JavaScript мы можем перехватить отправку, обрабатывая событие click:

   При нажатии на кнопку происходит событие click, и для его обработки к кнопке прикрепляем обработчик sendForm. В этом обработчике проверяем введенный в текстовое поле текст. Если его длина больше 5 символов, то выводим сообщение о недопустимой длине и прерываем обычный ход события с помощью вызова e.preventDefault(). В итоге форма не отправляется. Если же длина текста меньше шести символов, то также выводится сообщение, и затем форма отправляется.

   Текстовые поля

   Для ввода простейшей текстовой информации предназначен элемент input:

   Данный элемент поддерживает ряд событий, в частности:

   • focus: происходит при получении фокуса
   • blur: происходит при потере фокуса
   • change: происходит при изменении значения поля
   • select: происходит при выделении текста в текстовом поле
   • keydown: происходит при нажатии клавиши клавиатуры
   • keypress: происходит при нажатии клавиши клавиатуры для печатаемых символов
   • keyup: происходит при отпускании ранее нажатой клавиши клавиатуры

   Применим ряд событий:

   Здесь к текстовому полю прикрепляется три обработчика для событий blur, focus и change. Обработка события change позволяет сформировать что-то вроде привязки: при изменении текста весь текст отображается в блоке printBlock. Но надо учитывать, что событие change возникает не сразу после изменения текста, а после потери им фокуса. Обработка события потери фокуса blur позволяет провести валидацию введенного значения. Например, в данном случае если текст состоит из пробелов или не был введен, то окрашиваем границу поля в красный цвет.

   Для создания многострочных текстовых полей используется элемент textarea:

   Данный элемент генерирует все те же самые события, что и обычное текстовое поле:

   Здесь к текстовому полю прикрепляются обработчики для событий keypress и keydown.

   В обработчике keypress получаем введенный символ с помощью конвертации числового кода клавиши в строку:

   Затем символ добавляется к содержимому блока printBlock.

   Флажки и переключатели

   Флажки представляют поле, в которое можно поставить отметки и которое создается с помощью элемента <input type=»checkbox». Отличительную особенность флажка составляет свойство checked, которое в отмеченном состоянии принимает значение true:

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

   Переключатели представляют группы кнопок, из которых мы можем выбрать только одну. Переключатели создаются элементом <input type=»radio».

   Выбор или нажатие на одну из них также представляет событие click:

   При создании группы переключателей их атрибут name должен иметь одно и то же значение. В данном случае это — languages. То есть переключатели образуют группу languages. Поскольку переключателей может быть много, то при прикреплении к ним обработчика события нам надо пробежаться по всему массиву переключателей, который можно получить по имени группы.

   Список select

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

   Атрибут size позволяет установить, сколько элементов будут отображаться одномоментно в списке. Значение size=»1″ отображает только один элемент списка, а сам список становится выпадающим. Если установить у элемента select атрибут multiple, то в списке можно выбрать сразу несколько значений.

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

   В JavaScript элементу select соответствует объект HTMLSelectElement, а элементу option — объект HtmlOptionElement или просто Option.

   Все элементы списка в JavaScript доступны через коллекцию options. А каждый объект HtmlOptionElement имеет свойства: index (индекс в коллекции options), text (отображаемый текст) и value (значение элемента). Например, получим первый элемент списка и выведем о нем через его свойства всю информацию:

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

   Для добавления на форме предназначены два текстовых поля (для текстовой метки и значения элемента option) и кнопка. Для удаления выделенного элемента предназначена еще одна кнопка. За добавление в коде JavaScript отвечает функция addOption, в которой получаем введенные в текстовые поля значения, создаем новый объект Option и добавляем его в массив options объекта списка. За удаление отвечает функция removeOption, в которой просто получаем индекс выделенного элемента с помощью свойства selectedIndex и в коллекции options приравниваем по этому индексу значение null.

   Для добавления/удаления также в качестве альтернативы можно использовать методы элемента select:

   — События элемента select

   Элемент select поддерживает три события: blur (потеря фокуса), focus (получение фокуса) и change (изменение выделенного элемента в списке). Рассмотрим применение события select:

   JSON

   JSON (JavaScript Object Notation) представляет легковесный формат хранения данных. JSON описывает структуру и организацию данных JavaScript. Простота JSON привела к тому, что в настоящий момент он является наиболее популярным форматом передачи данных в среде web, вытеснив другой некогда популярный формат XML.

   Объекты JSON очень похожи на объекты JavaScript, тем более что JSON является подмножеством JavaScript. В то же время важно их различать: JavaScript является языком программирования, а JSON является форматом данных.

   JSON поддерживает три типа данных: примитивные значения, объекты и массивы. Примитивные значения представляют стандартные строки, числа, значение null, логические значения true и false.

   Объекты представляют набор простейших данных, других объектов и массивов. Например, типичный объект JSON:

   В JavaScript этому объекту соответствовал бы следующий:

   Несмотря на общее сходство, в то же время есть и различия: в JSON названия свойств заключаются в кавычки, как обычные строки. Кроме того, объекты JSON не могут хранить функции, переменные, как объекты JavaScript.

   Объекты могут быть сложными:

   Массивы в JSON похожи на массивы JavaScript и также могут хранить простейшие данные или объекты:

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

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

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

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

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

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

   Назначение обработчиков

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

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

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

   Через атрибут HTML-тега

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

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

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

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

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

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

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

   Когда использовать

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

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

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

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

   Через свойство объекта

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

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

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

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

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

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

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

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

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

   1. Только HTML:
   2. HTML + JS:

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

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

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

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

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

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

   Когда использовать

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

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

   1. Удобный и надежный способ, работает из javascript
   2. Только один обработчик на событие

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

   Специальные методы

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

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

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

   Решение Microsoft

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

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

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

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

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

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

   Установка по стандарту W3C

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

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

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

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

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

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

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

   Объект «событие» ( event )

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

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

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

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

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

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

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

   Internet Explorer

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

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

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

   Кросс-браузерное решение

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

   Получение события при inline-записи

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

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

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

   Что дает объект события?

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

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

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

   Порядок срабатывания событий

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

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

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

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

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

   Всплывающие события (Bubbling)

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

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

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

   Остановка всплытия

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

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

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

   Перехват событий (Capturing)

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

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

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

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

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

   Порядок обработки в стандарте W3C

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

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

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

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

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

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

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

   Действие браузера по умолчанию

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

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

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

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

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

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

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

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

   Смысл return false из обработчика

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

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

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

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

   Резюме

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   • onmouseover
   • onmousedown
   • onfocus
   • onclick

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   в html документе

   в javascript документе

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   Понятно что div c наследует событие от div c , и div c наследует событие от div c

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   Parse error: syntax error, unexpected ‘:’

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   function count_rabbits() <
   onclick=»this.style.value = «спасибо»
   >

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   Пробую следующий код:
   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?

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

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

   function setAttributes(element, attributes) <
   // doSomething
   >

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

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

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

   have a peek at these guys

   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.

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

   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!

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

   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

   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

   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.

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

   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

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

   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

   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.

   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.

   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.
   메이저토토

   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 .먹튀폴리스

   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.
   토토사이트

   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?
   선시티카지노도메인

   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.
   토토사이트

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

   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.

   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.
   안전놀이터

   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!
   다음드보증업체

   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.
   메이저토토사이트

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

   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. 토토커뮤니티

   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!

   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!

   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 .
   먹튀폴리스주소

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

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

   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

   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.

   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?

   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]

   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.

   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

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

   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.메이저사이트

   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.먹튀신고

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

   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.토토사이트

   Active cheat codes updated roblox codes 2023

   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.

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

   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.

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

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

   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.

   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.

   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

   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.

   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. 다바오홀덤

   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? 안전놀이터

   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.

   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? 스포츠토토사이트

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

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

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

   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, Business, Gadgets, Marketing and Apps related news. Our goal is to provide all the latest information to our audience. 먹튀검증

   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 (: 메이저사이트

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

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

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

   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.
   카지노알값

   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
   안전슬롯사이트

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

   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. 해외축구중계

   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메이저놀이터

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

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

   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.

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

   Похожие публикации:

   1. Где находится ворд на компьютере
   2. Как растянуть объект в фотошопе
   3. Как удалить имя ячейки в excel присвоенное
   4. Почему телевизор не видит внешний жесткий диск через usb