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

	<ul>
		<li>Один</li>
		<li>Два</li>
	</ul>

	<button id="add">Добавить</div>

Код, который назначает обработчики:

$(function(){
	$('li').click(function(){
		alert($(this).html());
	});

	$('#add').click(function(){
		$('ul').append('<li>Новый элемент '+Math.ceil(Math.random()*1000)+'</li>');
	});
})

В итоге, при щелчке на элементах, которые были в списке с самого начала, будет показан alert с текстом элемента списка. Но новые элементы на щелчок реагировать не будут, так как созданы они уже после назначения обработчиков (Смотреть пример).

Исправляем это следующим образом:

$(function(){
	$('li').click(function(){
		alert($(this).html());
	});

	$('#add').click(function(){
		$('ul').append('<li>Новый элемент '+Math.ceil(Math.random()*1000)+'</li>');

		$('ul li:last').click(function(){
			alert($(this).html());
		});
	});
})

Теперь каждый раз при создании нового элемента, ему будет назначаться обработчик. Одноко, при использовании новой функции live(), это можно сделать немного проще и компактнее:

$(function(){
	$('li').live('click', function(){
		alert($(this).html());
	});

	$('#add').click(function(){
		$('ul').append('<li>Новый элемент '+Math.ceil(Math.random()*1000)+'</li>');
	});
})

Результат работы такого кода точно такой же, как в предыдущем варианте, но код получился гораздо понятнее и короче (Смотреть пример). Применив для назначения обработчика live(), я тем самым указал, что он должен быть назначен всем элементам <li> как статическим, так и созданным динамически.

Однако при использовании этой функции стоит учитывать её ограничения:

• пока ещё не все события поддерживаются
• применяться она может только по отношению к селекторам, её нельзя использовать с элементами

Помимо live(), существует и противоположная по назначению функция – die(). Она предназначена для удаления обработчика, назначенного функцией live().

Более подробную информацию можно найти здесь.

Получение ссылок на элементы

Для того, чтобы каким либо образом работать с элементами на странице, нужно получить на них ссылку. Для этого в Mootools существуют две основные функции – $() и $$(), при помощи которых можно получать элементы по id, классу, тегу или css селектору. Функция $() является аналогом стандартной document.getElementById() и предназначена для получения элементов по их ID. При помощи второй функции – $$() можно получить ссылки на несколько объектов сразу, передав ей в качестве аргумента один или несколько CSS селекторов. Следующий пример показывает получение ссылок на все элементы с классом someClass и все изображения (тег <img>), а также получение элемента по ID:

// получение элемента по ID
var elem = $('myElement');

// получение элементов по классу
var elems = $$('.someClass');

// получение элементов по тегу
var elems = $$('img');

Функция $$() всегда возвращает массив элементов, следовательно к элементам этого массива можно обращаться при помощи индекса, например так: $$(’li’)[2]. В следующем примере, мы задаем для этой функции сразу три селектора. В результате функция вернет все ссылки, элемент с id=”menu” и элементы списка с классом “alt”:

var aElem = $$('a', '#menu', 'li.alt');

Обе вышеперечисленные функции производят поиск по всему документу. Однако, если нам нужно выбрать некоторые элементы внутри другого элемента, то нужно воспользоваться функциями $E() или $ES(), которые могут принимать второй аргумент – фильтр. Разница между ними лишь в том, что $E() возвращает один элемент, а $ES() – все, соответствующие селектору внутри указанного элемента:

// возвращает первую ссылку внутри элемента DOM с id = 'myElement'
$E('a', 'myElement');

// получение всех ссылок внутри $('myElement')
$ES('a','myElement');

Создание и добавление элементов в DOM.

Новые элементы создаются при помощи класса Element:

var myImg = new Element ( 'img' , { 'src' : 'aa.jpg', 'alt': 'Мое фото' }) ;

Первый аргумент это имя тега, а второй это список аргументов в виде объекта. В этом примере мы создали новый элемент <img>, с двумя атрибутами – src и alt. Помимо прочего, во второй аргумент можно передавать специальные атрибуты styles и events, для установки стилей и обработчиков событий для создаваемого элемента:

