Mootools 1.2 за 30 дней — День 5 — Обработка событий


Обработка событий в Mootools 1.2

Добро пожаловать на 5 день курса «Mootools 1.2 за 30 дней». Если вы еще не читали первые дни, то можете сделать это сейчас «Обучающий курс по библиотеке Mootools. День 1».

Mootools 1.2 за 30 дней

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

Одиночное нажатие (click)

Одиночное нажатие левой кнопки мышки является самым распространенным событием в веб-разработке. Гиперссылки понимают нажатие кнопки, и позволяют вам переходит на другой адрес. Mootools позволяет вам назначить обработчик события click для любого элемента DOM, давая вам огромные возможности для ваших идей в дизайне и функциональности. Первым шагом реализуем обработку события click для какого-либо элемента:

  1. <body>
  2.     <div id="id_name"> <! — this element now recognizes the click event —>
  3.     </div>
  4. </body>
  1. //$('id_name') получаем необходимый элемент
  2. //.addEvent добавить обработчик события
  3. //('click') определяем вид события
  4. $('id_name').addEvent('click', function(){
  5.     //помещаем сюда код который будет выполняться при возникновении события
  6.     alert(Этот элемент получил события click');
  7. });

Вы можете получить тоже самый результат, выделив анонимную функцию, указанную в addEvent:

  1. var clickFunction = function(){
  2.     //помещаем сюда код, который будет выполняться при возникновении события
  3.     alert('this element now recognizes the click event');
  4. }
  5. window.addEvent('domready', function() {
  6.     $('id_name').addEvent('click', clickFunction);
  7. });

Заметим, что также как и в случае с гиперссылками событие click возникает в то время, когда пользователь отпустит кнопку мышки, а не когда он ее нажимает. Это дает пользователю возможность передумать, перетащив курсор мыши за пределы элемента, перед тем как отпустить кнопку мышки.

События mouseenter и mouseleave

В CSS есть событие Hover (курсор мышки наведен на ссылку), с помощью Mootools, вы можете добавить обработку этого события для любого элемента DOM. Разделив события на mouseenter и mouseleave, вы получаете больший контроль над управлением элементами DOM в зависимости от действий пользователя.

Как и прежде сначала мы должны установить обработчик события для элемента, событие mouseenter происходит, когда курсор мышки попадает во внутреннюю область элемента:

  1. var mouseEnterFunction = function(){
  2.     //помещаем сюда код, который будет выполняться при возникновении события
  3.     alert('Элемент получил событие mouseenter');
  4. }
  5. window.addEvent('domready', function() {
  6.     $('id_name').addEvent('mouseenter', mouseEnterFunction);
  7. });

Событие mouseleave происходит, когда курсор покидает внутреннюю область элемента, то есть выходит за его границы:

  1. var mouseLeaveFunction = function(){
  2.     //помещаем сюда код, который будет выполняться при возникновении события
  3.     alert(''Элемент получил событие mouseleave');
  4. }
  5. window.addEvent('domready', function() {
  6.   $('id_name').addEvent('mouseleave', mouseLeaveFunction);
  7. });

.removeEvent() — удаление обработчика событий

Бывают моменты, когда нужно удалить обработку определенного события у элемента. В этом нет ничего сложного, форма записи удаления события такая же как и у добавления, за исключением того, что вместо addEvent мы пишем — removeEvent.

  1. //для удаляем событие практически также как и добавляем,
  2. //только .addEvent заменяем на .removeEvent
  3. $('id_name').removeEvent('mouseleave', mouseLeaveFunction);

Обработка клавиатурного ввода в элементах textarea или input

Библиотека Mootools также позволяет принимать события клавиатурного вода в элементах textarea или input. Синтаксис установки обработчика события не отличается от примеров выше:

  1. <div id="body_wrap">
  2.     <textarea id="myInput"></textarea>
  3. </div>
  1. var keydownEventFunction = function () {
  2.     alert('Элемент textarea получил событие keydown (нажата кнопка)');
  3. };
  4. window.addEvent('domready', function() {
  5.     $('myTextarea').addEvent('keydown', keydownEventFunction);
  6. });

Всего таких событий три: keydown (кнопка нажата), keyup(кнопка отпущена) и keypress (кнопка нажата и отпущена). Предложенный код обрабатывает любой нажатие кнопки. Чтобы получить информацию о том, что было нажато, и потом обработать, вам необходимо добавить параметр в функцию. Внутри функции, используя этот параметр вы сможете, используя условный оператора, управлять поведением функции в зависимости от того какая кнопка была нажата.

  1. //Добавляем параметр "event"
  2. var keyStrokeEvent = function(event){
  3.     // если нажата кнопка k, выводим окно предупреждения
  4.     if (event.key == "k") {  
  5.      alert("Была нажата кнопка k.")
  6.     };
  7. }
  8. window.addEvent('domready', function() {
  9.     $('myTextarea').addEvent('keydown', keyStrokeEvent);
  10. });

Если вы хотите обрабатывать нажатия управляющих кнопок, таких как shift, control или alt. То вам необходимо использовать соответствующее свойство:

  1. var keyStrokeEvent = function(event){
  2.     // Если была нажата кнопка "shift", выводим окно предупреждения
  3.     if (event.shift) {
  4.      alert("Вы нажали shift.")
  5.     };
  6. }
  7. window.addEvent('domready', function() {
  8.     $('myTextarea').addEvent('keydown', keyStrokeEvent);
  9. });
Еще один сайт из серии скачать бесплатно icq. Если учитывать, что icq и так бесплатна. То возникает вопрос зачем это нужно. Что понравилось: дизайн и отсутствие всплывающих окошек которые очень любят подобные сайты.

Пример

Ниже представлен работающий код, который показывает, как работает все сказанное выше.

Примечание, попробуйте нажать левую кнопку мыши на первом блоке и, не отпуская вывести курсор за пределы блока. Обратите внимание, что в таком случае элемент не получит событие click.

  1. <div id="click" class="block">Single Left Click</div><br />
  2. <div id="enter" class="block">Mouse Enter</div><br />
  3. <div id="leave" class="block">Mouse Leave</div><br />
  4. <textarea id="keyevent">Нажмите кнопку 'k'</textarea>
  1. var keyStrokeEvent = function(event){
  2.     //Если нажата кнопка 'k', выводим окно предупреждения
  3.     if (event.key == 'k') {
  4.      alert("Была нажата кнопка 'k'")  
  5.     };
  6. }
  7. var mouseLeaveFunction = function(){
  8.     //помещаем сюда код, который будет выполняться при возникновении события
  9.     alert('Элемент получил событие mouseleave');
  10. }
  11. var mouseEnterFunction = function(){
  12.     //помещаем сюда код, который будет выполняться при возникновении события
  13.     alert('Элемент получил событие mouseenter');
  14. }
  15. var clickFunction = function(){
  16.     //помещаем сюда код, который будет выполняться при возникновении события
  17.     alert('Элемент получил событие click');
  18. }
  19. window.addEvent('domready', function() {
  20.     $('click').addEvent('click', clickFunction);
  21.     $('enter').addEvent('mouseenter', mouseEnterFunction);
  22.     $('leave').addEvent('mouseleave', mouseLeaveFunction);
  23.     $('keyevent').addEvent('keydown', keyStrokeEvent);
  24. });

Событие ‘click’
Событие ‘mouseenter’
Событие ‘mouseleave’

Для дальнейшего изучения

Вы можете скачать zip архив с материалами этого дня.
В архиве содержаться Mootools 1.2 Core, JS файл, HTML файл с примером который вы видите выше.

Подробнее о событиях

Библиотека Mootools содержит гораздо больше возможностей для работы с событиями, чем было рассмотрено здесь, для дальнейшего изучения вы можете воспользоваться следующими ресурсами:

Вольный перевод статьи: 30 Days of Mootools 1.2 Tutorials — Day 5 — Event Handling

Похожие записи:

Tags:

Leave a Reply