Событие в JavaScript. Какие бывают? Как добавлять и использовать? Блог 6.

События — это всевозможные действия в DOM HTML, которые можно отлавливать с помощью JavaScript и реагировать на них. Событие может инициализировать пользователь или браузер некоторыми действиями на веб странице. Например, пользователь может нажать на кнопку, а браузер загрузить картинку или страницу, это все события.

Самые часто используемые события:

1. События срабатывающие для окна в общем, чаще всего вешается на тег <body>.
  • onunload — это событие сработает если страница не загрузилась по какой то причине. Например, закрыли вкладку до того как страница полностью смогла бы загрузится.
  • onload — событие срабатывает, как только страница полностью загрузилась. Применимо не только к странице, к тегу <body>, но и к <frame>, <frameset>, <iframe>, <img>, <input type=»image»>, <link>, <script> и <style>.
  • onpageshow — то же самое что и событие onload. Но это событие срабатывает каждый раз при загрузке страницы, а onload не срабатывает если страница грузится из кэш памяти.
  • onbeforeunload — срабатывает перед тем как веб страница закроется. Но в обработчике события нельзя использовать всплывающие окна.
2. События формы.
  • onblur — срабатывает когда элемент теряет фокус. Поддерживают все HTML элементы кроме <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, и <title>.
  • onfocus — срабатывает в момент получения элементом фокуса. Поддерживают все HTML элементы кроме <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, и <title>.
  • onchange — когда значение элемента изменилось.
  • oncontextmenu — сработает если пользователь щелкнет правой кнопкой мыши на элементе и откроется контекстное меню.
  • oninvalid — если элемент не прошел валидацию, только для тега <input>.
  • onsubmit — возникает после отправки данных с формы, только для тега <form>.

 

3. События вызываемые клавиатурой.
  • onkeydown — событие происходящее при нажимании на кнопку(на клавиатуре). Для всех HTML тегов, кроме <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, и <title>.
  • onkeyup — срабатывает при отпускании кнопки на клавиатуре. Для всех HTML тегов, кроме <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, и <title>.
  • onkeypress — сработает если кнопка на клавиатуре сначала была нажата, а потом отпущена. Для всех HTML тегов, кроме <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, и <title>.
4. События вызываемые мышкой
  • onclick — срабатывает, если на элементе кликнуть один раз мышкой. Все теги кроме <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, и <title>.
  • onmousedown — возникает, когда на элементе нажимается кнопка мыши. Все теги кроме <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, и <title>.
  • onmouseup — возникает, когда на элементе отпускается нажатая кнопка мыши. Все теги кроме <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, и <title>.
    Последовательность событий когда кликается мышкой: сначала onmousedown, затем onmouseup, и последнее onclick.
  • ondblclick — возникнет при двойном клике мышкой. Все элементы кроме <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, и <title>.
  •  onmousemove — срабатывает при перемещении курсора мыши над элементом. Все элементы кроме <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, и <title>.
  • onmouseout — срабатывает, если курсор мыши был над элементом, а потом его убрали. Все элементы кроме <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, и <title>
5. События срабатывающие при перетаскивании элемента.
  • ondragstart — сработает, если элемент начинают перетаскивать. Для всех элементов.
  • ondrag — происходит, если элемент перетаскивают. Для всех элементов.
  • ondragend — возникает, если элемент уже перетащили. Для всех элементов.
  • ondrop — возникает, когда перетаскиваемый элемент отпускают, сбрасывают. Для всех элементов.
  • onscroll — возникает при прокручивании. Для <address>, <blockquote>, <body>, <caption>, <center>, <dd>, <dir>, <div>, <dl>, <dt>, <fieldset>, <form>, <h1> to <h6>, <html>, <li>, <menu>, <object>, <ol>, <p>, <pre>, <select>, <tbody>, <textarea>, <tfoot>, <thead>, <ul>.
6. События буфера обмена.
  • oncopy — возникает, когда пользователь копирует контент элемента. Для всех элементов.
  • oncut — возникает, когда пользователь вырезает контент элемента. Для всех элементов.
  • onpaste — возникает, когда пользователь вставляет контент в элемент. Для всех элементов.

 

Кроме описанных выше событий, существует еще огромное множество, связанных с AJAX, Media и т.д. Тут рассмотренны самые основные, остальное при необходимости можно найти в google.

Три основных способа добавить к элементу событие.

