Как сделать событие в js

Добавил пользователь Владимир З.
Обновлено: 04.10.2024

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

Она пока никак не реагирует потому, что мы не повесили на нее никакого события. И давайте рассмотрим первый вариант.

Функция по нажатию кнопки в JavaScript

Событие по клику на кнопку мы создали, но можно сделать то же самое, только напишем функцию, с именем.

А к кнопке добавим эту функцию:

Вывод на страницу по клику на кнопку в JS

Соответственно по нажатию на кнопку в JavaScript можно делать не только всплывающий alert, но и все, что угодно, передавать данные на сервер, изменять элементы на странице, удалять, копировать и много чего еще. Давайте рассмотрим еще один пример. напишем небольшую функцию, которая будет срабатывать по клику и выводить на страницу случайное число. Для этого под кнопкой добавим элемент DIV с классом sum, в котором будем выводить результат работы JavaScript функции.

function randomSum(min, max)

Для кнопки добавим эту функцию по нажатию:

По нажатию на кнопку под ней будет выведено четырехзначное число от 1000 до 9999 в случайном порядке. Это мы указали в специальных параметрах min и max.

Нажатие правой кнопкой мыши в JS

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

Запрещаем вывод контекстного меню при клике правой кнопкой мыши:

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

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

Проблем с запуском 2-х функций в JS возникать не должно. Просто эти функции нужно написать отдельно. Возможно у вас какой-то конфликт в коде.

Имеется в виду есть 2 групы или более радио кнопок с возможностью выбора только одной кнопки в каждой группе по параметру value. Хотелось бы написать один код, в котором поставив чекбоксы в радио кнопках использовать их значениня value в этом коде дальше по нажатию кнопки РАССЧИТАТЬ. Каждая группа кнопок перебирается в цикле и определяется значение value одной и второй группы. На самом деле, записав оба цикла последовательно в коде не удаётся далье воспользоваться полученными значениями велью. Если радио кнопки не зависимые, тогда всё в порядке, а если с одним именем не получается.

Не совсем понял. Можно попробовать использовать this и написать один цикл.

Спасибо. Буду пробовать.

Всплывает модальное окно подписки и зависает. Дальше не реагирует.

Доброго времени суток! а как быть в случае когда надо на одной странице несколько раз выполнить одинаковый код обновление div-а с помощью Ajax?
Пример: есть страница строки/столбцы. В одном из столбцов (для каждой строки) есть номер и ттн. По нажатию на кнопку происходит отправка данных. php возвращает некий ответ. Этот ответ отображается в div под кнопкой отправки. Но такая конструкция срабатывает только один раз для первого элемента

Вам скорее всего нужен формат Json. Об этот я писал здесь.

Данные отправляются через эту конструкцию нормально. php тоже отрабатывает возвращая нужную строку. После в строке success результат от php присваивается некому div-у на странице. Но если это код повторить несколько раз на одной странице то все, которые ниже уже не работают (я так понимаю, что это из за уникальности id-шников)

Соответственно id должны быть разными.

Добрый день , Ребята кто может помочь за $ единоразово отредактировать javascript? Буду очень благодарен .!

Пожалуй, события (а точнее, обработчики событий) в javascript играют чуть ли не самую важную роль - именно благодаря обработке событий возможно интерактивное общение веб-приложения с пользователем. Изначально обработчики событий начал поддерживать браузер Netscape 2, следом IE3, и затем уже все остальные браузеры. В этом посте я начну рассказывать про события в js, в течение месяца постараюсь "добить" тему событий и приступить к более интересным вещам.

Способы установки обработчиков

Существуют четыре варианта "навешивания" обработчиков на определенное событие:

Стоит отметить, что ни в одной спецификации не сказано про наличие протокола javascript: , потому я и называю его "псевдопротоколом" (в то же время mailto: как раз описан).

Более того, WCAG говорит о том, что псевдопротокол javascript: использовать вообще нельзя, и в этом случае я с ними полностью согласен.

