[北京|结业弟子]JS-刘其勇|2017年05月23日的日报-技能树.IT修真院

发表于： 2017-05-23 17:16:57

1 972

项目日报在下面--

简述JS中的event delegate(事件委托)

1.背景介绍

浏览器获取事件的两种方式：事件冒泡和事件捕获

事件冒泡：先触发子元素的事件，再触发父元素的事件

事件捕获：先触发父元素的事件，再触发子元素的事件

主流浏览器均支持且优先使用事件冒泡机制

事件委托：当给节点注册事件时，不用为每个子节点(例如li节点)添加相同的事件，而是借助事件冒泡机制，将这些事件统统委托给他们的父节点(ul)，进行捕获处理
(把事件绑定到ul上，而不是li上)

2.知识剖析

Jquery .deligate方法

功能：delegate() 为指定的元素（被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。

语法：$(父元素).delegate(子元素,事件,函数)


                      $("div").delegate("button","click",function(){
                          $("p").slideToggle();
                      });

3.常见问题

事件委托解决了什么问题，与其它事件绑定的异同

4.解决方案

时间委托解决的问题：
(1-可以绑定文档完成后新出现的子元素)
（2-指定绑定事件的范围（父元素））
3-不需要为每个元素设置绑定

与其它事件绑定的异同

.on()	可多个事件	绑定新元素	冒泡	不能绑定子元素
.bind()	可多个事件	绑定新元素	冒泡	不能绑定子元素
.delegate()	可多个事件	绑定新元素	冒泡	绑定子元素
.click()	单个事件	不可绑定新元素	冒泡	绑定子元素

5.编码实战：

6.扩展思考

7.参考文献

事件冒泡与事件捕获

4种事件绑定

jQuery事件参考手册

今日完成：

今天demo，出现的问题：

【职位列表】日期搜索不能正确搜索--搜索结果与预计不符。
【职位列表】日期搜索页面样式错误--日期的两个输入框换行了，这样直觉上不觉得有关系。
【artical列表】按状态搜索，草稿，上线，不能正确搜索，这里改完后没测好。
后台测试数据太少，不能正确在前台显示//导致前台缺少详细数据，和图片，难以展示
【后台管理】新增账户失败//这里的控制器没有加进去，自己也没测试到。

出现问题的原因还是功力太浅，还有就是自己改完后，因为一只在改，所以有些地方没注意。

第二天继续demo，希望能通过

明日计划；

复盘项目demo，

正式项目的需求评审，

准备进正式项目的PPT

问题:

对这个项目的组件的深层原理还是没有感觉真正明白。

另外，因为没参加需求评审，技术方案评审，所以还是少了点什么。

进项目要注意一下，多多沟通，

还有，多和师弟沟通，监督进度，带好氛围ie。最进的进度都不大快。

【萝卜多复盘项目】