index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>事件对象</title>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="jquery-migrate-1.2.1.js"></script>
<script type="text/javascript" src="demo.js"></script>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<!--
<div style="width:200px; height:200px; background:green;" id="box">
<input type="button" class="button" value="按钮" />
<input type="button" class="button" value="按钮" />
<input type="button" class="button" value="按钮" />
</div>
<form action="123.html">
<div style="width:200px; height:200px; background:green;" id="box">
<input type="submit" class="button" value="按钮" />
</div>
</form>
-->
<div style="width:200px; height:200px; background:green;" id="box">
<input type="button" class="button" value="按钮" />
</div>
</body>
</html>
?
demo.js
$(function(){
//普通绑定 .bind
//普通解绑 .unbind
//事件委托 .live .dategate
//解除委托 .die .undelegate
//新方法绑定 .on
//新方法解绑 .off
/*
$(‘.button‘).on(‘click‘,function(){
alert(‘替代bind‘);
});
$(‘.button‘).on(‘click‘,{user:‘Lee‘},function(e){
alert(‘替代bind,‘+e.data.user);
});
$(‘.button‘).on(‘mouseover mouseout‘,function(e){
alert(‘移入移出‘);
});
$(‘.button‘).on({
mouseover:function(){
alert(‘移入‘);
},
mouseout:function(){
alert(‘移出‘);
}
});
$(‘form‘).on(‘submit‘,function(){
return false;
});
$(‘form‘).on(‘submit‘,false);
$(‘.button‘).on(‘click‘,function(){
alert(‘替代bind‘);
});
$(‘.button‘).off(‘click‘);
//替代.live .delegate
$(‘#box‘).on(‘click‘,‘.button‘,function(){
$(this).clone().appendTo(‘#box‘);
});
//移出事件委托
$(‘#box‘).off(‘click‘,‘.button‘);
//仅一次事件触发
$(‘.button‘).one(‘click‘,function(){
alert(‘仅一次事件触发！‘)
});
*/
$(‘#box‘).one(‘click‘,‘.button‘,function(){
$(this).clone().appendTo(‘#box‘);
});
});
?
原文：http://onestopweb.iteye.com/blog/2225326