easyUI之为splitbuuton绑定事件

通过easyUI可以很迅速的创建一个分割按钮，但是easyUI没有为splitbutton封装onClick事件，这里我们谈下如何为它添加单击事件。

第一种，在标签内添加onClick，如下：

Ok

Ok
	
Cancel

function show(name){
	alert(name);
}

第二种，在标签内添加id或class，如下：

Ok

	
Ok
	
Cancel

$(".OK").bind("click",function(){
	alert("OK")
})
			
$(".Cancel").bind("click",function(){
	alert("Cancel")
})

以上两种方法都不可避免的存在一定缺陷，如第一种使用onClick，容易暴露自己的接口，使不法分子在外部直接修改我们的接口；第二种，过于死板，不能动动态增加的元素绑定事件。所以，我比较赞成使用下面这种方法，即通过事件委托添加事件。

第三种，事件委托，如下：

Ok

	
Ok
	
Cancel

$("#mm").bind("click",function(e){
	var classname = e.target.className;
	if(classname.indexOf("OK") > -1)
		alert("OK");
	if(classname.indexOf("Cancel") > -1)
		alert("Cancel");
})

下面是经过easyUI解析后的html代码：

可以很明闲的发现，解析后的html与我们自己写的有很大的不同。

经过实验发现，在第三种方法中，将事件委托用与easyUI上一起使用时有bug存在，似乎是easyUI禁止了事件冒泡，有兴趣的同学可以深入探究下，互相交流。