Xui js jquery like live event
I am using xui js for a mobile web app. Xui js doesn't support the live event like jquery $("#selector").live(). I 开发者_Go百科would like to write some thing at approximates the jquery live.
How does jquery handle event delegation?
Thank you for your time
Mac
To expand on Gaby's answer...
I needed to also look to see if the immediate child was clicked. This can be expanded further to have more of a true delegate like we have in jQuery. However, this code sufficed for my needs.
xui.extend({
is: function (selector) {
var matchedNodes = x$(selector), i=0;
for (i; i<matchedNodes.length; i++)
if (this[0] == matchedNodes[i]) return true;
return false;
},
delegate: function(selector, event, handler){
this.on(event, function(evt){
var elem = evt.target;
if ( x$(elem).is(selector) ){
handler.apply(x$(elem), arguments);
} else{
if ( x$(elem.parentElement).is(selector) ){
handler.apply(x$(elem.parentElement), arguments);
}
}
});
}
});
You can just set the event handling on the document (as live does), or even better find a parent of the elements you want to handle and bind to that (as the delegate does).
Here is a plugin to simulate the delegate function of jquery.
xui.extend({
is: function (selector) {
var matchedNodes = x$(selector), i=0;
for (i; i<matchedNodes.length; i++)
if (this[0] == matchedNodes[i]) return true;
return false;
},
delegate: function(selector, event, handler){
this.on(event, function(evt){
var elem = evt.target;
if ( x$(elem).is(selector) ){
handler.apply(x$(elem), arguments);
}
});
}
});
Usage
x$('ul').delegate('li','click', function(){ this.attr('style','color:red'); });
This will bind an listener to the ul elements, that will handle click events initiated by their descendant li elements. (it will change the clicked elements color to red)
Demo at http://jsfiddle.net/gaby/vhsPU/
As every event delegation system, it makes usage of the fact that browser events do bubble "bottom up". That means, if we have a structure like
<body>
<div>
<span>foobar 1</span>
<span>foobar 2</span>
<span>foobar 3</span>
</div>
</body>
and somebody clicks on the inner foobar span, the browser checks if any event handlers are bound to the span for that click event. If so, execute them. Now the event "bubbles up" to its parent (div). Again, the browser checks if any click event handlers are bound to it, if so execute, and so forth up until the document.documentElement.
In the above example, we would need to bind three event handlers for every <span> element. Knowing the above described concept, we now can just bind one event handler to the <div> parent node and check for the target within the event object. That target is always the original element where the event happened.
There are a couple more things to know. You can stop the propagation of events for instance to explicitly not allow an event to bubble up any further. That can be done by invoking .stopPropagation() which is a method from the event object.
加载中,请稍侯......
精彩评论