今天完成的事情：上午将任务7中的列表渲染完成，任务7完成。下午准备今晚小课堂的资料准备。进一步学习了jquery中绑定事件的方法。晚上对小课堂的内容进行了整理，上传视频，上传PPT文档。

明天计划的事情：开始任务8的学习，添加静态页面的按钮，按照步骤学习知识点。

遇到的问题：

 还是昨天遇到的如何将数据渲染到页面的问题，昨天遇到了过滤器filter，今天进一步学习了一下，然后对那些后台是数值但是要转换成文字的数据进行了处理。开始不知道要把.filter（）放在js文件的哪个位置进行编写。在网上找相关的demo，但是感觉可用的信息很少。后来就一步步自己试，伴随着报警的一次次出现，一上午过去了，也终于是成功了。原来是要和controller同层级显示，写在获取数据后的controller之后。在filter方法中添加了一个函数，使用if(){}else if(){}条件语句进行判别返回数据的值，然后返回相应的文字。慢慢摸索着就把想要的页面渲染出来了，还是很高兴的。

收获：掌握了简单的渲染页面的方法。然后学习了jquery中绑定事件的方法，现将今天小课堂的内容整理如下：

Jquery中的bind(),live(),delegate(),on()有什么区别？

1.背景介绍

在学习和实践jquery框架的过程中，由于开始，只是使用的《锋利的Jquery》中绑定事件的方法，只认识到了bind()的方法。而该书是基于jquery1.7.1编写的，目前最新的版本已经到了3.2。对于绑定事件的方法做了调整。后来发现还有live()、delegate()、on()的方法，它们之间有什么样的区别呢？我们来学习讨论一下。

2.知识剖析

2.1 bind()方法

bind()方法用于对匹配的元素进行特定事件的绑定。它直接绑定在现有的元素节点上，也很好的解决了浏览器在事件处理中的兼容问题。

例如，它的调用格式如下：

              bind(type, [data], fn) // 事件类型(必选)，传递的参数(可选)，相关的函数

              $('a').bind('click',function(){alert('that tickles!')}) 

JQuery扫描文档找出所有的$(‘a’)元素，并把alert函数绑定到每个元素的click事件上。

在jquery中事件进行绑定时比原生javascript的绑定少了“on”。

2.2 live()方法

live()是事件委托的概念来执行，把节点的处理委托给了document，向当前或未来的匹配元素添加一个或多个事件处理器。            

              live(type, [data], fn) // 事件类型(必选)，传递的参数(可选)，相关的函数

              $('a').live('click',function(){alert('That tickles!')})

它是将函数绑定到$(document)元素上，并使用'click'和'a'作为参数。只要有事件冒泡到document节点上，它就查看该事件是否是一个click事件，以及该事件的目标元素与'a'这一CSS选择器是否匹配，如果都是的话，则执行函数。

2.3 delegate()方法

delegate()方法的行为有点类似live()。但是不是把选择器和事件的信息附加到了document上，而是可以自行选择它要附加的DOM元素，这个技术可以让事件的委托正常工作。我们的选择又多了一些灵活性，不单可以利用事件委托，还可以选择委托的对象。它适用于当前或未来的元素（比如由脚本创建的新元素）。                       

      delegate(selector,[type],[data],fn) //元素节点(字符串形式，一般是子级元素childselector)，事件类型，传递的参数(可选)，相关的函数

      $('#container').delegate('a', 'click', function() { alert("That tickles!") }); 

JQuery扫描文档查找$(‘#container’)，并使用click事件和’a’这一CSS选择器作为参数把alert函数绑定到$(‘#container’)上。任何时候只要有事件冒泡到$(‘#container’)上，它就查看该事件是否是click事件，以及该事件的目标元素是否与CCS选择器相匹配。如果两种检查的结果都为真的话，它就执行函数。

2.4 on()方法

on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。它是在1.7版本中被提出来的，提供绑定事件处理程序所需的所有功能。用于替换 bind()、delegate()和 live()。

           on(events,[selector],[data],fn) // 事件类型，元素节点(可选)，传递的参数(可选)，相关的函数

3.常见问题

问题: bind(),live(),delegate(),on()的特点及区别？

4.解决方案

bind()的特点：直接绑定在已经存在的元素上，但是对在它执行完后动态添加的那些元素上不起作用。因为直接绑定在具体的元素上，响应事件及时，它是出现最早的一种绑定事件的方法。这种方法很浪费资源，引起性能问题，因为它要匹配选择器中的每一项并且挨个设置相同的事件处理程序。如果在页面加载前要处理添加事件的话，会影响加载效率的。在jquery1.7版本以前比较受推崇。在jquery1.7版本之后，官方推荐使用on()方法代替。在jquery3.0版本之后，已经删除该方法。

live()的特点：与bind()的实现原理却不同。live()方法附加事件处理程序在document上通过冒泡来关联匹配到相应的元素和事件信息。对新添加的元素依然有效。不需要在每个元素上去绑定事件，而只在document上绑定一次就可以了。可以在document ready之前就可以绑定那些需要的事件。但是jquery1.9版本之后，已经被弃用了。

delegate()方法的特点：更精确的小范围使用事件代理，性能优于live()。它可以自由选择附加的选择器和事件信息的位置，把事件绑定到具体元素的上一级较稳定（不会动态地添加或者删除、变化）的元素上，缩短了事件冒泡的路径。同样对新添加的元素依然有效。在jquery3.0版本之后，已经删除该方法。

on()的特点：是以上三种方法的统一。可以使用一个方法，设置不同参数值来实现上述三种方法的功能。简化了jQuery代码库，并删除一个界别的重定向。

5.编码实战

demo1 将bind方法转换为on方法 ：https://ptteng.github.io/PPT/demo/js-03-event%20binding/demo1.html

demo2 将live方法转换为on方法 ：https://ptteng.github.io/PPT/demo/js-03-event%20binding/demo2.html

demo3 将delegate方法转换为on方法 ：https://ptteng.github.io/PPT/demo/js-03-event%20binding/demo3.html

demo4 多事件处理 ：https://ptteng.github.io/PPT/demo/js-03-event%20binding/demo4.html

6.扩展思考

问题: 如何删除一个事件？

demo5 删除事件 ：https://ptteng.github.io/PPT/demo/js-03-event%20binding/demo5.html

7.参考文献

参考一：jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解：http://www.jb51.net/article/78298.htm

参考二：jQuery的.bind()、.live()和.delegate()之间区别：http://kb.cnblogs.com/page/94469/

参考三：jQuery中bind，live，delegate，on绑定事件的方式与区别：http://www.cnblogs.com/TroubleMan/p/5548624.html

参考四：详解jQuery中 .bind() vs .live() vs .delegate() vs .on() 的区别：http://blog.csdn.net/hi_kevin/article/details/37757657

参考五：jQuery事件方法：http://www.runoob.com/jquery/jquery-ref-events.html

8.更多讨论

讨论点：以上介绍到的jQuery事件方法的知识点中在使用过程中有所发见的，讨论一下？