Події document javascript. Події JavaScript. Події onclick javaScript і три способи обробки подій

Це тест. Перевірка, перевірка, перевірка.

Події введення тексту

Браузер підтримує три старі події введення з клавіатури. Події keydown та keyup є низькорівневими подіями та розглядаються в наступному розділі. Однак подія keypressє високорівневим, що повідомляє, що було введено друкований символ.

Проект специфікації DOM Level 3 Events визначає більш узагальнену подію textinputгенерується у відповідь на введення тексту, незалежно від того, яким способом він був введений.

З пропонованим подією textinput і реалізованим в даний час подією textInput передається простий об'єкт події, що має властивість data, що зберігає введений текст. (Інша пропонована специфікацією властивість, inputMethod, повинна визначати джерело введення, але воно поки не реалізовано.) У разі введення з клавіатури властивість data зазвичай міститиме єдиний символ, але при введенні з інших джерел у ньому може міститися безліч символів.

Об'єкт події, що передається з подією keypress, має складнішу організацію. Подія keypress являє собою введення єдиного символу. Цей символ міститься в об'єкті події у вигляді числового значення кодового пункту Юнікоду і, щоб перетворити його на рядок, необхідно використовувати метод String.fromCharCode(). У більшості браузерів кодовий пункт символу зберігається у властивості keyCodeоб'єкт події. Однак з історичних причин у Firefox замість нього використовується властивість charCode.

У більшості браузерів подія keypress порушується тільки при введенні символу, що друкується. Однак у Firefox подія keypress порушується також для символів, що не друкуються. Щоб відрізнити ці два випадки (і проігнорувати символи, що не друкуються), можна перевірити, чи існує властивість charCode об'єкта події і чи містить вона значення 0.

Події textinput, textInput і keypress можна скасувати, щоб запобігти введенню символу. Тобто, ці події можна використовувати для фільтрації введення. Наприклад, можна запобігти введенню символів алфавіту в поле, призначене для введення числових даних.

У прикладі нижче демонструється модуль на мовою JavaScript, Що реалізує такого роду фільтрацію. Він шукає елементи із додатковим (нестандартним) атрибутом data-allowed-chars. Реєструє обробники подій textinput, textInput та keypress для всіх знайдених елементів та обмежує можливість введення символами регулярного вираження, заданими в атрибуті data-allowed-chars:

/* Фільтрування введення для елементів Цей модуль шукає всі елементи у документі, що мають атрибут "data-allowed-chars". Реєструє обробники подій keypress, textinput та textInput для цих елементів, щоб обмежити набір допустимих для введення символів, щоб дозволити вводити лише символи, вказані в атрибуті. Якщо елемент також має атрибут "data-messageid", значення атрибуту інтерпретується як id іншого елемента документа. Якщо користувач вводить неприпустимий символ, елемент із зазначеним id робиться видимим. Якщо користувач вводить допустимий символ, елемент із повідомленням ховається. Цей елемент з повідомленням призначається для виведення пояснень, чому введення користувача було відкинуто. Його оформлення необхідно реалізувати за допомогою CSS так, щоб він спочатку був невидимий. */ whenReady(function () ( // Викликає цю функцію, коли документ буде завантажений // Знайти всі елементи var inputelts = document.getElementsByTagName("input"); // Обійти їх у циклі for (var i = 0; i< inputelts.length; i++) { var elt = inputelts[i]; // Пропустить элементы, не являющиеся текстовыми полями ввода // и не имеющие атрибута data-allowed-chars if (elt.type != "text" || !elt.getAttribute("data-allowed-chars")) continue; // Зарегистрировать наш обработчик события в этом элементе input // keypress старое событие и реализовано во всех браузерах. // textInput поддерживается в Safari и Chrome с 2010 года. // textinput версия проекта стандарта "DOM Level 3 Events". if (elt.addEventListener) { elt.addEventListener("keypress", filter, false); elt.addEventListener("textInput", filter, false); elt.addEventListener("textinput", filter, false); } // textinput не поддерживается версиями IE, в которых не реализован // метод addEventListener() else { elt.attachEvent("onkeypress", filter); } } // Обработчик событий keypress и textInput, фильтрующий ввод пользователя function filter(event) { // Получить объект события и целевой элемент target var e = event || window.event; // Модель стандартная или IE var target = e.target || e.srcElement; // Модель стандартная или IE var text = null; // Введенный текст // Получить введенный символ или текст if (e.type === "textinput" || e.type === "textInput") text = e.data; else { // Это было событие keypress // Введенный печатаемый символ в Firefox сохраняется в свойстве charCode var code = e.charCode || e.keyCode; // Если была нажата какая либо функциональная клавиша, не фильтровать ее if (code < 32 || // Управляющий символ ASCII e.charCode == 0 || // Функциональная клавиша (в Firefox) e.ctrlKey || e.altKey) // Удерживаемая клавиша-модификатор return; // Не фильтровать это событие // Преобразовать код символа в строку var text = String.fromCharCode(code); } // Отыскать необходимую нам информацию в этом элементе input var allowed = target.getAttribute("data-allowed-chars"); // Допустимые символы var messageid = target.getAttribute("data-messageid"); // Сообщение id if (messageid) // Если указано значение id, получить элемент var messageElement = document.getElementById(messageid); // Обойти в цикле символы во введенном тексте for(var i = 0; i < text.length; i++) { var c = text.charAt(i); allowed = new RegExp(allowed, "i"); // Создаем регулярное выражение if (c.search(allowed) == -1) { // Недопустимый символ? // Отобразить элемент с сообщением, если указан if (messageElement) messageElement.style.visibility="visible"; // Отменить действия по умолчанию, чтобы предотвратить вставку текста if (e.preventDefault) e.preventDefault(); if (e.returnValue) e.returnValue = false; return false; } } // Если все символы оказались допустимыми, скрыть элемент // с сообщением, если он был указан if (messageElement) messageElement.style.visibility = "hidden"; } });

Нижче показаний зразок розмітки HTML, який використовує цей модуль:

На малюнку нижче показано використання цієї форми. Тут після введення імені я вставив цифру, яка була автоматично заблокована і з'явилося попереджувальне повідомлення:

Події keypress і textinput генеруються безпосередньо перед фактичною вставкою нового тексту в елемент документа, що має фокус введення, завдяки чому обробники цих подій можуть запобігти вставці тексту, скасувавши подію.

Браузери також реалізують подію input, що збуджується після вставлення тексту в елемент. Цю подію не можна скасувати і відповідний об'єкт події не містить інформації про вставлений текст - вона просто повідомляє про те, що текстовий вміст елемента змінилося. Якщо, наприклад, потрібно забезпечити введення лише символів у верхньому регістрі, можна визначити обробник події input, як показано нижче:

Подія input стандартизована у специфікації HTML5 і підтримується всіма сучасними браузерамикрім IE. Схожого ефекту в IE можна досягти, виявляючи зміну значення властивості value текстового елемента введення за допомогою нестандартної події propertychange.

Події клавіатури

Події keydownі keyupзбуджуються, коли користувач натискає чи відпускає клавішу на клавіатурі. Вони генеруються для кнопок-модифікаторів, функціональних кнопок і алфавітно-цифрових кнопок. Якщо користувач утримує клавішу натиснутою настільки довго, що вмикається режим автоповтору, буде згенеровано безліч подій keydown, перш ніж з'явиться подія keyup.

Об'єкт події, що відповідає цим подіям, має властивість keyCodeіз числовим значенням, яке визначає натиснуту клавішу. Для клавіш, що генерують друковані символи, у випадку властивість keyCode містить кодовий пункт Юнікоду, відповідний основному символу, зображеному на кнопці. Клавіші з літерами завжди генерують значення keyCode, що відповідають символам у верхньому регістрі, незалежно від стану клавіш Shift, оскільки саме такі символи зображені на клавішах.

Аналогічно цифрові клавіші завжди генерують значення keyCode, що відповідають цифровим символам, зображеним на клавішах, навіть якщо при цьому ви утримували натиснутою клавішу Shift, щоб ввести розділовий знак. Для клавіш, що не відповідають друкованим символам, властивість keyCode матиме деяке інше значення. Ці значення властивості keyCode ніколи не були стандартизовані. Однак у різних браузерахвони відрізняються не так сильно, щоб не можна було забезпечити переносимість.

Подібно до об'єктів подій миші, об'єкти подій клавіатури мають властивості altKey, ctrlKey, metaKeyі shiftKey, які набувають значення true, якщо в момент виникнення події утримувалася відповідна клавіша-модифікатор.

Події keydown та keyup, а також властивість keyCode використовуються вже більше десяти років, але вони так і не були стандартизовані. Проект стандарту DOM Level 3 Events стандартизує типи keydown та keyup подій, але не стандартизує властивість keyCode. Натомість він визначає нову властивість key, яка повинна містити назву клавіші у вигляді рядка. Якщо клавіша відповідає символу друку, властивість key повинна містити цей символ. Для функціональних клавіш властивість key повинна мати такі значення, як F2, Home або Left.

На момент написання цих рядків властивість key, що визначається стандартом DOM Level 3 Events, ще не було реалізовано в жодному браузері. Проте браузери на базі механізму Webkit, Safari та Chrome визначають в об'єктах цих подій властивість keyIdentifier. Для функціональних клавіш, подібно до властивості key, властивість keyIdentifier містить не число, а рядок з ім'ям клавіші, таким як Shift або Enter. Для клавіш, що відповідають символам друку, ця властивість містить менш зручне у використанні рядкове представлення кодового пункту Юнікоду символу. Наприклад, клавіші A відповідає значення U+0041.

Нижче наведено клас Keymap, який відображає ідентифікатори комбінацій клавіш, такі як PageUp, Alt_Z і ctrl+alt+shift+F5 у функції на мові JavaScript, що викликаються у відповідь на натискання цих комбінацій. Визначення прив'язок клавіш передаються конструктору Keymap() у формі об'єкта JavaScript, імена властивостей якого відповідають ідентифікаторам комбінацій клавіш, а значення цих властивостей містять посилання функції-обробники. Додавання та видалення прив'язок здійснюється за допомогою методів bind() та unbind().

Встановлюється об'єкт Keymap в HTML-елемент (зазвичай об'єкт Document) з допомогою методу install(). Під час встановлення об'єкта Keymap у цьому елементі реєструється обробник події keydown. Щоразу, коли натискається клавіша, обробник перевіряє наявність функції, що відповідає цій комбінації. Якщо функція є, вона викликається.

Обробник події keydown використовує властивість key, що визначається стандартом DOM Level 3 Events, якщо вона існує. В іншому випадку він намагається використовувати Webkit-властивість keyIdentifier. І як запасний варіант, обробник використовує нестандартну властивість keyCode:

// Функція конструктор function Keymap(bindings) ( this.map = (); // Визначити відображення ідентифікатор->обробник if (bindings) ( // Скопіювати в нього початкову карту прив'язок for(name in bindings) this.bind(name, bindings);))) // Зв'язує зазначений ідентифікатор клавіші із зазначеною функцією обробником Keymap.prototype.bind = function(key, func) (this.map = func;); // Видаляє прив'язку для вказаного ідентифікатора клавіші Keymap.prototype.unbind = function(key) (delete this.map;); // Встановлює цей об'єкт Keymap у вказаний HTML-елемент Keymap.prototype.install = function(element) ( var keymap = this; // Визначити функції обробника події function handler(event) ( return keymap.dispatch(event, element); ) // Встановити її if (element.addEventListener) element.addEventListener("keydown", handler, false);else if (element.attachEvent) element.attachEvent("onkeydown", handler); // Цей метод делегує обробку події клавіатури, спираючись на прив'язки Keymap.prototype.dispatch = function(event, element) ( // Спочатку немає імен клавіш-модифікаторів, ні імені клавіші var modifiers = ""; var keyname = null; / / Сконструювати рядки модифікаторів у канонічному вигляді із символів // у нижньому регістрі, розташувавши їх в алфавітному порядку if (event.altKey) modifiers += "alt_"; .metaKey) modifiers += "meta_"; if (event.shiftKey) modifiers += "shift_"; // Ім'я клавіші легко отримати, якщо реалізовано властивість key, // визначається стандартом DOM Level 3: if (event.key) keyname = event.key;// Для отримання імен функціональних клавіш в Safari і Chrome можна // використовувати властивість keyIdentifier else if(event.keyIdentifier && event.keyIdentifier.substring(0,2) !== "U+") keyname = event. keyIdentifier;// В іншому випадку можна використовувати властивість keyCode // і відображення коду > ім'я нижче else ke yname = Keymap.keyCodeToKeyName; // Якщо ім'я клавіші вдалося визначити, просто проігнорувати подію // і повернути управління. if (!keyname) return; // Канонічний ідентифікатор клавіші складається з імен модифікаторів // та імені клавіші в нижньому регістрі var keyid = modifiers + keyname.toLowerCase(); // Перевірити, чи є прив'язка даного ідентифікатора клавіші var handler = this.map; if (handler) ( // Якщо обробник для цієї клавіші, викликати його // Викликати функцію обробник var retval = handler.call(element, event, keyid); // Якщо обробник повернув false, скасувати дії за замовчуванням // і перервати спливання події if (retval === false) ( if (event.stopPropagation) event.stopPropagation(); // модель DOM else event.cancelBubble = true; // модель IE if (event.preventDefault) event.preventDefault(); / / DOM else event.returnValue = false; // IE) // Повернути значення, отримане від обробника return retval;))); // Допоміжна функція перетворення ідентифікатора клавіші на канонічну форму. // Нам необхідно перетворити ідентифікатор "meta" на "ctrl", щоб перетворити // ідентифікатор Meta-C на "Command-C" на комп'ютерах Macі "Ctrl-C" на всіх інших. Keymap.normalize = function(keyid) ( keyid = keyid.toLowerCase(); // У нижній регістр var words = keyid.split(/\s+|[\-+_]/); // Вичленувати модифікатори var keyname = words .pop();// keyname - останнє слово keyname = Keymap.aliases ||keyname;// Це псевдонім?words.sort(); .join("_"); // Об'єднати всі разом ) Keymap.aliases = ( // Відображення звичних псевдонімів клавіш у них // "офіційні" імена, що використовуються в DOM Level 3, і відображення кодів клавіш // в імена нижче. Ім'я та значення повинні складатися тільки із символів нижнього регістру "escape":"esc", "return":"enter", "delete":"del", "ctrl":"control", "space":"spacebar", "ins":"insert"); // Стара властивість keyCode об'єкта події keydown не стандартизована // Але наступні значення успішно можуть використовуватися в більшості браузерів і ОС. Keymap.keyCodeToKeyName = ( // Клавіші зі словами або стрілками на них 8: "Backspace", 9: "Tab", 13: "Enter", 16: "Shift", 17: "Control", 18: "Alt", 19: "Pause", 20: "CapsLock", 27: "Esc", 32: "Spacebar", 33: "PageUp", 34: "PageDown", 35: "End", 36: "Home", 37: "Left", 38: "Up", 39: "Right", 40: "Down", 45: "Insert", 46: "Del", // Цифрові клавіші на основній клавіатурі (не на додатковій) 48: "0 ",49:"1",50:"2",51:"3",52:"4",53:"5",54:"6",55:"7",56:"8", 57:"9", // Літерні клавіші. Зверніть увагу, що тут не розрізняються // символи верхнього та нижнього регістрів 65:"A", 66:"B", 67:"C", 68:"D", 69 : "E", 70: "F", 71: "G", 72: "H", 73: "I", 74: "J", 75: "K", 76: "L", 77:" M", 78: "N", 79: "O", 80: "P", 81: "Q", 82: "R", 83: "S", 84: "T", 85: "U" , 86:"V", 87:"W", 88:"X", 89:"Y", 90:"Z", // Цифрові клавіші на додатковій клавіатурі та клавіші зі розділовими знаками.// (Не підтримуються в Opera.) 96:"0",97:"1",98:"2",99:"3",100:"4",101:"5",102:"6",103:"7" ,104:"8", 105:"9",106:"Multiply", 107:"Add", 109:"S ubtract", 110:"Decimal", 111:"Divide", // Функціональні клавіші 112: F1, 113: F2, 114: F3, 115: F4, 116: F5, 117: F6, 118: F7, 119: F8, 120: "F9", 121: "F10", 122: "F11", 123: "F13", 125: "F14", 126: "F15", 127: "F16", 128: "F17" ", 129:"F18", 130:"F19", 131:"F20", 132:"F22", 134:"F23", 135:"F24", // Клавіші зі розділовими знаками для введення яких не потрібно // утримувати клавішу Shift. // Дефіс не може використовуватися таким способом, що переноситься: FF повертає // той же код, що і для клавіші Subtract 59:";", 61:"=", 186:";", 187:"=", // Firefox і Opera повертають 59,61 188:",", 190:".", 191:"/", 192:"`", 219:"[", 220:"\", 221:"]", 222: """);

Нижче наведено приклад використання об'єкта Keymap:

Window.onload = function() ( var keymap = new Keymap; // Створити новий об'єкт Keymap keymap.bind("ctrl+a", // Комбінація Ctrl+A function(event, keyid) ( alert("Ви натиснули: " + keyid) ));// Ще одна прив'язка Ctrl + Enter keymap.bind("ctrl+enter", function(event, keyid) (alert("Ви натиснули:" + keyid) ));keymap.install(document. body);// Встановлюємо об'єкт Keymap для всього документа);

Тема подій дуже важлива та дуже цікава. Завдяки їй можна робити дуже багато цікавих речей, від яких користувач буде в захваті. Подія у JavaScript- це певна дія, яка викликана або користувачем, або браузером. Наприклад, подією може бути клік миші по кнопці, рух миші, наведення фокусу на елемент, зміна значення в якомусь текстовому полі, зміна розмірів вікна браузера і таке інше.

Я підготував таблицю з усіма подіями (які я знаю, принаймні) у JavaScript. У ній Ви знайдете, по-перше, назву події, елементи, які можуть генерувати цю подію та опис самого події JavaScript.

Тепер розберемося з тим, як використовувати події у JavaScript. Існують так звані, обробники подій. Обробники подійтаки визначають, що відбуватиметься при виникненні певної події. Обробники подій у JavaScriptмає такий загальний вигляд:

OnНазваПодії

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

Білий
Жовтий
Зелений

Давайте розберемося із цим скриптом, а точніше з уже цілою HTML-сторінкоюз підтримкою JavaScriptі CSS(іншими словами, це приклад DHTML). Спочатку йдуть звичайні HTML-теги, з яких починається будь-яка HTML-сторінка. Далі ми створюємо стиль, в якому вимагаємо, щоб усі посилання на даній сторінці були синього кольору, підкреслені, і щоб вказівник миші на них був у вигляді "Pointer". Ви, можливо, скажіть: "А навіщо потрібно ставити стиль? Адже посилання і так точно такими ж і будуть". Правильно, посилання, але у нас посилань як таких немає (адже немає атрибуту hrefу тезі), тому вони будуть простим чорним текстом за умовчанням (щоправда, клацати по тексту теж можна). Тому стиль обов'язковий. Ви можете його прибрати та подивитися, що буде. А ще краще, поставте атрибут href(З будь-яким значенням, хоч порожнім) і поясніть, чому скрипт перестав працювати. Далі вже починається JavaScript. Ми створюємо змінну default_color, що відповідає за колір за промовчанням. Далі три функції:

Функція setTempColor()відповідає за тимчасову зміну кольору.

Функція setDefaultColor()відповідає за зміну кольору за промовчанням.

Функція defaultColor()встановлює колір тла за промовчанням.

Потім йдуть посилання з атрибутами у вигляді обробників подій. При наведенні мишки на посилання виникає подія MouseOverвідповідно, обробник події onMouseOverвикликає функцію setTempColor()та передає відповідний параметр. При знятті мишки з елемента виникає подія MouseOut, а далі викликається функція defaultColor(), яка робить колір тла колір за замовчуванням. І, нарешті, при натисканні мишки за посиланням ( обробник onClick) викликається функція setDefaultColor(), яка встановлює колір, заданий у параметрі кольором фону за замовчуванням. Як бачите, все досить просто.

Це був принцип використання подій у JavaScript, а далі все залежить лише від Вашої фантазії!

Обробка подій

Клієнтські програми на мові JavaScript засновані на моделі програмування, коли виконання програми керується подіями. У такому стилі програмування веб-браузер генерує подію, коли з документом чи деяким його елементом щось відбувається. Наприклад, веб-браузер генерує подію, коли завершує завантаження документа, коли користувач наводить вказівник на гіперпосилання або натискає клавішу на клавіатурі.

Якщо JavaScript-додаток цікавить певний тип події для певного елемента документа, він може зареєструвати одну або більше функцій, які будуть викликатися при виникненні цієї події. Майте на увазі, що це не є унікальною особливістю веб-програмування: всі програми з графічним інтерфейсомкористувача діють саме таким чином - вони постійно чекають, поки щось станеться (тобто чекають на події), і відгукуються на те, що відбувається.

Тип події- Це рядок, що визначає тип дії, що спричинив подію. Тип "mousemove", наприклад, означає, що користувач перемістив покажчик миші. Тип "keydown" означає, що була натиснута клавіша на клавіатурі. А тип «load» означає, що завершилося завантаження документа (або іншого ресурсу) з мережі. Оскільки тип події – це просто рядок, його іноді називають іменем події.

Мета події- це об'єкт, у якому виникла подія чи з яким ця подія пов'язана. Коли говорять про подію, зазвичай згадують тип і мету події. Наприклад, подія "load" об'єкта Window або подія "click" елемента . Найбільш типовими цілями подій у клієнтських програмах на мові JavaScript є об'єкти Window, Document та Element, але деякі типи подій можуть відбуватися і в інших типах об'єктів.

Обробник події- це функція, що обробляє, чи відгукується подія. Програми повинні зареєструвати свої функції обробників подій у веб-браузері, вказавши тип події та ціль. Коли у вказаному цільовому об'єкті виникне подія вказаного типу, браузер викличе обробник. Коли обробники подій викликаються для якогось об'єкта, ми іноді говоримо, що браузер «порушив» або «згенерував» подію.

Об'єкт події- це об'єкт, пов'язаний з певною подією та містить інформацію про цю подію. Об'єкти подій передаються функції обробника події як аргументу (крім IE8 і більше ранніх версійде об'єкт події доступний тільки у вигляді глобальної змінної event). Усі об'єкти подій мають властивість type, що визначає тип події, та властивість target, Що визначає мету події.

Для кожного типу події в пов'язаному об'єктіподії визначається набір властивостей. Наприклад, об'єкт, пов'язаний з подіями від миші, включає координати покажчика миші, а об'єкт, пов'язаний з подіями від клавіатури, містить інформацію про натиснуту клавішу і про натиснені клавіші-модифікатори. Для багатьох типів подій визначаються лише стандартні властивості, такі як type та target, і не передається ніякої додаткової корисної інформації. Для таких типів подій важлива сама наявність події, і жодна інша інформація не має значення.

Поширення події- це процес, під час якого браузер вирішує, у яких об'єктах слід викликати обробники подій. У разі подій, призначених для єдиного об'єкта (таких як подія "load" об'єкта Window), потреба в їх поширенні відсутня. Однак, коли певна подія виникає в елементі документа, вона поширюється, або спливає, вгору по дереву документа.

Якщо користувач клацне мишею на гіперпосиланні, подія "mousemove" спочатку буде порушена в елементі , Що визначає це посилання. Потім воно буде доставлене елементам, що вміщають: можливо, елементу

Елементу

та самому об'єкту Document. Іноді зручніше буває зареєструвати єдиний обробник події в об'єкті Document або в іншому контейнерному елементі, ніж виконувати реєстрацію у всіх елементах, що нас цікавлять.

Давши визначення деяким термінам, можна перейти до вивчення питань, пов'язаних із подіями та їх обробкою.

Реєстрація обробників подій

Існує два основні способи реєстрації обробників подій. Перший, що з'явився на ранньому етапі розвитку Всесвітньої павутини, полягає у встановленні якості об'єкта або елемента документа, що є метою події. Другий спосіб, новий і більш універсальний, полягає у передачі оброблювача методу об'єкта чи елемента.

Справа ускладнюється тим, що кожен прийом має дві версії. Властивість обробника події можна встановити в програмному коді мовою JavaScript або елемент документа, визначивши відповідний атрибут безпосередньо в розмітці HTML. Реєстрація обробників викликом методу може бути виконана стандартним методом з ім'ям addEventListener(), який підтримується всіма браузерами, крім IE версії 8 і нижче, та іншим методом, з ім'ям attachEvent(), що підтримується всіма версіями IE до IE9.

Встановлення властивостей обробників подій

Найпростіший спосіб зареєструвати обробник події полягає в тому, щоб привласнити цільового об'єкта події бажану функцію обробника. За згодою властивості обробників подій мають імена, що складаються зі слова «on», за яким слідує ім'я події: onclick, onchange, onload, onmouseover і т.д. Зверніть увагу, що ці імена властивостей чутливі до регістру і в них використовуються лише малі символи, навіть коли ім'я типу події складається з декількох слів (наприклад, «readystatechange»). Нижче наведено два приклади реєстрації обробників подій:

// Присвоїти функцію властивості onload об'єкта Window. // Функція - обробник події: вона викликається, коли документ буде завантажений window.onload = function() ( // Знайти елемент

var elt = document.getElementById("shipping_address"); // Зареєструвати обробник події, який буде викликатися // безпосередньо перед відправкою форми elt.onsubmit = function() ( return validate(this); ) )

Такий спосіб реєстрації обробників подій підтримується у всіх браузерах для всіх типів подій, що часто використовуються. Взагалі кажучи, всі прикладні інтерфейси, що отримали широку підтримку, що визначають свої події, дозволяють реєструвати обробники установкою властивостей обробників подій.

Недолік використання властивостей обробників подій у тому, що вони проектувалися у припущенні, що цілі подій матимуть трохи більше одного оброблювача кожного типу подій. При створенні бібліотеки для використання в довільних документах для реєстрації обробників краще використовувати прийом (такий як виклик методу addEventListener()), який не змінює і не затирає раніше зареєстровані обробники.

Встановлення атрибутів обробників подій

Властивості обробників подій в елементах документа також можна встановлювати, визначаючи значення атрибутів у відповідних HTML-тегах. У цьому випадку значення атрибута має бути рядком програмного коду на JavaScript. Цей програмний код повинен бути повним оголошенням функції обробника події, лише її тілом. Тобто реалізація обробника події в розмітці HTML не повинна полягати у фігурні дужки та передувати ключовим словом function. Наприклад:

Якщо значення HTML-атрибута обробника події складається з кількох JavaScript-інструкцій, вони повинні відокремлюватись крапками з комою або значення атрибута повинно розташовуватися в декількох рядках.

Деякі типи подій призначені для браузера загалом, а чи не для якогось конкретного елемента документа. Обробники таких подій у JavaScript реєструються в об'єкті Window. У розмітці HTML вони повинні поміщатися у тег , але браузер зареєструє їх у об'єкті Window. Нижче наведено повний список таких обробників подій, що визначаються проектом специфікації HTML5:

назаписі нафокусі on-line onresize onbeforeprint onhashchange onpagehide onstorage onbeforeunload onload onpageshow onundo onblur onmessage onpopstate onunload onerror onoffline onredo

При розробці клієнтських сценаріїв зазвичай прийнято відокремлювати розмітку HTML від програмного коду мовою JavaScript. Програмісти, які дотримуються цього правила, уникають (або принаймні намагаються уникати) використовувати HTML-атрибути обробників подій, щоб не змішувати програмний код мовою JavaScript та розмітку HTML.

addEventListener()

У стандартній моделі подій, що підтримується всіма браузерами, крім IE версії 8 і нижче, метою події може бути будь-який об'єкт – включаючи об'єкти Window та Document та всі об'єкти Elements елементів документа – визначальний метод з ім'ям addEventListener(), за допомогою якого можна реєструвати обробники подій для цього.

Метод addEventListener() приймає три аргументи. Перший - тип події, для якого реєструється обробник. Тип (або ім'я) події повинен бути рядком і не повинен включати префікс on, що використовується при встановленні властивостей обробників подій. Другим аргументом методу addEventListener() передається функція, яка має викликатися у разі події зазначеного типу. В останньому аргументі метод addEventListener() передається логічне значення. Зазвичай, у цьому аргументі передається значення false. Якщо передати в ньому значення true, функція буде зареєстрована як перехоплюючий обробник і буде викликатись в іншій фазі поширення події.

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

Наступний фрагмент реєструє два обробники події "click" в елементі

. Зверніть увагу на відмінності двох прийомів:

Клацніть мене!

Виклик методу addEventListener() з рядком «click» у першому аргументі не впливає значення властивості onclick. У наведеному вище фрагменті клацання на кнопці приведе до висновку двох діалогових вікон alert(). Але важливіше те, що метод addEventListener() можна викликати кілька разів і зареєструвати з його допомогою кілька функцій-обробників для одного і того ж типу події в тому самому об'єкті. При появі події в об'єкті будуть викликані всі обробники, зареєстровані для цього типу події, у порядку їх реєстрації.

Багаторазовий виклик методу addEventListener() для одного і того ж об'єкта з тими самими аргументами не дає жодного ефекту - функція-обробник реєструється лише один раз і повторні виклики не впливають на порядок виклику обробників.

Парним до методу addEventListener() є метод removeEventListener()що приймає ті ж три аргументи, але не додає, а видаляє функцію-обробник з об'єкта. Це часто буває зручно, коли необхідно зареєструвати тимчасовий обробник події, а потім видалити його в якийсь момент.

Internet Explorer версіїнижче IE9 не підтримує методи addEventListener() та removeEventListener(). У версії IE5 і вище визначено схожі методи, attachEvent()і detachEvent(). Оскільки модель подій в IE не підтримує фазу перехоплення, методи attachEvent() і detachEvent() приймають лише два аргументи: тип події та функцію обробника, при цьому в першому аргументі методам в IE передається ім'я властивості обробника з префіксом on, а не тип події без цього префіксу.

Виклик обробників подій

Після реєстрації обробника подій веб-браузер буде викликати його автоматично, коли у вказаному об'єкті виникатиме подія вказаного типу. У цьому розділі докладно описується порядок виклику оброблювачів подій, аргументи оброблювачів, контекст виклику (значення this) та призначення значення оброблювача, що повертається. На жаль, деякі з цих подробиць відрізняються між IE версії 8 та нижче та іншими браузерами.

Аргумент оброблювача подій

При викликі оброблювача подій йому зазвичай (за одним винятком, про який розповідається нижче) передається об'єкт події як єдиний аргумент. Властивості об'єкта події містять додаткову інформацію про подію. Властивість type, наприклад, визначає тип події, що виникла.

У IE версії 8 і нижче обробникам подій, зареєстрованим установкою властивості, об'єкт події під час виклику не передається. Натомість об'єкт події зберігається в глобальній змінній window.event. Для перенесення обробники подій можна оформляти, як показано нижче, щоб вони використовували змінну window.event при виклику без аргументу:

Об'єкт події передається обробникам подій, зареєстрованим за допомогою методу attachEvent(), але також можуть використовувати змінну window.event.

Під час реєстрації обробника події за допомогою HTML-атрибута браузер перетворює рядок з програмним кодом на мову JavaScript на функцію. Браузери, відмінні від IE, створюють функцію з єдиним аргументом event. У IE створюється функція, яка не приймає аргументів. Якщо в таких функціях використовувати ідентифікатор event, він посилатиметься на window.event. У будь-якому випадку обробники подій, які визначаються в розмітці HTML, можуть посилатися на об'єкт події, використовуючи ідентифікатор event.

Контекст обробників подій

Коли обробник подій реєструється установкою якості, це виглядає як визначення нового способу елемента документа:

E.onclick = function() ( /* реалізація обробника */ );

Тому немає нічого дивного, що обробники подій викликаються (з одним винятком щодо IE, що описується нижче) як методи об'єктів, в яких вони визначені. Тобто в тілі оброблювача подій ключове слово this посилається на мету події.

У обробниках ключове слово це посилається на цільовий об'єкт, навіть коли вони були зареєстровані за допомогою методу addEventListener(). Однак, на жаль, це не відноситься до методу attachEvent(): обробники, зареєстровані за допомогою методу attachEvent(), викликаються як функції, і в них ключове слово цього посилається на глобальний (Window) об'єкт. Цю проблему можна вирішити в такий спосіб:

/* Реєструє зазначену функцію як обробник подій зазначеного типу у вказаному об'єкті. Гарантує, що оброблювач завжди буде викликатись як метод цільового об'єкта. */ function addEvent(target, type, handler) ( if (target.addEventListener) target.addEventListener(type, handler, false); else target.attachEvent("on" + type, function(event) ( // Викликати обробник як метод мети // і передати йому об'єкт події return handler.call(target, event); ));

Зверніть увагу, що обробники подій, зареєстровані в такий спосіб, не можна видалити, тому що посилання на функцію-обертку, що передається методу attachEvent(), ніде не зберігається, щоб її можна було передати методу detachEvent().

Значення обробників, що повертаються

Значення, що повертається обробником події, зареєстрованим налаштуванням властивості об'єкта або за допомогою HTML-атрибута, слід враховувати. Зазвичай значення, що повертається false повідомляє браузеру, що він не повинен виконувати дії, передбачені для цієї події за умовчанням.

Наприклад, обробник onclick кнопки відправки форми може повернути false, щоб запобігти відправці форми браузером. (Це може стати в нагоді, якщо введення користувача не пройшло перевірку на стороні клієнта.) Аналогічно обробник події onkeypress поля введення може фільтрувати введення з клавіатури, повертаючи false при введенні неприпустимих символів.

Також важливим є значення, що повертається обробником напередпочатку об'єкта Windows. Ця подія генерується, коли браузер переходить на іншу сторінку. Якщо цей обробник поверне рядок, його буде виведено в модальному діалоговому вікні, що пропонує користувачеві підтвердити своє бажання залишити сторінку.

Важливо розуміти, що враховуються значення, що повертаються обробниками подій, тільки якщо зареєстровані за допомогою установки властивостей. Обробники, зареєстровані за допомогою addEventListener() або attachEvent(), замість цього повинні викликати метод preventDefault() або встановлювати властивість returnValue об'єкта події.

Скасування подій

Значення, що повертається обробником події, зареєстрованим як властивість, можна використовувати для скасування дій, що виконуються браузером за промовчанням у разі цієї події. У браузерах, що підтримують метод addEventListener(), скасувати виконання дій за замовчуванням можна також викликом методу preventDefault()об'єкт події. Однак у IE, версії 8 і нижче, той же ефект досягається встановленням властивості returnValueоб'єкт події на значення false.

У наступному фрагменті демонструється обробник події кліка за гіперпосиланням, який використовує всі три способи відміни події (блокує перехід користувача за посиланням):

Window.onload = function() ( // Знайти усі посилання var a_href = document.getElementsByTagName("a"); // Додати обробник події click (не для IE

Поточний проект модуля DOM Events 3 визначає в об'єкті Event властивість з ім'ям defaultPrevented. Воно поки що підтримується не всіма браузерами, але суть його в тому, що за звичайних умов воно має значення false і приймає значення true тільки у разі виклику методу preventDefault().

Скасування дій, за умовчанням пов'язаних із подією, - це лише один із різновидів скасування події. Є можливість зупинити поширення події. У браузерах, які підтримують метод addEventListener(), об'єкт події має метод stopPropagation(), Виклик якого перериває подальше поширення події. Якщо в тому ж цільовому об'єкті будуть зареєстровані інші обробники цієї події, то решта обробників все одно будуть викликані, але ніякі інші обробники подій в інших об'єктах не будуть викликані після виклику методу stopPropagation().

У IE версії 8 та нижче метод stopPropagation() не підтримується. Натомість об'єкт події в IE має властивість cancelBubble. Встановлення цієї властивості значення true запобігає поширенню події.

Поточний проект специфікації DOM Events 3 визначає в об'єкті Event ще один метод - метод з ім'ям stopImmediatePropagation(). Подібно до методу stopPropagation(), він запобігає поширенню події за будь-якими іншими об'єктами. Але крім того, він також запобігає виклику будь-яких інших обробників подій, зареєстрованих у тому ж об'єкті.

Однією з найважливіших можливостей мови JavaScript, яка, мабуть, є основною в цій мові, це можливість обробляти якісь події. Така можливість є особливістю для JavaScript в порівнянні з іншими мовами web програмування, тому що тільки цій мові в силі зробити таке.

Що така подія та обробники подій

Подія - це певна дія, яку може робити або користувач, або інші об'єкти на сторінці.

Найяскравішим прикладом події це клік користувача з якогось об'єкта ( click), будь то це кнопка, посилання або будь-який інший елемент. Інший приклад події, це наведення миші над якимось об'єктом( mouseover), скажімо над зображенням. Також подією є повне завантаження сторінки ( load). Загалом усі дії, що відбуваються на сайті, є подіями.

Так ось, ми можемо захопити будь-яку подію, яка проводиться на сторінці та обробляти її за допомогою відповідного оброблювача. Наприклад, при наведенні миші на якийсь блок div ми можемо вивести якесь повідомлення, припустимо "Ви знаходитесь в текстовій області". Або при кліку по кнопці приховати якийсь блок зі сторінки. Загалом, багато чого можна зробити для обробки якоїсь події.

І для того, щоб обробляти якусь подію, необхідно використовувати спеціальний обробник для цієї події. Кожна подія має свій обробник, наприклад, у події клік( click) є обробник onclick. У події наведення миші над об'єктом ( mouseover) є обробник onmouseover. І у події повного завантаження сторінки ( load) є обробник onload.

Тобто як ви зрозуміли назва оброблювача, Формується з префіксу "on" + назва події.

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

Обробник подіївикликається як атрибут, в самому тезі HTMLелемент. У значення обробника можна написати одразу код JavaScript, але краще викликати якусь функцію, яка зробить необхідні дії. Функцію необхідно описати всередині тега script, який може бути як усередині блоку head, так і в кінці тега body. Як параметр для цієї функції передається слово цетобто поточний об'єкт.

Тепер напишемо простий приклад. При наведенні миші над блоком з текстом, виведемо за допомогою методу alert, повідомлення про те, що користувач знаходиться всередині текстової області.

Div( padding-left: 50px; width: 200px; border: 1px solid #000; )

JavaScript код:

Function blockOver(block)( alert("Ви знаходитесь в текстовій області"); )

Зберігаємо документ, відкриваємо його в браузері, наводимо курсор миші над текстом і бачимо результат обробки цієї події:

Як отримати значення атрибуту в JavaScript?

За допомогою параметра функцій (this) можна отримати значення якогось атрибуту поточного об'єктунаприклад, дізнатися його id.

Наприклад, створимо кнопку і задаємо їй id зі значенням "justButton". Коли клацнемо на цю кнопку, то виведемо таке повідомлення: "Ви клацнули по кнопці, з ідентифікатором значення_id". Тут потрібно вже використовувати обробник onclick.

JavaScript код:

Function clickOnButton(button)( alert("Ви клікнули по кнопці, з ідентифікатором: " + button.id); )

Зберігаємо документ, відкриваємо його у браузері та клацаємо по кнопці.

Так само можна вивести ім'я кнопки( button.name) або її значення ( button.value)

Отримуємо значення ширини та висоти елемента

Ще можна дізнатися значення CSS властивостіелементанаприклад, ширину і висоту. Для отримання ширини використовуються властивості clientWidth і offsetWidth, а для висоти clientHeight і offsetHeight. Наприклад, виведемо значення ширини і висоти кнопки, якою клікнули.

Тепер вміст функції clickOnButton буде таким:

Function clickOnButton(button)( //alert("Ви клікнули по кнопці, з ідентифікатором: " + button.id); var width = button.clientWidth || button.offsetWidth; var height = button.clientHeight || button.offset alert("Ширина кнопки: " + width + "\nВисота кнопки: " + height); )

Результат цього прикладу:

Нагадую, що ширина елемента вважається разом зі значенням padding, тому вона дорівнює 111px [ 99px(width) + 6px(padding-left) + 6px(padding-right) ].

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

Наприклад, під час завантаження сторінки можна вивести повідомлення про те, що сторінка завантажується. Для цього необхідно використати подія load та її обробник onload. Даний обробник напишемо у тезі body, що відкриває.

Такий спосіб можна використовувати тільки якщо для обробки події потрібно тільки один короткий рядок коду. В іншому випадку, якщо код обробки складається з однієї довгого рядкаабо багато рядків, потрібно використовувати функцію.

І наприкінці цієї статті розберемо простий приклад обробки форми. Обробка форми на JavaScript, по-перше, зменшує завантаження на сервер і, по-друге, надає додатковий плюс до юзабіліті сайту.

Форма складається з одного поля для логіну і кнопки відправити. При відправленні форми, перевірятимемо довжину логіну. Його довжина має бути більшою за три символи.

Почнемо, ми з HTML структури цієї форми.

Тепер, тегу форми додамо як атрибут обробник onsubmit, події submit. Наступним чином: