事件委托的使用

• 当UI含有大量按钮
• UI含有比较长的列表
• 表格中的大量单元格含有类似链接操作

如果为所需操作都建立监听器会相当麻烦，解决方案是在父元素上监听事件（将事件处理程序放在一个容器元素上，然后通过事件对象的target属性找到他后代那一个元素发生了事件。）

 

 newContent += "<tr >"
            + '<th>'+d+'</th>'
            + '<th >'+responseObject.events[i].name+'</th>'
            + '<th>'+responseObject.events[i].sex+'</th>'
            + '<th>'+responseObject.events[i].account+'</th>'
            + '<th>'+responseObject.events[i].recogniseRate+'</th>'
            + '<th>'+responseObject.events[i].uploadedPicNum+'</t
            + '<th>'+ "<button   type='button' class=\"btn btn-s btn-primary\" value='modify_"+_account+"'>修改</button>"+'</th>'
            + '<th>'+ "<button   type='submit' class=\"btn btn-s btn-primary\" value='delete_"+_account+"'>删除</button>"+'</th>'
            + "</tr>";

下面是获取树间发生的元素的步骤、处理的函数、处理事件委托的方式(本例中是click）

第一部分的作用是 定义gettarget为获取事件、判断浏览器是否支持gettarget（如不支持则使用target的方式）

第二部分定义处理函数，也是整个过程中的精髓

本例中获取的是按钮的点击事件，通过target获得table的字段信息，like account 、email之类的，在这要实现的是把获取到的account作为验证信息提交给PHP，从而完成相应的信息的删除

为了将表格里的信息对应到表单里修改，使用了类ajax的方法实现类局部刷新功能。之所以没有采用跳转到新建表单界面再利用ajax从数据库获取数据填入表单的方式，是由于没有找到容易实现的按钮点击时携带新页面PHP获取数据所需的字段的方法。

 

//获取事件发生的元素
function getTarget(e) {
if (!e){
    e = window.event;
}    
return e.target || e.srcElement;
}

//处理事件的函数
function handleEvent(e) {
    var target = getTarget(e);
    if (target.tagName === "BUTTON")
    {
        //1.判断target.value是以modify开头的还是delete开头的
        //2.若以modify开头，则可以获得account
        //3. 处理modify的情形
        var node = target.parentNode.parentNode;
        strCode=target.value;
        var fdStart = strCode.indexOf("modify");
        var fbStart = strCode.indexOf("delete");
        var act = node.childNodes[3].innerHTML;
        if (fdStart === 0)
        {
            var accounts = node.childNodes[3].innerHTML;
            var newData='';
            newData  = "<form  id='myform' class=\"form-si\" action=\"../requests/myPhotographers/modifyPhotographer2.php\" method=\"post\">"
                + '<input type="text" class="input-block-level"  value='+node.childNodes[3].innerHTML+'>'
   class=\"btn btn-large btn-primary\">取消</a> <button type=\"button\" class=\"btn btn-large btn-primary\" value='ensure_\"+accounts+\"' >确定</button></p></div>"
                + "</form>";
            document.getElementById("u").innerHTML = newData;
        }


        if (fbStart === 0)

        {
          //alert( node.childNodes[3].innerHTML// );

            var con;
            con = confirm('THE'+node.childNodes[3].innerHTML+'WILL BE DELETE');//弹出对话框‘是否删除’'‘。
            if(con ===true) {
                this.location = "../requetogrpher.php?account="+act+"";
                alert('删除成功');
                // alert('THE'+node.childNodes[3].innerHTML+'WILL BE DELETE');
            }
            }
    }

}

//处理事件委托
var obj = document.getElementById("usem");
obj.addEventListener('click',function (e) {handleEvent(e);

},false);

    今天所遇问题：

 1、首单词匹配

pm：

 var fdStart = strCode.indexOf("modify");
22         var fbStart = strCode.indexOf("delete");
23         var act = node.childNodes[3].innerHTML;
24         if (fdStart === 0)

2、点击删除按钮，没有删除数据

pm：通过后台判断是执行PHP时没有传过去account，首先找js中打开连接的方法，用？匹配的方法实现了删除效果

this.location = "../rests/myPhotographer.php?account="+act+""

3、表格和表单格式错乱。

pm：为了使表单能将表格信息替换，在HTML代码里将表格容器放入到表单容器里，结果导致表格格式在表单格式基础上加载，首先判断为css代码冲突，但通过一系列的css代码修改整合发现问题并没有解决（期中有通过屏蔽一方的css，已实现单个容器内的样式的实现，但是并没有停下来作进一步的思考，而是开始找通过类似本例中删除功能的传字段的方法来实现在新打开修改表单中实现，通过一系列实践发现并不可行），通过高人指点将表单和表格的class移入到js中，在把id添加到div容器中以实现替换效果。但将一些列属性移入到js中时又引发一系列问题，like表格的样式不能实现，受指点得到table容器（所包含class）要将整个表格元素包含。

    还有表单在js中不能添加action，这个解决方案已有就是用类本例删除方法获取对应信息通过PHP完成修改，明天再加。

小结：

　　存在问题：对实现方法的理解不深刻，知道通过事件委托可以完成页面大量链接的，而对实现原理知之甚少。

        解决方法：多研究代码，要做到知其意、晓其理，不能畏难、怕麻烦

　　所获：对target有了深一步的了解，掌握了父元素祖父元素的信息获取方法及作用原理