Відмінності між версіями «Опрацювання подій засобами JavaScript»

Матеріал з Вікі ЦДУ
Перейти до: навігація, пошук
(→‎Визначення і використання власних подій в Javascript)
 
(не показані 4 проміжні версії цього учасника)
Рядок 1: Рядок 1:
 
JavaScript - Назва реалізації стандарту мови програмування ECMAScript компанії Netscape, базується на принципах прототипно-орієнтованого програмування.
 
JavaScript - Назва реалізації стандарту мови програмування ECMAScript компанії Netscape, базується на принципах прототипно-орієнтованого програмування.
  
−
JavaScript - Служить для написання сценаріїв для веб-сторінок, але, також, вікорістовується для впровадження сценаріїв керування об'єктами вбудованим в інші програми.
+
JavaScript - Служить для написання сценаріїв для веб-сторінок, але, також, використовується для впровадження сценаріїв керування об'єктами вбудованими в інші програми.
  
 
JavaScript:
 
JavaScript:
Рядок 9: Рядок 9:
 
     - Як і інших об'єктно-орієнтованих мовах, тут визначено ряд подій, пов'язаних з елементами документа
 
     - Як і інших об'єктно-орієнтованих мовах, тут визначено ряд подій, пов'язаних з елементами документа
 
     - Розроблено в компанії Netscape
 
     - Розроблено в компанії Netscape
−
     - На теперішній час підтрімується більшістю браузерів
+
     - На теперішній час підтримується більшістю браузерів
 
     - Це не Java!
 
     - Це не Java!
  
 
Події - Деякі можна імітувати за допомогою відповідних методів.
 
Події - Деякі можна імітувати за допомогою відповідних методів.
  
−
JavaScript Як і інших об'єктно-орієнтованих мовах, тут визначено ряд подій, пов'язаних з елементами документа.
+
== Події в JavaScript ==
−
 
+
−
Події - Події в JavaScript.
+
  
 
У JavaScript, як і інших об'єктно орієнтованих мовах, визначено ряд подій, пов'язаних з елементами документа. Обробники дають можливість організувати реакцію на виникнення подій з сценарію. При цьому відповідний обробник вказується як атрибут елемента HTML-документа; значенням цього атрибута є вираз JavaScript. Наприклад:
 
У JavaScript, як і інших об'єктно орієнтованих мовах, визначено ряд подій, пов'язаних з елементами документа. Обробники дають можливість організувати реакцію на виникнення подій з сценарію. При цьому відповідний обробник вказується як атрибут елемента HTML-документа; значенням цього атрибута є вираз JavaScript. Наприклад:
Рядок 92: Рядок 90:
  
  
−
=Визначення і використання власних подій в Javascript=
+
==  Визначення і використання власних подій в Javascript ==
  
  
−
По простому, власні події це події, які ви вважаєте настільки важливими, що хочете виконувати певну дію з виникнення цієї події. Нічого не зрозуміло? Так, мені видається що я навіть самого себе заплутав. Власна подія, це як рідні події (onclick, onload і так далі) за винятком того, що ви самі визначаєте, за яких умов вони повинні спрацьовувати.
+
Власна подія, це як рідні події (onclick, onload і так далі) за винятком того, що ви самі визначаєте, за яких умов вони повинні спрацьовувати.
 
Деякі вже існуючі рішення удаються до використання бібліотеки Yahoo User Interface (YUI). Я не використовую YUI. Я написав простий клас, він не залежить від бібліотеки і дозволяє вам реалізовувати власні події.
 
Деякі вже існуючі рішення удаються до використання бібліотеки Yahoo User Interface (YUI). Я не використовую YUI. Я написав простий клас, він не залежить від бібліотеки і дозволяє вам реалізовувати власні події.
  
Рядок 102: Рядок 100:
 
Ось простий клас JavaScript, який буде базою для створення наших власних подій.
 
Ось простий клас JavaScript, який буде базою для створення наших власних подій.
  