Однако авторы браузеров из соображений обратной совместимости продолжают поддерживать эту пакость, а колхозные веб-девелоперы продолжают пользоваться этой дрянью. Основное неудобство и контрпродуктивность такого подхода в том, что теряется сам смысл ссылки. Ведь со ссылкой можно сделать множество различных вещей - добавить в закладки, открыть в новом окне, распечатать содержимое, сохранить содержимое. Весь этот функционал теряется при использовании этого псевдопротокола. Вообще же этот способ не является полноценным методом установки обработчика события, потому что этот метод может быть примёнен только для элементов, имеющих атрибуты src/href.

addEventListener - специфицированный в DOM Level2 метод, attachEvent же встречается только в IE.

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

Но мы эти методы рассматривать не будем, т.к. до поддержки XML events самому популярному браузеру (IE) гораздо дальше, чем до поддержки событийной модели w3c, а script for нарушает принцип отделения логики от содержания (и работает только в IE).

Как Вы успели заметить, первая пара методов отличается от второй коренным образом - обработчики, определяемые в (x)html-документе, представляют собой последовательность javascript-команд, обработчик же, установленный в самом скрипте, обязан быть объектом типа "функция".

Также при использовании второй пары способов возникает одна проблема - если скрипт расположен в документе до элемента, событие которого будет обрабатывать какая-то функция из скрипта, велика вероятность того, что браузер попытается "навесить" обработчик на ещё несуществующий элемент. Такое может произойти, если браузер уже получил содержимое скрипта и распарсил его, но ещё не получил сам элемент в (x)html-документе. Это далеко не такая редкая ситуация, как может показаться - скрипты, вынесенные во внешние файлы, часто кэшируются, и несколько документов используют одни и те же скрипты, потому браузер часто берёт файлы скриптов из кэша, соответственно, сразу же исполняя их. Впрочем, скрипты, описанные внутри элемента head (x)html-документа, также будут исполнены сразу же, не дожидаясь полной загрузки (x)html-документа в память. Проблема эта решается просто - в структуре DOM, предоставляемой каждым браузером скриптам, есть объект window, имеющий кучу свойств, методов и событий, и одно из таких событий - window.onload . Это событие вызывается браузером после получения и парсинга всего (х)html-документа. Соответственно, в js наиболее безопасно работать с документом и его элементами после появления этого события.

Так как пример будет работать во всех браузерах в quirks mode, я имею полное право использовать document.all (к тому же, так ещё и IE4 будет поддержан). Цель примера исключительно иллюстрационная, потому кому нужен standarts compliancy mode, переделайте document.all['text'] на document.getElementById('text') .

Итак, мы выяснили, когда добавлять обработчики, договорились не использовать первые два метода (inline-описание и псевдопротокол javascript:). Теперь я подробнее остановлюсь на последних двух методах.

Метод установки element.onclick хорош тем, что прост. Основной же его минус заключается в том, что он не позволяет добавить обработчик, он даёт лишь возможность заменить существующий (если таковой был определён). Получается, что с помощью установки свойства onclick невозможно использовать несколько обработчиков на одном элементе, что иногда бывает нужно. Вообще, конечно, добавить можно и через onclick, только геморрой. Методы же addEventListener и attachEvent позволяют именно добавлять обработчики (для них существуют и соответствующие методы удаления обработчиков - removeEventListener и detachEvent).

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

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

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

В этом примере выполнится сначала handler1 , затем handler2 , потом handler3 .

Несмотря на то, что в msdn сказано, что обработчики, буде таких несколько на событии объекта, выполняются в рандомном порядке, опыт говорит, что они выполняются именно в FIFO-порядке.

Резюмируем:

Обработчики могут устанавливаться четырьмя основными способами: используя псевдопротокол javascript: , c помощью установки атрибута элемента в (x)html, устанавливая свойство объекта в javascript, используя специальные методы ( attachEvent для IE и addEventListener для реализующих стандарт DOM2 Events браузеров).

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

