JS多播事件处理问题小结

        前段时间在项目开发过程中，遇到了一个JS多播事件的问题，第一次处理这类问题感觉还是挺棘手的，现在把这个问题记录下来，以备将来不时之需。

1、首先，我在页面上画了这么一个表格，用于数据的展现：

页面代码如下：

        ★需要加以说明的是，在项目需求中，表格的行记录是通过JS动态追加上去的。也就是说，表格可以根据用户需求动态添加行记录。这里我就不贴出使用JS动态追加表格行标签TR代码，原因是JS动态追加的页面代码跟上面贴出的代码结构类似。

2、然后，利用JQuery为表格每行注册鼠标单击选择事件，用以对行记录进行操作

        JQuery事件注册代码如下：

使用上面代码注册的鼠标单击选择事件，导致了一个行记录选择失灵的问题：

（1）单击第三条记录，事件正常触发

（2）单击第二条记录，第二条记录和第三条记录同时被选中

（3）单击第一条记录，第一、二、三条记录同时被选中

（4）单击第二条记录时，第二、三条记录会被选中

再单击第二条记录的时候，第二、三条记录会被取消选中，而第一条记录却会被选中

由此可见，鼠标无论单击表格中任意一行，都会触发每一行的事件处理函数。

3、我开始考量JQuery事件注册中可能会导致问题出现的原因。让我感觉嫌疑最大的就是，页面表格在动态追加行记录的同时，都要对表格所有行执行JQuery注册单击事件，或许表格行记录的鼠标单击事件重复注册正是问题的根源。

（1）JQuery的多播事件委托机制

例子：

$("#testDiv").bind("click", function(event){
    alert("one");
});
$("#testDiv").bind("click", function(){
    alert("two");
});

单击testDiv对象时，依次提示"one"和"two"。 JQuery添加多播事件委托，也就是为click事件又添加了一个方法，而且新添加方法不会覆盖对象的click事件原有的事件处理函数。

（2）多播事件的抑制：stopImmediatePropagation()取消执行其他的事件处理函数并取消事件冒泡

       如果同一个事件绑定了多个事件处理函数，在其中一个事件处理函数中调用stopImmediatePropagation()方法后将不会继续调用其他的事件处理函数

例子：

$("p")click(function(event){
   //event handler code
   event.stopImmediatePropagation();
});
$("p").click(function(event){
   //This event handler function won't be executed
});

（3）多播事件处理在表格行记录注册事件的应用

for(var index in app.idLocs) {
   var checkboxID = app.idLocs[index];
   var queryListTD = $("tbody#queryList").find("td."+checkboxID);
   $.each(queryListTD, function(i, n){
      $(queryListTD[i]).click(function(event){
         clickTr(checkboxID);
         event.stopImmediatePropagation();
      });
   });
}

       问题记录到这里，我们已经基本解决了上面提到的问题。以上就是我在项目开发过程中解决问题的一点小收获，和大家一起分享了，希望大家给点批评指正意见。