Element/Delegation

Type: Element

扩展元素类型。

delegation是一个常用的方法侦听一个事件,此方法通过侦听父元素来捕获子元素事件,类似于Jquery的live方法,侦听动态内容和高交互页面时使用这个方法。

演示:

• Element.Delegation

例如:

var myElement = $('myElement');
var request = new Request({
    // other options
    onSuccess: function(text){
        myElement.set('html', text); // No need to attach more click events.
    }
});
// Adding the event, notice the :relay syntax with the selector that matches the target element inside of myElement.
// Every click on an anchor-tag inside of myElement executes this function.
myElement.addEvent('click:relay(a)', function(event, target){
    event.preventDefault();
    request.send({
        url: target.get('href')
    });
});

注意事项:

Element method: addEvent

语法:

myElement.addEvent(typeSelector, fn);

参数:

1. typeSelector - (string) 事件名称和css选择器。
2. fn - (function) 事件函数.

例如:

// Alerts when an anchor element with class 'myStyle' is clicked inside of myElement
document.id(myElement).addEvent('click:relay(a.myStyle)', function(){
    alert('hello');
});
 
 
document.id('myElement').addEvent('click:relay(a)', function(event, clicked){
    event.preventDefault(); //don't follow the link
    alert('you clicked a link!');
    // You can reference the element clicked with the second
    // Argument passed to your callback
    clicked.setStyle('color', '#777');
});

返回:

• (element) - 当前元素。

Element method: addEvents

例如:

$('myElement').addEvents({
    // monitor an element for mouseover
    mouseover: fn,
    // but only monitor child links for clicks
    'click:relay(a)': fn2
});

Element method: removeEvent

例如:

var monitor = function(event, element){
    alert('you clicked a link!');
};
 
$('myElement').addEvent('click:relay(a)', monitor);
// link clicks are delegated to element
 
// remove delegation:
$('myElement').removeEvent('click:relay(a)', monitor);

Element method: removeEvents

例如:

var monitor = function(){
    alert('you clicked or moused over a link!');
};
 
$('myElement').addEvents({
    'mouseover:relay(a)': monitor,
    'click:relay(a)': monitor
});
 
// link clicks are delegated to element
// remove the delegation:
$('myElement').removeEvents({
    'mouseover:relay(a)': monitor,
    'click:relay(a)': monitor
});
 
// remove all click:relay(a) events
$('myElement').removeEvents('click:relay(a)');