- Виносимо код події onclick в javascript-функцію
- Вішаємо onclick на елемент з javascript-коду
- застосовуємо jQuery
Таке просте подія, як onclick в javascript, може бути викликано декількома способами і скриает деякі тонкощі. Подія відбувається при кліці по елементу лівою кнопкою миші. Варто зауважити, що при кліці відбувається так само ще дві події, а саме натискання на кнопку миші і її віджимання.
Всі приклади будемо розглядати на тезі «a» (посилання). Нехай це не бентежить, з іншими тегами буде працювати аналогічним чином.
Найпростіший спосіб повісити подія onclick, це прописати його безпосередньо в html тезі:
<a href="#" onclick="alert('Прімер 1 сработал'); return false;"> Приклад 1 </a>Код в дії:
У прикладі при натисканні на посилання з'являється спливаюче вікно з повідомленням. Додатково до дії ми прописали «return false;". Це потрібно щоб запобігти переходу за посиланням після спрацьовування події «onclick». В інших елементах (де немає аттрибута href) це можна опустити.
Розглянутий варіант можна використовувати якщо подія містить мало коду. Інакше, слід звернути увагу на інші способи.
Виносимо код події onclick в javascript-функцію
Наступний спосіб хороший тим, що ми відокремлюємо javascript-код від html тегів. У тезі прописуємо назву функції, а саму функцію виносимо в окремий блок:
<Script> function ChangeColor (Element) {if (Element.style.color == 'green') Element.style.color = 'red'; else Element.style.color = 'green'; return false; } </ Script> <a href = "#" style = "color: green;" onclick = "return ChangeColor (this);"> Змінити колір </a>Код в дії:
Але і тут все не ідеально. Що робити, якщо подія потрібно повісити на все ссиликі сайту, а їх сотні? Здається що це важко, а на ділі - менше десяти рядків коду. Завдання вирішується за допомогою селекторів. У прикладі знову будемо проводити дії з тегом «a», але нічого не заважає використовувати замість посилання «img» або «div».
Вішаємо onclick на елемент з javascript-коду
Рассмот ще один спосіб, на мій погляд, самий практичний і надійний. Хороший він тим, що подія можна повісити на безліч елементів. Для цього потрібно вибрати за допомогою javascript-селектор елементи, до яких потрібно застосувати подія onclick.
<Script> // чекаємо повного завантаження сторінки window.onload = function () {// отримуємо ідентифікатор елемента var a = document.getElementById ( 'switch'); // вішаємо на нього подія a.onclick = function () {// виробляємо якісь дії if (this.innerHTML == 'On') this.innerHTML = 'Off'; else this.innerHTML = 'On'; // запобігаємо перехід по посиланню href return false; }} </ Script> <a id="switch" href="#"> On </a>Код в дії:
Натисніть на посилання: OnВибору елементів по селекторам можна присвятити окрему тему, можу сказати тільки те, що відповідно до нової специфікації HTML5, їх вибір став простий і в javascript. Якщо Ви знайомі з jquery або CSS, то вибрати потрібні елементи для Вас не складе труднощів. Наприклад, так просто можна вибрати всі елементи з класом «link» і повісити на них потрібну дію:
// вибираємо потрібні елементи var a = document.querySelectorAll ( '. Link'); // перебираємо всі знайдені елементи і вішаємо на них події [] .forEach.call (a, function (el) {// вішаємо подія el.click = function (e) {// виробляємо дії}});застосовуємо jQuery
Якщо в проекті використовується бібліотека jQuery, то можна ще спростити код. Розглянемо два найпоширеніші способи:
$ (Function () {$ ( ". Link"). Click (function () {// дії});});І ще один варіант, який ідентичний попередньому.
$ (Function () {$ ( ". Link"). On ( "click", function () {// дії});});З оброблювачем «on ()» краще ознайомитися окремо, так як він несе в собі багато корисного функціоналу. Наприклад, можливість вказати через пропуск кілька подій до якої застосовуватиметься дію, делегувати події на дочірні елементи, а так само він корисний якщо необхідно повісити подія на динамічно додаються елементи, яких спочатку немає на сторінці.
Що робити, якщо подія потрібно повісити на все ссиликі сайту, а їх сотні?