1. Использовать атрибут HTML-тега.

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

// например событие onclick
<input id="test1" value="OK" onclick="alert('Спасибо!');" type="button"/>

Посмотреть пример

Примечания к примеру:

  1. В примере в JavaScript создается функция sayHello. Далее в HTML в теге <body> прописываем атрибут onload, который сработает при загрузке странице, значением этого атрибута будет вызов функции sayHello.
  2. Так же как видно из примера с событиями onkeydown и onkeypress, на один тег можно вешать несколько событий стразу.
  3. Для событий перетаскивания элементов, нужно учесть, что если использовать чистый JavaScript без вспомогательных фреймверков, то чтобы сработало событие элемент нужно сначала выделить, активировать, а потом перетаскивать.
    Обходным путем может быть в этой ситуации атрибут draggable для перетаскиваемого элемента. Его нужно установить в true, тогда не нужно выделять элемент перед перетаскиванием.

 

2. Использовать свойство объекта.

Указание обработчика события прямо в элементе, в виде атрибута тега, не единственный способ добавить элементу событие. Можно не трогать HTML код вообще, и вести работу только на стороне JavaScript. Чтобы это сделать нужно в JavaScript получить элемент на который нужно повесить событие. У этого элемента будут свойства, они называются так же как атрибуты, которые прописывались в тегах. Нужному свойству прописывается значение, что должно произойти если событие сработает.
И так, как получить в JavaScript требуемый элемент? Когда веб страница загружается, браузер создает ее DOM модель (Document Object Model). Она становится объектом document. У этого объекта имеется много методов и свойств среди которых getElementById. С помощью его можно по id тега получить элемент.

 например тег
 <p id="test1">Text here</p>

в JavaScript этот элемент можно получить так 
var t1 = document.getElementById("test1");

По сути возвращается не просто элемент, а объект элемента, который тоже в свою очередь имеет свойства и методы. Среди множества свойств, у этого объекта есть события oncopy, onmousemove, onunload и т.д. Этим свойствам и присваивается реакция на события, но в тегах атрибут был равен чаще всего вызову функции, тут же мы должны написать функцию целиком.

 t1.onclick = function() { alert("Это тег <p>"); }

Или отдельно описать функцию и присвоить ее событию.

function sayHello() {
alert( 'Hello!' );
}
t1.onclick = sayHello;

Обратите внимание t1.onclick присваивается не вызов функции, а указатель на нее. Функция вызывается со скобками для аргументов sayHello(). Тут без скобок это означает, что присваиваем всю функцию целиком.

 

Посмотреть пример

Примечания к примеру:

  1.  JavaScript код, который добавляет событие к элементам, нужно писать после HTML тегов этих элементов, например в конце HTML страницы. Потому что, прежде чем обратится к объекту, он должен быть создан.
  2.  В примере для срабатывания события onload используется объект window. Это глобальный объект для javascript, который представляет открытое окно браузера. Он создается для каждого окна. Объект окна имеет множество свойств и методов, среди которых и события.

 

3.  Использовать специальные методы.

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

Посмотреть пример

У всех элементов на странице есть два метода addEventListener добавить событие и removeEventListener удалить событие. Добавление событий с помощью специальных методов это не кросс-браузерное решение. Браузер Internet Explorer использует два других метода attachEvent добавить, detachEvent удалить событие.

Установить событие для Internet Explorer:

element.attachEvent( имя_события, обработчик)
element.detachEvent( имя_события, обработчик)

Установить событие для других браузеров и Internet Explorer старше 8 версии:

element.addEventListener( имя_события, обработчик, фаза)
element.removeEventListener( имя_события, обработчик, фаза)

Параметр «имя_события» для Internet Explorer пишется с префиксом «on«, например «onclick«. Для всех остальных браузеров этот параметр употребляется без префикса «on«, например «click«. Параметр «обработчик«, это указатель на функцию, которая должна сработать при срабатывании события. Можно использовать и полностью функцию, но лучше этого не делать. Это связано с тем что для добавления и удаления должен использоваться один и тот же указатель на функцию.

Например:

Для Internet Explorer

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

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

el.addEventListener("keyup", sayHello);
el.addEventListener("keyup", sayHi);

Минус в том, что решение не кросс-браузерное, но это можно обойти таким кусочком кода:

Небольшой пример работы этого метода:

Посмотреть пример

Добавить комментарий