<button type="button" data-target="#div1">显示id为div1的元素里的内容</button>
<button type="button" data-target="#div2">显示id为div2的元素里的内容</button>
为你的每个要点击的按钮加上data-target属性（这是HTML5的data-*特性），假设这些按钮的共同父元素是
#button-wrap
那么就可以这样用代理
$('#button-wrap').delegate('button[data-target]', 'click', function() {
// 获取存储在按钮上的作为 jQuery 选择器的 target 值
var target = $(this).data('target')
// 在 HTML5 中也可以是 var target = this.dataset.target
// 根据target指定的选择器，显示该元素
$(target).show()
})
H5edu教育Html5为您解答：1.事件代理的原理和意义
实现原理是利用了浏览器的事件冒泡和事件源（target）。
在js中事件会冒泡到父级节点，所以我们可以在父级节点进行事件代理。例如一个使用jQuery的函数：
$("#tab td").click(function(){
$(this).css("background","red")
})
上面的函数给一个tab的td加了一个单击事件，但是如果表格1000行，就得绑定1000次，
$("#tab").bind("click",function(ev)){
var $obj=$(ev.target)
$obj.css("background","red")
}
以上用bind函数将click绑定到了tab上，从而实现事件代理。
2.jQuery中的绑定函数
(1).bind()为每个匹配元素的特定事件绑定事件处理函数
$("#niu").bind('click',function(){
alert("hello niuniu")
})
此代码把id为niu的元素响应事件click，并显示警报。使用bind绑定多个事件时，可以这样
$("#niu").bind('mouseenter mouseleava',function(){
$(this).css("background","yellow")
})
$("#foo").bind({
click:function(){
},
mouseenter:function(){
}
})
(2).delegate()指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数
$("table").delegate("td","click",function(){
$(this).toggleClass("chosen")
})
(3).on在选择元素上绑定一个或多个事件的事件处理函数
function greet(event) { alert("Hello"+event.data.name)}
$("button").on("click", { name: "Karl" }, greet)
$("button").on("click", { name: "Addy" }, greet)
(4).live给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的
$("a").live("click", function() { return false})
以上是常用的绑定函数。
技术文档引用：
自从.live()方法处理事件一旦传播到文档的顶部，live事件是不可能停止传播的。同样地，.delegate() 事件将始终传播给其中包含的被委托元素；同时，任何在 DOM 树中，比这些元素低的元素上绑定的相同事件，在 .delegate() 事件被调用的时候，也会被触发。因此，如果要在事件中阻止委托事件被触发，可以调用event.stopPropagation()或者返回false防止委派处理程序冒泡。
简单来说，.bind()是直接绑定在元素上，而.live()和.delegate()则是通过冒泡的方式来绑定到元素上的。.bind()方法只能给当前存在的元素绑定事件，对于事后采用JS方式新生成的元素无效，而live方法可以对后生成的元素也可以绑定相应的事件。
