Перегляд вихідного коду сторінки Опрацювання подій засобами JavaScript

JavaScript - Назва реалізації стандарту мови програмування ECMAScript компанії Netscape, базується на принципах прототипно-орієнтованого програмування.

JavaScript - Служить для написання сценаріїв для веб-сторінок, але, також, використовується для впровадження сценаріїв керування об'єктами вбудованими в інші програми.

JavaScript:

    - Текст програми включається безпосередньо в HTML-документ і інтерпретується самим браузером
    - Застосовується в основному для часткової автоматизації обробки даних, які застосовуються сторінкою
    - Як і інших об'єктно-орієнтованих мовах, тут визначено ряд подій, пов'язаних з елементами документа
    - Розроблено в компанії Netscape
    - На теперішній час підтримується більшістю браузерів
    - Це не Java!

Події - Деякі можна імітувати за допомогою відповідних методів.

== Події в JavaScript ==

У JavaScript, як і інших об'єктно орієнтованих мовах, визначено ряд подій, пов'язаних з елементами документа. Обробники дають можливість організувати реакцію на виникнення подій з сценарію. При цьому відповідний обробник вказується як атрибут елемента HTML-документа; значенням цього атрибута є вираз JavaScript. Наприклад:

<ul>
<li>

<pre style="background-color: rgb(238, 238, 238);" onmouseover="this.style.backgroundColor='#DDDDDD'" onmouseout="this.style.backgroundColor='#EEEEEE'">&lt;pre onmouseOver="this.style.backgroundColor='#DDDDDD'"
     onmouseOut="this.style.backgroundColor='#EEEEEE'"&gt;
      Наведіть курсор миші
      &lt;/pre&gt;

</pre>

  - Наведення і відведення курсору миші на елемент супроводжуються зміною кольору фону.</li><br>

<li>

  <p><span class="code"><pre>&lt;body onUnLoad="alert('окно закрывается!'"&gt;</pre></span>

    - При спробі користувача закрити вікно і вивантажити документ виводиться повідомлення </p><br>

</li><li>
  <p><span class="code"><pre>&lt;img src="cat.jpg" onClick="showPict()"&gt;</pre></span>
     - При клацанні мишею по зображенню виконується якась функція <span class="tag">showPict()</span></p>

</li></ul>
Половина обробників підтримуються практично всіма HTML-елементами (*). Деякі події можна імітувати за допомогою відповідних методів. Нижче наводиться список подій згідно специфікації HTML 4.0 і деякі події, підтримувані MS IE. Трактування браузерів може відрізнятися від стандарту і в плані застосування обробника до тих чи інших елементів

-onAbort Переривання завантаження зображення

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

-onChange Зміна значень елементів форми. Виникає після втратою елементом фокусу, тобто після події

-onClick Одинарний клацання (натискує і відпущена кнопка миші)

-onDblClick Подвійний клік

-onError Виникнення помилки виконання сценарію

-onFocus Отримання елементом фокусу (клацнути мишею на елементі або чергове натискання клавіші табуляції)

-onKeyDown Натиснуто клавіша на клавіатурі

-onKeyPress Натиснуто і відпущена клавіша на клавіатурі

-onKeyUp Звільнена клавіша на клавіатурі

-onLoad Закінчено завантаження документа

-onMouseDown Натиснуто кнопка миші в межах поточного елемента

-onMouseMove Переміщення курсору миші в межах поточного елемента

-onMouseOut Курсор миші виведений за межі поточного елемента

-onMouseOver Курсор миші наведений на поточний елемент

-onMouseUp Звільнена кнопка миші в межах поточного елемента

-onMove Переміщення вікна

-onReset Скидання даних форми (клацнути по кнопці <input type="reset">) 

-onResize Зміна розмірів вікна

-onSelect Виділення тексту в поточному елементі

-onSubmit Надсилання даних форми (клацнути по кнопці <input type="submit">) 

-onUnload Спроба закриття вікна браузера і вивантаження документа

(*) Практично всі HTML-елементи: всі, за винятком APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE


==  Визначення і використання власних подій в Javascript ==


Власна подія, це як рідні події (onclick, onload і так далі) за винятком того, що ви самі визначаєте, за яких умов вони повинні спрацьовувати.
Деякі вже існуючі рішення удаються до використання бібліотеки Yahoo User Interface (YUI). Я не використовую YUI. Я написав простий клас, він не залежить від бібліотеки і дозволяє вам реалізовувати власні події.



Ось простий клас JavaScript, який буде базою для створення наших власних подій.

 <div style="display: inline;" id="code192_original">
 var CustomEvent = function() 
 {
   //назва події
   this.eventName = arguments[0];
   var mEventName = this.eventName;

   //функція, яка викликається при виникненні події
   var eventAction = null;

   //прив’язка функції до події
   this.subscribe = function(fn) 
   {
      eventAction = fn;
   };

   //виникнення події
   this.fire = function(sender, eventArgs) 
   {
      this.eventName = eventName2;
      if(eventAction != null) 
      {
         eventAction(sender, eventArgs);
      }
      else 
      {
         alert('Подія ' + mEventName + ' не зв\’язана з жодною з  функцій!');
      }
   };
 };
 </div>


Отже, у нас є клас, який визначає назви подій, прив'язує виконувані функції до подій, і метод для виконання події. Все доволі просто.


Ось простий приклад установки власної події.

 var myEvent = new CustomEvent("my event");
 myEvent.subscribe(function(sender, eventArgs) {
 alert(eventArgs.message);<br>
 });



Цей код створить сутьність CustomEvent і привласнить їй ім'я “my event”, вельми креативна назва :). Потім, за допомогою методу він прив'язує функцію до події. Функція, яку призначили до події, видасть вікно alert із значенням аргументу події. Відправник і eventArgs зможуть пройти коли буде викликано подію. Ми поглянемо на це далі.


Виклик події. Це може бути зроблено в будь-якому місці вашого додатку.

 myEvent.fire(null, {
 message: 'ви тільки що викликали власну подію під назвою ' + this.eventName + '!'
 });

Ми привласнили значення null для аргументу в якому вказується відправник, оскільки у нас немає ініціатора події в цьому випадку. Наприклад, якщо ви створили цю подію в додатку фото галереї і викликаєте кожного разу при збільшенні фотографії (onEnlarge?), ви, напевно, зробите відправником об'єкт фотографії яка була збільшена. Це дозволило б вам пропускати фото у ваш метод для збільшення зсередини події.<br>

І, нарешті, ми привласнюємо значення до повідомлення. Відмітьте, що eventArgs це об'єкт JavaScript ({} або new Object()). Це важливо для розуміння того як правильно використовувати eventArgs.
Успішного Вам створення подій.<br>