Oooo event:Selectors for Prototype
My article on the Separation of Layout and Logic touched on a key point of heavy Javascript use in an Ajax rich environment...the need for separation of Javascript code - namely events - from the HTML. Behaviour was my suggested CSS/Javascript event selector framework.
Behaviour is a stand-alone event framework. You can use it regardless of whether or not you are using Prototype (or some other Ajax/Javascript library) - which is pretty cool. But...if you are using Prototype there is a lot of code duplication between the two libraries. Luckily, Mir.aculo.us has brought event:Selectors to my attention which is causing me to sing a different tune! Justin Palmer, event:Selector's creator is crediting Behaviour for the idea, but he's has what Behaviour has done a few steps further.
- event:Selectors is dependant on Prototype which reduces code duplication.
- It has reduced the layer of complexity of event selecting by one layer of abstraction.
- The framework allows concatenation of CSS elements for event assignment.
- Lastly, its added a loaded event that is triggered when an element loads.
Here's an example of Behaviour event handlining:
JavaScript:
-
var rules = {
-
'#item li': function(element) {
-
Event.observe(element, 'click', function(event) {
-
var element = Event.element(element);
-
element.setStyle('color': '#c00');
-
});
-
},
-
-
'#otheritem li': function(element) {
-
Event.observe(element, 'click', function(event) {
-
var element = Event.element(element);
-
element.setStyle('color': '#c00');
-
});
-
}
-
};
-
Behaviour.register(rules);
Here's the equivalent in event:Selectors:
JavaScript:
-
var Rules = {
-
'#item li:click, #otheritem li:click': function(element) {
-
element.setStyle('color': '#c00');
-
}
-
};
-
-
EventSelectors.start(Rules);
Simplification makes me happy. I'm a convert.
Discuss This Article
Leave a Reply
(6082) - prototype onclick (111) - eventselectors (87) - event selectors (64) - prototype onmouseover (45) - prototype mouseover (36) - prototype observe click (34) - prototype click (34) - prototype behaviour (28) - prototype setstyle (19) - onclick prototype (18) - prototype selector (15) - prototype selectors (13) - onmouseover prototype (12) - mouseover prototype (11) - prototype observe key (11) - prototype onclick event (10) - prototype set onclick (10) - prototype observe onmouseover (10) - prototype click event (9) - event.observe click (8) - prototype event selectors (8) - prototype click() (8) - prototype event calendar (7) - event (7) - behaviour prototype (7) - javascript prototype setStyle (7) - javascript prototype calendar (6) - prototype observe mouseover (6) - prototype mouseover event (6) - Event.observe onmouseover (5) - javascript calendar prototype (5) - prototype onhover (5) - prototype observe('click (5) - javascript prototype onmouseover (5) - prototype Element click (5) - prototype event selector (5) - events prototype (4) - prototype onmouseover event (4) - onclick with prototype (4) - prototype (4) - prototype setstyle example (4) - prototype change onclick (4) - Event.observe onmousemove (4) - javascript prototype event (4) - prototype javascript mouseover (4) - prototype change onclick of an element (4) - prototype observe function (4) - set onclick with prototype (4) - javascript prototype click (4) - Event.observe mouseover (4) - observe prototype click (3) - prototype mouse over (3) - key.observe javascript (3) - prototype hover (3) - prototype event.observe click (3) - prototype observe events (3) - prototype click observe (3) - prototype observe hover (3) - Event.observe class (3) - prototype click a (3) - prototype event.observe onclick (3) - prototype event observe click (3) - prototype.onclick (3) - prototype observe class (3) - prototype setStyle hover (3) - prototype setstyle examples (3) - javascript prototype selectors (3) - prototype observe mouse (3) - prototype hover event (3) - javascript prototype selector (3) - prototype onclick a href (3) - prototype observe onMouseMove (2) - prototype Behaviour onclick (2) - ajax observe event click (2) - prototype .click (2) - Event.observe click hover (2) - prototype event list tutorial (2) - .observe('click', (2) - behaviour in prototype (2) - prototype javascript onmouseover (2) - prototype onclick function (2) - prototype element onclick (2) - prototype element mouseover (2) - prototype set onmouseover (2) - javascript prototype color selector (2) - prototype.onmouseclick (2) - observe onmouseover (2) - prototype.click = function (2) - javascript prototype setstyle class (2) - calendar ajax events prototype (2) - prototype css selector observe (2) - observe prototype (2) - prototype javascript onhover (2) - prototype Behaviour events (2) - observe click prototype (2) - prototype observe tags (2) - Event Observe mouse over (2) - prototype event element tutorial (2) - prototype observe tutorial (2) - prototype click (2) - event:selectors (2) - javascript prototype mouseover (2) - prototype setstyle color a (2) - javascript Event.observe onmouseover (2) - Event.Observe onhover (2) - javascript prototype click() (2) - onmousemove prototype (2) - each.observe prototype (2) - prototype onclick change class (2) - onclick event prototype (2) - click outside javascript prototype (2) - observe('onmouseover (2) - prototype event observe onclick (2) - event.prototype (2) - PROTOTYPE event key (2) - EventSelectors prototype (2) - Event.observe example (2) - prototype observe (2) - setStyle javascript (2) - prototype key event (2) - prototype event mouseover (2) - selectors prototype (2) - prototype observe mouse over (2) - prototype onclick example (2) - prototype on mouseover (2) - prototype onmouseover examples (2) - prototype observe onclick (2) - prototype $$ selector (2) - prototype event list (2) - prototype set style (2) - prototype calendar events (2) - click prototype javascript (2) - Event.observe examples (2) - prototype click release mouseover (1) - javascript prototype change rule (1) - css events tutorial (1) - using prototype event selectors (1) - prototype behaviour for elements (1) - prototype Event.element(event) onclick (1) - prototype Event.click (1) - prototype event observe onmouseover (1) - style onmouseover prototype (1) - prototype observe :complete (1) - prototype event.observe IE tutorial (1) - prototype ie onclick (1) - prototype adding onclick (1) - Event.observe by class (1) - javascript prototype event observe mousemove (1) - Event.observe tutorial (1) -
pingback:
[...] Separation of Layout and Logic with event:Selectors [...]