new Element('a', {
	'styles': {
		'display': 'block',
		'border': '1px solid black'
	},
	'events': {
		'click': function(){
			//aaa
		},
		'mousedown': function(){
			//aaa
		}
	},
	'class': 'myClassSuperClass',
	'href': 'http://mad4milk.net'
});

Теперь, чтобы добавить созданный элемент в документ, можно воспользоваться одной из следующих функций:

• injectBefore(element); – вставляет новый элемент перед элементом element.
• injectAfter(element); – вставляет новый элемент после элемента element.
• injectInside(element); – добавляет новый элемент в элемент element. Новый элемент будет последним в списке дочерних (эта функция аналог стандартной appendChild).
• injectTop(element); – добавляет новый элемент в элемент element. Новый элемент будет первым в списке дочерних.

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

// создаем элемент
var myImg = new Element ( 'img' , { 'src' : 'aa.jpg', 'alt': 'Мое фото' }) ;

// добавляем его в документ перед элементом с id="main"
myImg.injectBefore($('main'));

В этом примере сначала создается изображение с двумя атрибутами – src и alt, а затем оно добавляется перед элементом с id=”main”.

Добавление обработчиков событий

В Mootools, обработчики событий, или вернее сказать “слушатели” (listeners), добавляются к элементам при помощи функции addEvent(), которая имеет следующий синтаксис:

element.addEvent(event, function);

Здесь element – элемент DOM, к которому нужно добавить обработчик, event – тип события без приставки ‘on’ (’click’, ‘load’), function – функция или указатель на функцию, которая должна выполняться при возникновении события. Пример:

$('myElement').addEvent('click', function() {alert('test');} );

// fTest - указатель на функцию
$('myElement').addEvent('click', fTest);

function fTest () {
	alert('test');
}

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

window.addEvent('domready', function(){ ... });

Пример

В качестве примера создадим простой HTML документ с меню, выполненным в виде маркированного списка. Затем, получив ссылки на элементы меню, добавим к ним простой обработчик. Структура меню выглядит следующим образом:

<div id="accordion">
	<h3 class="toggler menusection">Меню</h3>
	<div class="element menusection">
		<ul>
			<li>Link 1</li>
			<li>Link 2</li>
			<li>Link 3</li>
			<li>Link 4</li>
		</ul>
	</div>
</div>

Код JavaScript:

window.addEvent('domready', function(){
	$ES('li','accordion').addEvent('click', newItem);
});

function newItem() {
	var el = new Element('li', {
			'events' : {'click' : newItem}
	});
	el.setHTML('Link');
	el.injectInside($E('ul','accordion'));
}

Вначале, мы добавляем обработчик к событию domready объекта window. Этот обработчик получает все элементы <li> внутри элемента с id=accordion и в свою очередь добавляет обработчик newItem к событию onclick. В результате, при щелчке на любом элементе маркированного списка, будет вызываться функция newItem(), которая создает новый элемент <li> и добавляет его в этот же список.

смотреть демоскачать

В DOM 1 был определён всего лишь один метод работы с событиями – это обработчики событий. Подключение функции обработчика было простым делом – ссылка на функцию или анонимная функция присваивалась соответствующему свойству элемента с префиксом “on”. Т.е. событие щелчка мыши – onclick, событие отправки формы – onsubmit и т.д. Которкий пример:

// присваивание анонимной функции
element.onclick = function(){
	alert("Это событие onclick");
}

// присваивание ссылки на функцию
element.onmouseover = hoverMe;

// присваивание в виде тэга элемента
<div onclick="myfunction()"></div>

При таком методе работы с событиями есть большой недостаток – каждому элементу можно добавлять только один обработчик событий. Поэтому в DOM 2 был добавлен новый метод работы с событиями – это event listeners или "слушатели событий" (в различных источниках этот термин переводится по разному, либо перехватчик событий либо приемник событий, но на мой взгляд перевод “слушатель” более точен). Вот здесь то и начинаются проблемы с совместимостью, и как всегда главным возмутителем спокойствия оказался Internet Explorer, всегда делающий все по своему. Разберемся немного в том, что представляет собой слушатель событий и как он реализован на разных браузерах.