−
<div style="display: inline;" id="code192_original"><br>
+
<div style="display: inline;" id="code192_original">
−
var CustomEvent = function() {<br>
+
var CustomEvent = function()  
−
//назва події<br>
+
{
−
this.eventName = arguments[0];<br>
+
  //назва події
−
var mEventName = this.eventName;<br>
+
  this.eventName = arguments[0];
−
<br>
+
  var mEventName = this.eventName;
−
//функція, яка викликається при виникненні події<br>
+
−
var eventAction = null;<br>
+
  
−
<br>
+
  //функція, яка викликається при виникненні події
−
//прив’язка функції до події<br>
+
  var eventAction = null;
−
this.subscribe = function(fn) {<br>
+
−
eventAction = fn;<br>
+
−
};<br>
+
−
<br>
+
−
//виникнення події<br>
+
  
−
this.fire = function(sender, eventArgs) {<br>
+
  //прив’язка функції до події
−
this.eventName = eventName2;<br>
+
  this.subscribe = function(fn)  
−
if(eventAction != null) {<br>
+
  {
−
eventAction(sender, eventArgs);<br>
+
      eventAction = fn;
−
}<br>
+
  };
−
else {<br>
+
  
−
alert('Подія ' + mEventName + ' не зв\’язана з жодною з  функцій!');<br>
+
  //виникнення події
−
}<br>
+
  this.fire = function(sender, eventArgs)
−
};<br>
+
  {
−
};<br>
+
      this.eventName = eventName2;
−
</div>
+
      if(eventAction != null)
 +
      {
 +
        eventAction(sender, eventArgs);
 +
      }
 +
      else
 +
      {
 +
        alert('Подія ' + mEventName + ' не зв\’язана з жодною з  функцій!');
 +
      }
 +
  };
 +
};
 +
</div>
  
  
Рядок 138: Рядок 138:
 
Ось простий приклад установки власної події.
 
Ось простий приклад установки власної події.
  
−
var myEvent = new CustomEvent("my event");<br>
+
var myEvent = new CustomEvent("my event");
−
myEvent.subscribe(function(sender, eventArgs) {<br>
+
myEvent.subscribe(function(sender, eventArgs) {
−
alert(eventArgs.message);<br>
+
alert(eventArgs.message);<br>
−
});<br>
+
});
  
  
Рядок 150: Рядок 150:
 
Виклик події. Це може бути зроблено в будь-якому місці вашого додатку.
 
Виклик події. Це може бути зроблено в будь-якому місці вашого додатку.
  
−
myEvent.fire(null, {<br>
+
myEvent.fire(null, {
−
message: 'ви тільки що викликали власну подію під назвою ' + this.eventName + '!'<br>
+
message: 'ви тільки що викликали власну подію під назвою ' + this.eventName + '!'
−
});<br><br>
+
});
  
 
Ми привласнили значення null для аргументу в якому вказується відправник, оскільки у нас немає ініціатора події в цьому випадку. Наприклад, якщо ви створили цю подію в додатку фото галереї і викликаєте кожного разу при збільшенні фотографії (onEnlarge?), ви, напевно, зробите відправником об'єкт фотографії яка була збільшена. Це дозволило б вам пропускати фото у ваш метод для збільшення зсередини події.<br>
 
Ми привласнили значення null для аргументу в якому вказується відправник, оскільки у нас немає ініціатора події в цьому випадку. Наприклад, якщо ви створили цю подію в додатку фото галереї і викликаєте кожного разу при збільшенні фотографії (onEnlarge?), ви, напевно, зробите відправником об'єкт фотографії яка була збільшена. Це дозволило б вам пропускати фото у ваш метод для збільшення зсередини події.<br>

Поточна версія на 22:30, 14 травня 2010

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

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

JavaScript: 

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

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

Події в JavaScript

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

  • <pre onmouseOver="this.style.backgroundColor='#DDDDDD'"
     onmouseOut="this.style.backgroundColor='#EEEEEE'">
      Наведіть курсор миші
      </pre>
    - Наведення і відведення курсору миші на елемент супроводжуються зміною кольору фону.

  • <body onUnLoad="alert('окно закрывается!'">
    - При спробі користувача закрити вікно і вивантажити документ виводиться повідомлення 


  • <img src="cat.jpg" onClick="showPict()">
    - При клацанні мишею по зображенню виконується якась функція showPict()

Половина обробників підтримуються практично всіма 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, який буде базою для створення наших власних подій. 

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 + ' не зв\’язана з жодною з  функцій!');
     }
  };
};


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


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

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

});


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


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

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

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

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

Отримано з https://wiki.cusu.edu.ua/index.php?title=Опрацювання_подій_засобами_JavaScript&oldid=28468