JavaScript イベント委任と jQuery イベント バインディングのオン、オフ、および 1

<div style="background:red;width:200px;height:200px;" id="box">
<input type="button" value="按钮" class="button" />
</div>

$('.button').bind('click', function () {
$(this).clone().appendTo('#box');
});

$('.button').live('click', function () {
$(this).clone().appendTo('#box');
});

//.live()无法使用链接连缀调用，因为参数的特性导致
$('#box').children(0).live('click', function () {
$(this).clone().appendTo('#box');
});

$('.button').live('click', function () {
$(&#39;<input type="button" value="复制的" class="button" />&#39;).appendTo(&#39;#box&#39;);
});

$('.button').die('click');
由于.live()和.die()在jQuery1.4.3 版本中废弃了，之后推出语义清晰、减少冒泡传播层次、
又支持链接连缀调用方式的方法：.delegate()和.undelegate()。但这个方法在jQuery1.7 版本中
被.on()方法整合替代了。
$('#box').delegate('.button', 'click', function () {
$(this).clone().appendTo('#box');
});
$('#box').undelegate('.button','click');
//支持连缀调用方式
$('div').first().delegate('.button', 'click', function () {
$(this).clone().appendTo('div:first');
});

/替代.bind()方式
$('.button').on('click', function () {
alert('替代.bind()');
});
//替代.bind()方式，并使用额外数据和事件对象
$('.button').on('click', {user : 'Lee'}, function (e) {
alert('替代.bind()' + e.data.user);
});
//替代.bind()方式，并绑定多个事件
$('.button').on('mouseover mouseout', function () {
alert('替代.bind()移入移出！');
});
//替代.bind()方式，以对象模式绑定多个事件
$('.button').on({
mouseover : function () {
alert('替代.bind()移入！');
},
mouseout : function () {
alert('替代.bind()移出！');
}
});
//替代.bind()方式，阻止默认行为并取消冒泡
$('form').on('submit', function () {
return false;
});

$('form').on('submit', false);
//替代.bind()方式，阻止默认行为
$('form').on('submit', function (e) {
e.preventDefault();
});
//替代.bind()方式，取消冒泡
$('form').on('submit', function (e) {
e.stopPropagation();
});
//替代.unbind()方式，移除事件
$('.button').off('click');
$('.button').off('click', fn);
$('.button').off('click.abc');
//替代.live()和.delegate()，事件委托
$('#box').on('click', '.button', function () {
$(this).clone().appendTo('#box');
});
//替代.die()和.undelegate()，取消事件委托
$('#box').off('click', '.button');
注意：和之前方式一样，事件委托和取消事件委托也有各种搭配方式，比如额外数据、
命名空间等等，这里不在赘述。
不管是.bind()还是.on()，绑定事件后都不是自动移除事件的，需要通过.unbind()和.off()
来手工移除。jQuery 提供了.one()方法，绑定元素执行完毕后自动移除事件，可以方法仅触
发一次的事件。
//类似于.bind()只触发一次
$('.button').one('click', function () {
alert('one 仅触发一次！');
});
//类似于.delegate()只触发一次
$('#box).one('click', 'click', function () {
alert('one 仅触发一次！');
});

<div>
<input id="a" type="button" value="按钮1">
<input id="a" type="button" value="按钮2">
</div>

$('div').click(function(e){
alert('事件类型：'+ e.type + '，Value：' + $(e.target).val());
})