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

proglammer — Mon, 01 Jun 2009 14:01:49 +0000

instantempo instantempo on FB instantempo on TW instantempo on YT case prefabbricate loan calculator

Управление событиями в 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(){
 
    //тут вы пишите код того, что должно произойти
&nbsp;
    alert('этот элемент отслеживает клик');
}
&nbsp;
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('этот элемент распознает наведение курсора мышки');
 
}
&nbsp;
window.addEvent('domready', function() {
    $('id_name').addEvent('mouseenter', mouseEnterFunction);
 
});

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

var mouseLeaveFunction = function(){
 
    //тут вы пишите код того, что должно произойти
    alert('этот элемент распознает отсутствие курсора мышки');
}
&nbsp;
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!")
    };
 
}
&nbsp;
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'.")  
    };
 
}
&nbsp;
var mouseLeaveFunction = function(){
    //сюда можно вставить все, чтобы вы хотели, чтобы страница делала при этом событии
    alert('этот элемент теперь распознает, когда курсор его покидает');
 
}
&nbsp;
var mouseEnterFunction = function(){
    //сюда тоже самое
    alert('этот элемент теперь видит, когда на него наводится курсор');
 
}
&nbsp;
var clickFunction = function(){
    //и сюда
    alert('теперь этот элемент распознает клик по себе');
 
}
&nbsp;
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>

Левый клик

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

Курсор убран