ГРУППА КУРСА
|
Обработка событий в JavaScriptЧто такое событие браузераВо время работы со страницей пользователь совершает различные действия: нажимает кнопки мыши, вводит текст на клавиатуре. Каждое такое действие - это событие браузера. Его можно отследить и выполнить определённые строки программы при их возникновении. Для этого в JavaScript есть обработчики событий. Кроме действий пользователя, существуют и другие события браузера, например полная загрузка страницы. Каждое событие имеет своё название. click - это нажатие левой кнопки мыши, keydown - нажатие клавиши, focus - появление в фокусе элемента формы, DOMContentLoaded - загрузка страницы. Обработка событияФункция, которая выполняется при срабатывании события называется обработчик события. Для каждого типа событий есть свой обработчик. Название обработчика состоит из слова on и названия события. Например, обработчик события click называется onclick. События происходят не на странице вообще, а на конкретном элементе. Соответственно и обработчик - это не отдельная функция. Обработчик ставится на какой-то элемент страницы. Есть разные способы назначить элементу обработчик события. Можно назначить обработчик через атрибут тэга. Код, который должен выполниться при срабатывании события, пишется в значении атрибута. Создадим страницу, добавим на неё кнопку и назначим ей обработчик события click: +
Запустите страницу, нажмите на кнопку, и выполнится код, записанный в значении атрибута. Обработчики событий являются свойствами DOM-объектов. В эти свойства можно записать функцию, и эта функция становится обработчиком события. Это самый распространённый способ установки обработчика. Добавим на страницу ещё одну кнопку и назначим ей обработчик через свойство: HTML код:
JavaScript:
Обратите внимание, функция присваивается свойству с помощью опрератора присваивания. Поэтому после функции должна быть точка с запятой. Иногда делают немного по-другому. Отдельно создают функцию, а потом присваивают её обработчику. Такой способ позволяет создать одну фунцкию для нескольких обработчиков. Добавим на страницу кнопку и назначим ей обработчик с помощью функции: HTML код:
JavaScript:
Когда функция присваивается обработчику, то после имени функции нет скобок. Если поставить скобки, то это будет не присваивание функции, а вызов на исполнение. Существует метод addEventListener(), который также назначает обработчик события элементу. Он считается более современным. Сейчас он применяется не часто, но в JavaScript есть новые события, обработать которые можно только с помощью этого метода. элемент.addEventListener (событие, функция) Параметры:
событие - событие, которое нужно обрабатывать функция - функция, которая становится обработчиком В параметрах данного метода название события пишется в кавычках и слово on перед ним писать не нужно. Пример: HTML код:
JavaScript:
Метод removeEventListener() позволяет удалить обработчик. элемент.removeEventListener (событие, функция) Назначение обработчика с помощью addEventListener() имеет одно важное отличие. Этот метод позволяет назначить элемену несколько обработчиков одного и того же события. Другими способами это сделать невозможно. Они просто перезапишут обработчик. Поэтому метод addEventListener() нужно применять к каким-то важным элементам страницы, с которыми могут работать разные скрипты. Ведь возможна ситуация, когда у элемента уже есть обработчик конкретного события. А вы хотите добавить ещё один. Если оба обработчика назначены через addEventListener(), то они оба сработают. И все скрипты выполнятся, как нужно. Объект событияПри каждом срабатывании события формируется объект события. Объект содержит информацию о событии. У разных типов событий разные объекты. Но существуют и свойства, которые есть у любого объекта. Например, свойство type содержит тип события. Объект события передаётся в качестве параметра в функцию-обработчик. Для доступа к объекту нужно в функции создать параметр. Через этот параметр и производится обращение к объекту. Если у функции есть ещё другие параметры, то объект события должен быть первым параметром. Изменим обработчик для кнопки, у которой id равно "button". Получим доступ к объекту события и выведем тип события. Теперь обработчик будет выглядеть так:
Нажмите на кнопку, будет выведен тип сработавшего события. У всех объектов события есть свойство currentTarget. Оно возвращает элемент, на котором сработало событие. Это может показаться бессмысленным. Ведь обработчик назначен конкретному элементу. Зачем ещё раз возвращать этот элемент? Но с событимяи браузера всё несколько сложнее. Чуть позже Вы узнаете, как это используется. Другие свойства мы рассмотрим при изучении конкретных событий. |