Prototype определённо одна из мощнейших Javascript библиотек, но у неё есть один небольшой недостаток который зачастую ошибочно принимают за большой — отсутствие родной поддержки связывания селекторов с событиями. Для сравнения — в <a href=«jquery.com» title-«jQuery»>jQuery это одна из основных фич и трудно вообще представить <a href=«jquery.com» title-«jQuery»>jQuery без этого. Для тех кто не в курсе — это возможность отделять наш XHTML от Javascript посредством CSS селекторов, большенство таких событий как onclick, onmouseover, onmouseout, onblur, onfocus и тому подобные.

Одним из первых решений данной проблемы опубликовал некто Ben Nolan. Он написал Behaviour небольшой плагин который решил эту проблему и вполне пригоден и сейчас. Его минус это большие портянки кода для связывания селекторов с событиями. Благодаря <a href=«jquery.com» title-«jQuery»>jQuery лёгкости и минимальности написания кода на нём, кое кто подумал что пора заимплиментить такой же стиль в Prototype. И вот Justin Palmer после недолгих раздумий учтя минусы Behaviour написал event:Selectors. Это было уже гораздо ближе к <a href=«jquery.com» title-«jQuery»>jQuery плюс возможность группировать несколько и более разных селекторов с разными событиями. В <a href=«jquery.com» title-«jQuery»>jQuery такой возможности нет, хотя впринципе она и не особа востребована. К большому сожелению этот плаги не стал развиватса и так и остался в версий 1.0 с некоторым количеством багов. Скорее всего его развитие остановилось всвязи с появлением очередного UJS плагина от парня с говорящей фамилией Dan Webb. Его решение называетса Low Pro и являетса мощным инструментом так как расширяет Prototype Event модель. Причом хочу заметить что данный плагин можно использовать и с <a href=«jquery.com» title-«jQuery»>jQuery.
Скачать Low Pro можно здесь

Ну а теперь давайте посмотрим его в действии:

Сначала включим наши библиотеки в XHTML и не забывайте — чтобы всё работало ваш XHTML должен быть валидным, иначе Javascript может вести себя непредсказуемо.

В main.js мы будем добовлять наши правила.
Пример 1:

Event.addBehavior({
	'div.myclass a:click' : function(e) { 
		alert('Example 1');
		return false;
	}
});

И вот наше первое правило которое перехватывает onclick события во всех «div» с классом «myclass» для всех элементов «a». return false нужен чтобы не сработало нормальное поведения елемента «a».

Пример 2:

Event.addBehavior({
	'div.myclass a:click' : function(e) { 
		alert('Example 1');
		return false;
	},
	'div[id*=cde]:click, div[id$=cd]:mouseover, div[id^=abcdef]:mouseout' : function(e) { 
		alert('Example 2');
	}
});

В этом примере испльзуютса CSS селекторы аттрибутов третьего уровня и группировка правил.

Как видите всё очень просто, писать больше примеров я думаю не стоит, лучше скачайте их здесь

Prototype: селекторы и события