Prototype: selectors and events

Prototype is definitely one of the most powerful Javascript libraries, but it has one small drawback which is often mistaken for a big one - the lack of native support for linking selectors to events. For comparison - in <a href=ru jquery.com »jQuery title-> jQuery is one of the main features and it is difficult to imagine <a href = ray jquery.com » in general jQuery without- that title. For those who do not know, this is an opportunity to separate our Javascript from XHTML using CSS selectors, most of such events as onclick , onmouseover , onmouseout , onblur , onfocus and the like.

One of the first solutions to this problem was published by one Ben Nolan . He wrote Behavior a small plugin that solved this problem and is quite suitable now. Its minus is the large footcloths of the code for the rules and the inflexibility of reusing these rules in this large script size. Thanks to the jaquery <a href==jquery.com "title- jjuery"> the ease and minimality of writing code on it, some people thought that it was time to imitate the same style in Prototype . And justin Palmer, after a brief hesitation, taking into account the minuses Behavior wrote event: Selectors . It was already much closer to < ja href = > jquery.com »jQuery title-title — jQuery plus the ability to group several or more different selectors with different events using pseudo event selectors . There is no such opportunity in <a href = jquery.com "jQuery title- title ", although in principle it is not particularly in demand. Unfortunately, this plugin did not evolve and remained in version 1.0 with some bugs. Most likely, its development stopped due to the appearance of the next UJS plug-in from a guy with a talking name Dan Webb . His solution is called Low Pro and is a powerful tool as it extends the Prototype Event API . And I want to note that there is a version of the plug-in for <a href=su jquery.com "jQuery title-bookjQuery ">.
Download Low Pro here

Well, now let's see it in action:

First we include our libraries in XHTML and do not forget - for everything to work your XHTML must be valid , otherwise Javascript may behave unpredictably.




In main.js we will add our rules.
')
Example 1:

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

And here is our first rule that intercepts an onclick event in all the “divs” with the class “myclass” for all the elements “a”. return false is needed so that the usual behavior of the element “a” does not work.

Example 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');
	 }
 }); 

In this example, CSS uses third-level attribute selectors and a grouping of rules with different events.

As you can see everything is very simple, I don’t think to write more examples, better download them here.