Использование специальных методов ( attachEvent / detachEvent и addEventListener / removeEventListener ) позволяют, в отличие от метода установки свойства объекта, добавлять и удалять обработчики событий (а не устанавливать единственный и отменять вовсе). Метод же установки свойства объекта наиболее прост в использовании, и там, где точно хватит одного обработчика события, будет более удобен.

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

Порядок запуска обработчиков события

Так как (x)html-документ имеет иерархическую древовидную структуру, разработчики браузеров посчитали, что "пропускание события" по всей иерархии документа даст б`ольшую свободу веб-разработчикам в реализации интересных обработчиков.

Итак, предположим, у нас есть следующий код:

Если нажать на p , запустится сначала обработчик pHandler , затем bodyHandler и уже потом docHandler .

Событийная модель, в которой браузер выстраивает очередь обработчиков от целевого элемента, инициировавшего событие до корневого элемента document , называется (bubble, англ., - пузырь).

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

Эта модель реализована в IE.

Если запустить этот пример в браузере Netscape4(с небольшими изменениями), обработчики будут выполнены в обратном порядке - docHandler → bodyHandler → divHandler .

Событийная модель, в которой браузер выстравивает очередь обработчиков от корневого элемента document до целевого элемента (инициировавшего событие), называется (capturing, англ., - захват). При прохождении каждого элемента вниз по иерархии браузер проверяет наличие обработчика события такого же типа, и если обработчик есть, вызывает его.

Эта модель появилась в браузере Netscape3 и со времен Netscape4 в диком виде не наблюдается.

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

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

Как я уже сказал, событийная модель w3c объединяет capturing и bubbling модели с небольшими изменениями. В стандарте w3c для установки обработчика события используется метод addEventListener. Он описан в интерфейсе EventTarget , который авторы браузеров обязаны реализовать для любого элемента.

Для нас сейчас существенно то, что третий параметр метода addEventListener ( useCapture ) - флаг, говорящий браузеру, на какой стадии прохождения события должен быть запущен добавляемый обработчик.

Реализующий w3c-модель браузер при появлении события сначала проходит по иерархии документа сверху вниз, как в capturing-модели , затем, когда добирается до целевого элемента, инициировавшего событие, исполняет его обработчик события и совершает путь снизу вверх по иерархии документа, как в bubbling-модели . В w3c-модели при обработке события выделяют capturing- и bubbling-фазы прохождения события.

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

Таким образом, любой элемент документа в w3c-модели (в отличие от IE bubbling model и NN4 capturing model) имеет два стэка для хранения обработчиков событий - для хранения обработчиков для capturing-стадии и для хранения обработчиков, назначенных на исполнение в bubbling-стадии.

Возьмём для примера следующий код:

Если нажать в приведённом примере на div , порядок выполения обработчиков должен быть следующим:

Я не забыл указать в capturing-фазе обработчики события, установленные на элемент div на исполнение в capturing-фазе ( div1Capturing , div2Capturing , div3Capturing ), они не должны быть запущены. Спецификация указывает, что обработчики событий, назначенные на capturing-фазу, должны выполняться только для родителей целевого элемента. В данном случае только Opera следует стандарту.

Этот баг в FF открыт уже 2 с половиной года, когда же будет решение, неизвестно.

При появлении события в соответствии с w3c-моделью браузер должен:

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

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

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

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

Фактически получается, что изменить порядок выполнения обработчиков можно только для обработчиков, назначенных на исполнение в bubbling-фазе и только из обработчиков, выполняющихся в capturing-фазе.

Резюмируем:

сочетает в себе обе модели. При возбуждении события браузер обходит документ сначала сверху вниз по иерархии (), при наличии выполняя обработчики события данного типа у каждого из предков целевого элемента; затем переходит к , при которой сначала запускаются обработчики целевого элемента, назначенные на , затем браузер идёт вверх по иерархии документа, запуская обработчики события данного типа (в случае наличия) у каждого следующего элемента в иерархии, достигая корневого элемента document , выполняя его обработчики события, назначенные на . Ещё раз акцентирую внимание: обработчики, назначенные на , не должны быть запущены на целевом элементе. Я думаю, баг в FF всё-таки исправят и этот браузер тоже начнет следовать стандарту.

Тема событий очень важная и очень интересная. Благодаря ей, можно делать очень много интересных вещей, от которых пользователь будет в восторге. Событие в JavaScript - это определённое действие, которые вызвано либо пользователем, либо браузером. Например, событием может быть клик мыши по кнопке, движение мыши, наведение фокуса на элемент, изменение значения в каком-нибудь текстовом поле, изменение размеров окна браузера и так далее.

Я подготовил таблицу со всеми событиями (которые я знаю, по крайней мере) в JavaScript. В ней Вы найдёте, во-первых, название события, элементы, которые могут генерировать это событие и описание самого события JavaScript.

Событие	Объект	Причина возникновения
Abort	Image	Прерывание загрузки изображения
Blur	Button, Checkbox, FileUpload, Frame, Layer, Password, Radio, Reset, Select, Submit, Text, Textarea, Window	Потеря фокуса элемента
Change	FileUpload, Select, Text, Textarea	Смена значения
Click	Area, Button, Checkbox, Document, Link, Radio, Reset, Submit	Клик мыши на элементе
DblClick	Area, Document, Link	Двойной клик на элементе
DragDrop	Window	Перемещение в окно браузера
Focus	Button, Checkbox, FileUpload, Frame, Layer, Password, Radio, Reset, Select, Submit, Text, Textarea, Window	Установка фокуса на элементе
KeyDown	Document, Image, Link, Textarea	Нажатие клавиши на клавиатуре
KeyPress	Document, Image, Link, Textarea	Удержание клавиши на клавиатуре
KeyUp	Document, Image, Link, Textarea	Отпускание клавиши на клавиатуре
Load	Document, Image, Layer, Window	Загрузка элемента
MouseDown	Button, Document, Link	Нажата кнопка мыши
MouseMove	Window	Мышь в движении
MouseOut	Area, Layer, Link	Мышь выходит за границы элемента
MouseOver	Area, Layer, Link	Мышь находится над элементом
MouseUp	Button, Document, Link	Отпущена кнопка мыши
Move	Frame	Перемещение элемента
Reset	Form	Сброс формы
Resize	Frame, Window	Изменение размеров
Select	Text, Textarea	Выделение текста
Submit	Form	Передача данных
Unload	Window	Выгрузка текущей страницы

Теперь разберёмся с тем, как использовать события в JavaScript. Существуют, так называемые, обработчики событий. Обработчики событий как раз и определяют, что будет происходить при возникновении определённого события. Обработчики событий в JavaScript имеет следующий общий вид:

То есть вначале идёт приставка "on", а дальше название события, например, такие обработчики событий: onFocus, onClick, onSubmit и так далее. Думаю, тут вопросов не возникло. А теперь главный вопрос: "Как использовать события в JavaScript?". Область их применения огромна, и мы сейчас с Вами рассмотрим одну задачку. На странице имеются три ссылки. Каждая из ссылок отвечает за разный цвет фона (допустим, белый, жёлтый и зелёный). Вначале фон белый. При наведении мыши на определённую ссылку цвет фона меняется. При отведении мыши цвет фона возвращается на цвет по умолчанию. При щелчке мыши по ссылке цвет фона сохраняется, как по умолчанию.

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

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

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

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

Обработчики и прослушиватели событий

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

Обработчик событий – это функция JavaScript, которая запускается при срабатывании события.

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

Существует три способа присвоения событий элементам:

Встроенные (inline) обработчики событий
Свойства обработчика событий
Прослушиватели событий

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

Inline-обработчики событий

Сначала рассмотрим обработчик событий inline. Начнем с очень простого примера, состоящего из элемента кнопки (button ) и элемента p. Мы хотим, чтобы пользователь нажал кнопку, чтобы изменить текстовое содержимое p.

Начнем с HTML-страницы с кнопкой в теле. Сошлитесь на файл JavaScript, в который вы добавите немного кода.

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