на какой html элемент можно назначить обработчик события submit
Обработчик или источник события submit
Материал из JQuery
Устанавливает функцию handler в качестве обработчика события submit, на выбранные элементы.
Метод является аналогом bind("submit", handler(eventObject)).
handler(eventObject) — функция, которая будет установлена в качестве обработчика. При вызове она будет получать объект события eventObject.
Метод отличается от предыдущего возможностью передавать в обработчик дополнительные данные.
Является аналогом bind("submit", eventData, handler(eventObject)).
handler(eventObject) — см. выше.
eventData — дополнительные данные, передаваемые в обработчик. Они должны быть представлены объектом в формате: .
Вызывает событие submit, у выбранных элементов страницы. Метод является аналогом trigger("submit").
Убрать установленный обработчик можно с помощью метода unbind().
Все три варианта использования метода, являются аналогами других методов (см. выше), поэтому все подробности использования submit(), можно найти в описании этих методов.
Событие submit происходит непосредственно перед отправкой формы на сервер и в обработчике можно инициировать отмену отправки формы, вызвав метод eventObject.preventDefault() или просто возвратив false.
В IE событие submit в отличие от других событий не обладает свойством "всплытия вверх по иерархии". Однако начиная с jQuery-1.4 эта недоработка устранена и обработчики события submit, установленные на элементы, которые лежат выше элемента формы по иерархии, будут оповещены о предстоящей отправке данных на сервер.
Введение в браузерные события
Событие – это сигнал от браузера о том, что что-то произошло. Все DOM-узлы подают такие сигналы (хотя события бывают и не только в DOM).
Вот список самых часто используемых DOM-событий, пока просто для ознакомления:
События мыши:
События на элементах управления:
Клавиатурные события:
События документа:
CSS events:
Существует множество других событий. Мы подробно разберём их в последующих главах.
Обработчики событий
Событию можно назначить обработчик, то есть функцию, которая сработает, как только событие произошло.
Именно благодаря обработчикам JavaScript-код может реагировать на действия пользователя.
Есть несколько способов назначить событию обработчик. Сейчас мы их рассмотрим, начиная с самого простого.
Использование атрибута HTML
Атрибут HTML-тега – не самое удобное место для написания большого количества кода, поэтому лучше создать отдельную JavaScript-функцию и вызвать её там.
Следующий пример по клику запускает функцию countRabbits() :
Использование свойства DOM-объекта
К примеру, elem.onclick :
Если обработчик задан через атрибут, то браузер читает HTML-разметку, создаёт новую функцию из содержимого атрибута и записывает в свойство.
Этот способ, по сути, аналогичен предыдущему.
Обработчик всегда хранится в свойстве DOM-объекта, а атрибут – лишь один из способов его инициализации.
Эти два примера кода работают одинаково:
В примере ниже назначение через JavaScript перезапишет обработчик из атрибута:
Кстати, обработчиком можно назначить и уже существующую функцию:
Доступ к элементу через this
Внутри обработчика события this ссылается на текущий элемент, то есть на тот, на котором, как говорят, «висит» (т.е. назначен) обработчик.
В коде ниже button выводит своё содержимое, используя this.innerHTML :
Частые ошибки
Если вы только начинаете работать с событиями, обратите внимание на следующие моменты.
…А вот в разметке, в отличие от свойства, скобки нужны:
Так что разметка генерирует такое свойство:
Используйте именно функции, а не строки.
Назначение обработчика строкой elem.onclick = "alert(1)" также сработает. Это сделано из соображений совместимости, но делать так не рекомендуется.
Не используйте setAttribute для обработчиков.
Такой вызов работать не будет:
Регистр DOM-свойства имеет значение.
addEventListener
Например, одна часть кода хочет при клике на кнопку делать её подсвеченной, а другая – выдавать сообщение.
Мы хотим назначить два обработчика для этого. Но новое DOM-свойство перезапишет предыдущее:
Синтаксис добавления обработчика:
Для удаления обработчика следует использовать removeEventListener :
Для удаления нужно передать именно ту функцию-обработчик которая была назначена.
Вот так не сработает:
Обработчик не будет удалён, т.к. в removeEventListener передана не та же функция, а другая, с одинаковым кодом, но это не важно.
Метод addEventListener позволяет добавлять несколько обработчиков на одно событие одного элемента, например:
Так что addEventListener более универсален. Хотя заметим, что таких событий меньшинство, это скорее исключение, чем правило.
Объект события
Чтобы хорошо обработать событие, могут понадобиться детали того, что произошло. Не просто «клик» или «нажатие клавиши», а также – какие координаты указателя мыши, какая клавиша нажата и так далее.
Когда происходит событие, браузер создаёт объект события, записывает в него детали и передаёт его в качестве аргумента функции-обработчику.
Пример ниже демонстрирует получение координат мыши из объекта события:
Некоторые свойства объекта event :
Есть также и ряд других свойств, в зависимости от типа событий, которые мы разберём в дальнейших главах.
Объект-обработчик: handleEvent
Мы также можем использовать класс для этого:
Метод handleEvent не обязательно должен выполнять всю работу сам. Он может вызывать другие методы, которые заточены под обработку конкретных типов событий, вот так:
Теперь обработка событий разделена по методам, что упрощает поддержку кода.
Итого
Есть три способа назначения обработчиков событий:
HTML-атрибуты используются редко потому, что JavaScript в HTML-теге выглядит немного странно. К тому же много кода там не напишешь.
DOM-свойства вполне можно использовать, но мы не можем назначить больше одного обработчика на один тип события. Во многих случаях с этим ограничением можно мириться.
Не важно, как вы назначаете обработчик – он получает объект события первым аргументом. Этот объект содержит подробности о том, что произошло.
Мы изучим больше о событиях и их типах в следующих главах.
Отправка данных формы: событие и метод submit
Отправка данных формы: событие и метод submit
Здравствуйте! В этом последнем уроке по работе с формами в JavaScript я хотел бы рассказать об отправке данных формы и конкретно об методе submit. Само событие submit появляется при отправке данных формы на сервер. И наиболее частое его применение – это валидация или просто проверка формы перед отправкой.
Метод submit позволяет отправить форму из JavaScript, без непосредственного участия пользователя. Далее давайте рассмотрим более детально.
Событие submit
Чтобы отправить форму на сервер, у посетителя есть два способа:
Какой бы способ ни выбрал посетитель – будет сгенерировано событие submit. Обработчик в нём может проверить данные и, если они неверны, то вывести ошибку и сделать event.preventDefault() – тогда форма не отправится на сервер.
Например, в таком HTML оба способа выведут alert, форма не будет отправлена:
При отправке формы путём нажатия Enter на текстовом поле, на элементе генерируется событие click.
Это довольно забавно, учитывая что клика-то и вовсе не было.
Метод submit
Чтобы отправить форму на сервер из JavaScript – нужно вызвать на элементе формы метод form.submit().
При этом само событие submit не будет происходить. Предполагается, что если вы вызываете метод form.submit(), то и все проверки тоже сделали.
Это можно использовать для искусственной генерации отправки формы на сервер.
Задания
Модальное диалоговое окно
Создайте функцию showprompt(text, callback), которая будет выводить форму для ввода с сообщением text и кнопками ОК/Отмена.
Проверка правильности заполнения полей формы
Напишите функцию valid(form), которая будет проверять содержимое формы по клику на кнопку «Проверить».
Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.