Стандартами DOM level 2 для установки слушателя событий определена функция addEventListener(), для удаления – removeEventListener(). В IE, то же самое выполняют функции attachEvent() и detachEvent(). Здесь напрашивается самый простой метод преодоления этих различий – определять наличие функций и вызывать соответствующую функцию. В случае, если ни addEventListener ни attachEvent не доступны, применяем простые обработчики событий. Ниже приведен код для этого метода:

// добавление и удаление функций-слушателей
// obj - элемент
// type - тип события без префикса "on", т.е. "click", "submit"
// fn - ссылка на функцию, или анонимная функция

// добавление
function addEvent(obj, type, fn){
	if (obj.addEventListener){
		obj.addEventListener( type, fn, false );
	} else if(obj.attachEvent) {
		obj.attachEvent( "on"+type, fn );
	} else {
		obj["on"+type] = fn;
	}
}

// удаление
function removeEvent(obj, type, fn){
	if (obj.removeEventListener) {
		obj.removeEventListener( type, fn, false );
	} else if (obj.detachEvent){
		obj.detachEvent( "on"+type, obj[type+fn] );
	} else {
		obj["on"+type] = null;
	}
}

// **********************
// Пример применения функций

function clickHandler(){
	// первая функция слушатель
	alert("Событие click");
	var oTarget = document.getElementById("testDiv");
	removeEvent(oTarget, "click", clickHandler);
}

function mouseoverHandler(){
	alert("Событие mouseover");
	var oTarget = document.getElementById("testDiv");
	removeEvent(oTarget, "mouseover", mouseoverHandler);
}

// добавляем эти две функции как слушатели к одному элементу DOM
var elem = document.getElemntById("testDiv");

addEvent(elem, "click", clickHandler);
addEvent(elem, "mouseover", mouseoverHandler);

В данном примере назначаются 2 функции слушателя для одного элемента c id=testDiv. Функции слушатели в этом случае выполняются только один раз, поскольку сразу же удаляются функцией removeEvent прямо в теле функций.

Эти функции позволяют унифицировать работу с назначением слушателей на разных браузерах. Но тут есть небольшой нюанс – все броузеры за исключением Internet Explorer правильно устанавливают указатель this в теле функции слушателя, в то время как this в IE указывает на абсолютно бесполезный здесь объект window. Но и это также поправимо. Джон Ресиг (John Resig) в своей статье описал замечательный кроссбраузерный метод работы с событиями, который я привожу здесь:

function addEvent(obj, type, fn){
	if (obj.addEventListener){
		obj.addEventListener( type, fn, false );
	} else {
		obj["e"+type+fn] = fn;
		obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
		obj.attachEvent( "on"+type, obj[type+fn] );
	}
}

function removeEvent(obj, type, fn){
	if (obj.removeEventListener){
		obj.removeEventListener( type, fn, false );
	} else {
		obj.detachEvent( "on"+type, obj[type+fn] );
		obj[type+fn] = null;
		obj["e"+type+fn] = null;
	}
}

Описание ключевых моментов:

obj["e"+type+fn] = fn;

Это присваивание делает функцию дочерним объектом указанного элемента, следовательно указатель this в этой функции указывает на необходимый нам элемент. Генерируемый ключ, помещаемый в хэш является уникальным, что предотвращает коллизии с другими функциями.

obj[type+fn] = function(){ obj["e"+type+fn]( window.event ); }

Эта строка создаёт анонимную функцию, которая, при выполнении вызывает предыдущую, передавая при этом глобальный объект event. Эта функция присваивается свойству type+fn объект, чтобы можно было впоследствии её удалить. Таким образом, мы имеем две универсальные функции для работы со слушателями событий.

Разобравшись с обработчиками и функциями слушателями, рассмотрим объект event. Реализация этого объекта различается в IE и DOM-совместимых браузерах. Например, такие свойства объекта event, как target и relatedTarget заменены в IE свойствами srcElement и fromElement, а методы preventDefault() и stopPropagation() реализуются при помощи свойств returnValue и cancelBubbling. Свойства и методы Internet Explorer можно привести в соответствие с DOM при помощи следующей функции (решает проблему только на IE в Windows):

// Форматирование события для соответствия параметров в IE и других броузерах
// определение IE
var sUserAgent = navigator.userAgent;
var isIE = sUserAgent.indexOf("compatible") > -1 && sUserAgent.indexOf("MSIE") > -1 && sUserAgent.indexOf("Opera") == -1;
var isWin = (navigator.platform == "Win32") || (navigator.paltform == "Windows");

function formatEvent(oEvent){
	if(isIE && isWin){
		oEvent.charCode=(oEvent.type=='keypress')?oEvent.keyCode:0;
		oEvent.eventPhase=2;
		oEvent.isChar=(oEvent.charCode>0);
		oEvent.pageX=oEvent.clientX+document.body.scrollLeft;
		oEvent.pageY=oEvent.clientY+document.body.scrollTop;
		oEvent.preventDefault=function(){
			this.returnValue=false;
		}
		if(oEvent.type=='mouseout')
			oEvent.relatedTarget=oEvent.toElement;
		else if(oEvent.type=='mouseover')
			oEvent.relatedTarget=oEvent.fromElement;
		oEvent.stopPropagation=function(){
			this.cancelBubble=true;
		}
		oEvent.target=oEvent.srcElement;
		oEvent.time=(new Date).getTime();
	}
	return oEvent;
}

Теперь лучше всего объединить все вышеназванные методики в один объект, который будет работать с событиями. Вот что у меня получилось:

// определение IE
var sUserAgent = navigator.userAgent;
var isIE = sUserAgent.indexOf("compatible") > -1 && sUserAgent.indexOf("MSIE") > -1 && sUserAgent.indexOf("Opera") == -1;
var isWin = (navigator.platform == "Win32") || (navigator.paltform == "Windows");

var Event = {
	// добавление слушателя
	add:function(obj,type,fn){
		if (obj.addEventListener){
			obj.addEventListener( type, fn, false );
		} else if (obj.attachEvent){
			obj["e"+type+fn] = fn;
			obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
			obj.attachEvent( "on"+type, obj[type+fn] );
		} else {
			obj["on"+type] = fn;
		}
	},

	// удаление слушателя
	remove:function(obj, type, fn){
		if (obj.removeEventListener){
			obj.removeEventListener( type, fn, false );
		} else if (obj.detachEvent){
			obj.detachEvent( "on"+type, obj[type+fn] );
			obj[type+fn] = null;
			obj["e"+type+fn] = null;
		} else {
			obj["on"+type] = null;
		}
	},

	// форматирование события для соответствия параметров в IE и других броузерах
	format:function(oEvent){
		if(isIE && isWin){
			oEvent.charCode=(oEvent.type=="keypress")?oEvent.keyCode:0;
			oEvent.eventPhase=2;
			oEvent.isChar=(oEvent.charCode>0);
			oEvent.pageX=oEvent.clientX+document.body.scrollLeft;
			oEvent.pageY=oEvent.clientY+document.body.scrollTop;
			oEvent.preventDefault=function(){
				this.returnValue=false;
			}
			if(oEvent.type=="mouseout")
				oEvent.relatedTarget=oEvent.toElement;
			else if(oEvent.type=="mouseover")
				oEvent.relatedTarget=oEvent.fromElement;
			oEvent.stopPropagation=function(){
				this.cancelBubble=true;
			}
			oEvent.target=oEvent.srcElement;
			oEvent.time=(new Date).getTime();
		}
		return oEvent;
	}
}

// ******************
// Пример использования
function handler(oEvent){
	var e = Event.format(oEvent || window.event);

	alert(e.target.id);
	e.stopPropagation();
}

// подключение функции-слушателя handler к элементу targetDiv
function attachEvent(){
	Event.add(document.getElementById("targetDiv"), "click", handler );
}