easyUI之为splitbuuton绑定事件

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

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

<a href="javascript:void(0)" id="sb" class="easyui-splitbutton" data-options="menu:'#mm',iconCls:'icon-ok'" οnclick="show('OK')">Ok</a>
<div id="mm" style="width:100px;">
<div data-options="iconCls:'icon-ok'" οnclick="show('OK')">Ok</div>
	<div data-options="iconCls:'icon-cancel'" οnclick="show('error')">Cancel</div>
</div>

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

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

<a href="javascript:void(0)" id="sb" class="easyui-splitbutton OK" data-options="menu:'#mm',iconCls:'icon-ok'">Ok</a>
<div id="mm" style="width:100px;">
	<div data-options="iconCls:'icon-ok'" class="OK">Ok</div>
	<div data-options="iconCls:'icon-cancel'" class="Cancel">Cancel</div>
</div>

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

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

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

<a href="javascript:void(0)" id="sb" class="easyui-splitbutton OK" data-options="menu:'#mm',iconCls:'icon-ok'">Ok</a>
<div id="mm" style="width:100px;">
	<div data-options="iconCls:'icon-ok'" class="OK">Ok</div>
	<div data-options="iconCls:'icon-cancel'" class="Cancel">Cancel</div>
</div>

$("#mm").bind("click",function(e){
	var classname = e.target.className;
	if(classname.indexOf("OK") > -1)
		alert("OK");
	if(classname.indexOf("Cancel") > -1)
	<span style="white-space:pre">	</span>alert("Cancel");
})

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

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

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