Pull to refresh

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

Reading time 2 min
Views 2K
Prototype определённо одна из мощнейших Javascript библиотек, но у неё есть один небольшой недостаток который зачастую ошибочно принимают за большой — отсутствие родной поддержки связывания селекторов с событиями. Для сравнения — в <a href=«jquery.com» title-«jQuery»>jQuery это одна из основных фич и трудно вообще представить <a href=«jquery.com» title-«jQuery»>jQuery без этого. Для тех кто не в курсе — это возможность отделять наш Javascript от XHTML посредством 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 API. Причем хочу заметить что есть версия плагина для <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 селекторы аттрибутов третьего уровня и группировка правил с разными событиями.

Как видите всё очень просто, писать больше примеров я думаю не стоит, лучше скачайте их здесь
Tags:
Hubs:
+10
Comments 15
Comments Comments 15

Articles