Page 34 - JavaScript修炼之道

P. 34

任务9 利用事件委托 21

切换条目内容

dom/delegation.html

<ul id="items">
<!—我们将使用JS在每个LI中插入切换器 -->
<li><div><p>Data 1</p><p>Data 2</p></div></li>
<li><div><p>Data 1</p><p>Data 2</p></div></li>
<li><div><p>Data 1</p><p>Data 2</p></div></li>

</ul>
这是一段基于Prototype的脚本：

dom/delegation.js

$('items').observe('click', function(e) {
var trigger = e.findElement('a.toggler');
if (!trigger) return;
e.stop();
var content = trigger.up('p').next('div');
if (!content) return;
content.toggle();
trigger.update(content.visible() ? 'Close' : 'Open');
trigger.blur();
});

$('items').select('li').each(function(item) {
item.insert({ top: '<p><a class="toggler" href="#">Open</a></p>' });
item.down('div').hide();
});

使用事件代理

// Prototype 1.7
$('items').on('click', 'a.toggler', handlerFx);
// jQuery 1.4
$('a.toggler', '#items').live('click', handlerFx);
// YUI 3
Y.delegate('click', handlerFx, '#items', 'a.toggler');
// Ext
Ext.get('items').on('click', handlerFx, this, { delegate: 'a.toggler' });