事件冒泡以及事件委托

菜鸟一枚，本文是从其他地方学习和自己理解出来的，为了记录自己的学习，不对的地方欢迎在下方评论区指正。

一、定义

他们是描述事件触发时序问题的术语。

事件冒泡：就是元素自身的事件被触发后，如果父元素有相同的事件，如click事件，那么元素本身的触发状态就会传递，也就是冒到父元素，父元素的相同事件也会一级一级根据嵌套关系向外触发，直到document/window，冒泡过程结束。

事件委托：利用事件冒泡，只指定一个事件处理程序来管理某一类型的所有事件。

二、方法

JQuery 提供了两种方式来阻止事件冒泡。

方式一：event.stopPropagation();

 $("#div1").mousedown(function(event){
      event.stopPropagation();
  });

方式二：return false;  

  $("#div1").mousedown(function(event){
   　　return false;
   });

但是这两种方式是有区别的。return false 不仅阻止了事件往上冒泡，而且阻止了事件本身。event.stopPropagation() 则只阻止事件往上冒泡，不阻止事件本身。

jQuery事件委托比较丰富，可用live()，delegate()，bind()，on()等方法。jQuery从1.7之后就不推荐live（）和delegate（）方法了。bind()方法同原生的JavaScript实现方法一样，当父元素代子元素执行事件时，父元素也会触发事件，所以我们需要判断一下触发事件的元素名。此外，用bind()方法给元素绑定事件的时候要注意，它只能给已经存在DOM元素添加事件，不能动态绑定事件。

所以大家还是使用on（）方法吧。

$(function(){            
 $("#lists").on("click","li",function(event)
{
   var target = $(event.target);
   target.css("background-color","red");
  })
})