Изучаем MooTools. Шаг 4 - События

29 января 2009 года
Mootools
  • Содержание

Мы уже научились получать элементы DOM на странице. Рассмотрим, как добавлять к ним события. События являются, пожалуй, основной частью в создании пользовательского интерфейса.

Основные события

Click

Левый клик чаще других приходится обрабатывать. Пользователь постоянно переходит по ссылкам. Событие можно применять к любым элементам DOM, что добавит функциональности и гибкости в разработке.
Событие добавляйте функцией .addEvent(), удаляйте .removeEvent(). Если необходимо перехватить стандартное событие, к примеру, переход по ссылке, используйте функцию .stop().

$('myAnchor').addEvent('click', function(e){
	new Event(e).stop(); //отменяет переход по ссылке
	//устанавливаем текст 'myAnchor'
	this.set('text', "Куда Вы хотите попасть?");
	(function(){
		this.set('text', "Посетите сайт MooTools").
		set('href', 'http://mootools.net');
	}).delay(500, this); // с задержкой в полсекунды изменяем атрибуты 'myAnchor' text и href
});

Mouse Enter, Mouse Leave, Mouse Wheel

Mouse Enter обрабатывается при наведении курсора на объект, Mouse Leave - при уходе за его границы, Mouse Wheel - при прокрутке колесика.

window.addEvent('domready', function() {
	$('id_name').addEvent('mouseenter', mouseEnterFunction);
});

window.addEvent('domready', function() {
	$('id_name').addEvent('mouseleave', mouseLeaveFunction);
});

window.addEvent('domready', function() {
	$('id_name').addEvent('mousewheel', mouseWousewheelFunction);
});

window.removeEvent('mouseleave', mouseLeaveFunction);

KeyDown

Для перехвата нажатия клавиш существует событие keydown.
Следующий пример выводит сообщение по нажатию калавиши "k":

window.addEvent('domready', function() {
	$('myTextarea').addEvent('keydown',
		function(event){
			if (event.key == "k")
				alert("Вы нажали 'k'")
		}
	);
});

Если нужно перехватить нажатие shift, используйте условие:

if (event.shift)
	alert("Вы нажали shift.");

Event

Объект event имеет следующие свойства:

  • shift - true, если нажата клавиша shift.
  • control - true, если нажата клавиша control.
  • alt - true, если нажата клавиша alt.
  • code - значение нажатой клавиши.
  • page.x, page.y, client.x, client.y - координаты курсора.
  • key - код нажатой клавиши в нижнем регистре, в том числе ‘enter’, ‘up’, ‘down’, ‘left’, ‘right’, ’space’, ‘backspace’, ‘delete’ и т.д.

Работа с несколькими событиями

Если необходимо добавить к объекту сразу несколько событий, используйте .addEvents(). Для отмены всех событий существует функция .removeEvents():
Если в функции .removeEvents() не указывать события, то отменяются все события. 

$('myElement').addEvents({
	'mouseover': function(){
		alert('mouseover');
	},
	'click': function(){
		alert('click');
	}
});

myElement.addEvent('click', function(){ alert('click еще раз'); });
myElement.addEvent('click', function(){ alert('click и еще раз'); });

myElement.removeEvents('click');

Собственные события

С MooTools Вы можете создавать свои собственные события. Следующий пример иллюстрирует событие, возникающее по клику с нажатой ’shift’:

Element.Events.shiftclick = {
	base: 'click', //основано на этом событии
	condition: function(event){
		return (event.shift == true);
	}
};

$('myInput').addEvent('shiftclick', shiftClickEvent);

Подробное описание функций:
http://mootools.net/docs/Native/Event
http://mootools.net/docs/Element/Element.Event

Понравилась статья? Подпишись на RSS.

Советую почитать:

Mootools. Ключевое слово this
Изучаем MooTools. Шаг 7 - AJAX

Теги: mootools события, получить ntrc первого элемента с классом mootools, "mootools события", события mootools

Изучаем MooTools. Шаг 3 - Массивы Изучаем MooTools. Шаг 5 - Элементы DOM

Комментарии

  • Ref написал 14 марта 2010 года

    Вопрос с элементом input
    на форме несколько input

    Как правильно добавить событие mouseover в зависимости от того с каким input работают в текущий момент
    Наверно сначала надо получить массив input. Но вот как дальше не могу понять
    Заранее спасибо

    Ответить
  • Александр написал 14 марта 2010 года

    $$('input').addEvent('mouseover', function(){ this.setStyle('border-color: red'); });

    Доступ к текущему input осуществляется через this

    Ответить
  • Ref написал 14 марта 2010 года

    Спасибо
    все работает

    Ответить
  • Артур написал 05 июня 2010 года

    Скажите а каким образом можно вычислить координаты курсора мыши по двум осям ? На jquery это делается так http://www.switchonthecode.com/tutorials/jquery-snippet-relative-mouse-position

    Просто не хочу грузить лишние библиотеки в joomla !

    Ответить
  • Александр написал 05 июня 2010 года

    Координаты курсора мыши можно получить примерно так: 

    $('test').addEvent('mousedown', function(event){
 console.log(event.clientX, event.clientY);
})

    http://mootools.net/docs/core/Native/Event

    Ответить
  • another_i написал 01 ноября 2010 года

    Добрый вечер.  Буду очень благодарен, если поможете разобраться с функциями....

    Читал разные туторы по мутулз, и в большинстве мелькает следующий момент: скажим, мы определили функцию: 

    var fun = function ( a ) {
    alert ( a + " it is working!" );
};

    Далее, после загрузки ДОМа, на элемент с id='elem' вешаем обработчик по клику, с вызовом нашей функции и передачей параметра 'par' (вариант 1): 

    var par='wow!';
$('elem').addEvent('click', fun(par));

    — при нажатии на 'elem' обработчик выдаст ошибку в коде файла 'mootools.js'.

    Если вызывать 'fun', без передачи параметра, то всё сработает отлично (вариант 2): 

    $('elem').addEvent('click', fun);

    С параметром же вызвать 'fun' получается только таким образом (вариант 3): 

     
$('elem').addEvent('click', function(){
        fun(par);
    });

    — но, думаю, вы понимаете, что это, отнюдь, не так красиво, как хотелось бы (вариант 1).

    Подводя иток, вопрос: как корректно описывать и назначать внешнюю функцию (в нашем случае 'fun'), с передачей ей параметра ('par'), обработчиком события?

    Ответить
  • Александр написал 01 ноября 2010 года

    http://mootools.net/docs/core/Types/Function
    Попробуйте так 

    $('elem').addEvent('click', fun.pass(par));

    Можно использовать .bind(). В этом случае переменная контекста с параметрами меняются местами.

    Ответить
  • another_i написал 02 ноября 2010 года

    Огромное спасибо! Выручаете! =)

    Ответить