«
»

Уроки Mootools – Урок 5 – Управление событиями


Управление событиями в Mootools 1.2

Итак, мы начинаем наш 5-й урок по Mootools. В последнем уроке мы рассматривали различные пути создания и использования функций в Mootools 1.2. Нашим следующим шагом в познании этой библиотеки – это события. Аналогично селекторам, они очень важны для создания интерактивного пользовательского интерфейса (UI). Когда вы получаете доступ к какому-либо элементу, вам нужно будет решить какое именно событие вызовет необходимое действие.

Единичный клик левой кнопкой мыши

Один щелчок левой кнопкой мыши (левый клик) – это самое распространенное событие в веб-разработке. В обычном HTML левый клик распознается гиперссылками, которые перенаправляют пользователя на указанный URL. В Mootools к любому элементу DOMа можно привязать левый клик, что дает большую гибкость в плане дизайна и функционала вашего сайта. Чтобы добавить событие левого клика к элементу необходимо:

//$('id_name') определяет элемент
//.addEvent добавляет событие
//('click') определяет тип события - в данном случае клик)
$('id_name').addEvent('click', function(){
 
//сюда вставляется код, который будет выполнятся при указанном событии)
alert('Теперь и по этому элементу можно кликнуть!')
});

Тоже самое можно сделать и так:

var clickFunction = function(){
 
    //тут вы пишите код того, что должно произойти
 
    alert('этот элемент отслеживает клик');
}
 
window.addEvent('domready', function() {
 
    $('id_name').addEvent('click', clickFunction);
});
<body>
    <div id="id_name"> <! -- этот элемент будет отслеживать клик по нему -->
    </div>
 
</body>

Примечание: Также как и аналогичное событие у гиперссылок, событие клика в Mootools, на самом деле, распознает событие поднятия кнопки («mouseup»), что означает, что событие произойдет только после того, как пользователь отпустит кнопку мышки, а не когда нажмет на нее. Это делается для того, что бы дать пользователю возможность передумать убрав курсор мышки с элемента и отпустив кнопку уже вне его.

События «mouseenter» и «mouseleave»

Как многим, я думаю, известно, ссылки в тексте HTML могут распознавать событие ‘hover’, что является ни что иное, как наведение курсором мышки на ссылку. С помощью Mootools аналог события ‘hover’ можно добавить и другим элементам DOMа, не только ссылкам. Более того, события Mootools разделены на два «подсобытия»:  mouseenter (наведение курсора) и mouseleave (курсор убирается), что придает больший контроль над элементами DOMа при взаимодействии с пользователями.

Как и ранее, первым делом добавляем «прослушивание» элемента на определенное событие.

var mouseEnterFunction = function(){
    //тут вы пишите код того, что должно произойти
    alert('этот элемент распознает наведение курсора мышки');
 
}
 
window.addEvent('domready', function() {
    $('id_name').addEvent('mouseenter', mouseEnterFunction);
 
});

Событие «mouseleave» работает аналогично:

var mouseLeaveFunction = function(){
 
    //тут вы пишите код того, что должно произойти
    alert('этот элемент распознает отсутствие курсора мышки');
}
 
window.addEvent('domready', function() {
 
    $('id_name').addEvent('mouseleave', mouseLeaveFunction);
});

Удаление события

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

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

Для создания «прослушек» других событий, например нажатий клавиш «Control» или «Shift», синтаксис немного отличается:

var keyStrokeEvent = function(event){
    // а дальше написано вот что: "если нажатая кнопка была Shift, нужно сделать вот что"
 
    if (event.shift) {
	    alert("Вы нажали на Shift!")
    };
 
}
 
window.addEvent('domready', function() {
    $('myTextarea').addEvent('keydown', keyStrokeEvent);
 
});
<div id="body_wrap">
    <textarea id="myTextarea"></textarea>
 
</div>

Вкусности :)

Вот несколько рабочих (вроде как) примеров кода, которые мы только что обсуждали:

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

var keyStrokeEvent = function(event){
 
    // вот тут говориться, что если нажатой кнопкой была буква k (латинская, маленькая), вот что нужно сделать
    if (event.key == 'k') { 
	    alert("Этот урок стал возможен только благодаря латинской букве 'k'.")  
    };
 
}
 
var mouseLeaveFunction = function(){
    //сюда можно вставить все, чтобы вы хотели, чтобы страница делала при этом событии
    alert('этот элемент теперь распознает, когда курсор его покидает');
 
}
 
var mouseEnterFunction = function(){
    //сюда тоже самое
    alert('этот элемент теперь видит, когда на него наводится курсор');
 
}
 
var clickFunction = function(){
    //и сюда
    alert('теперь этот элемент распознает клик по себе');
 
}
 
window.addEvent('domready', function() {
    $('click').addEvent('click', clickFunction);
 
    $('enter').addEvent('mouseenter', mouseEnterFunction);
    $('leave').addEvent('mouseleave', mouseLeaveFunction);
 
    $('keyevent').addEvent('keydown', keyStrokeEvent);
});
<div id="click" class="block">Левый клик</div><br />
 
<div id="enter" class="block">Курсор наведен</div><br />
<div id="leave" class="block">Курсор убран</div><br />
 
<textarea id="keyevent">Введите латинскую букву k</textarea>
Левый клик

Курсор наведен

Курсор убран


, , , ,

Эта запись была сделана 01.06.2009, 6:01 pm и она находится в рубрике(ах) Mootools, Уроки новичка. Можно подписаться на RSS 2.0, чтобы следить за комментариями Можно ответить, или трэкбэкнуть со своего сайта.

  1. #1 by Алексей on 27.11.2009 - 2:14 pm

    В примере события «mouseenter»

    написано:
    $(‘id_name’).addEvent(‘mousenter’, mouseEnterFunction);

    нужно:
    $(‘id_name’).addEvent(‘mouseenter’, mouseEnterFunction);

    Ответить Цитировать

  2. #3 by proglammer on 09.01.2010 - 3:45 am

    В одном из примеров (про нажатие на Shift) надо html подправить:

    Ответить Цитировать

    • #4 by proglammer on 11.01.2010 - 12:15 pm

      спасибо! вроде исправил, хотя в твоем комментарии никакого кода небыло (автоматом порезался…)

      Ответить Цитировать

  3. #5 by Zaytseff on 09.12.2010 - 4:39 pm

    Опечатка в разделе – лувый клик
    Единичный клик левой кнопкой мыши
    …..
    В Mootools к любому элементу DOMа можно привязать лувый клик

    Ответить Цитировать

    • #6 by proglammer on 09.12.2010 - 7:57 pm

      спасибо! исправил.

      странно, что ты только эту опечатку заметил :) весь пост был написан как через Ж! :) я его писал, просто, по пути на дачу. тряска была, темень, проверять было не интересно :)

      Ответить Цитировать
(никто не узнает)

Код на картинке: