事件委托机制

     事件委托机制是利用的是冒泡的原理的，把事件的监听转换到其父元素上，也就是把事件绑定到父元素上面，然后在事件中获取子元素的对象，对其进行相应的操作。

优点是：

1）能够提高性能，有些时候，如果一个元素中有许多的子元素，而且子元素上都需要有事件的绑定的话，我们给每一个子元素都添加一个事件的话，显得繁琐，而且很多时候都需要遍历父元素中的子元素。这时候，我们就可以使用事件委托机制，把需要绑定到子元素上的事件，都监听到父元素上，当触发子元素的事件的时候，因为冒泡的机制就会触发到父元素的事件，然后我们在事件中获取得到触发该事件的子元素的对象，对其进行相应的操作。

2）减少代码量。而且新添加的元素也可以直接绑定到事件的，不需要额外去绑定事件，因为事件已经绑定在父元素上了。

     事件冒泡：事件促发的最深层元素首先接受事件，然后是它的父元素，然后依次往上，直到document对象接受最终的事件。

下面给一个例子说明事件委托机制的原理。

将鼠标悬浮至某个元素上，就会出现黄色的背景，然后点击按钮，可以往页面上添加元素，同时新添加的元素也是可以有悬浮然后出现黄色背景的效果。

.wrapper{position: relative;width: 400px;margin: 100px auto;}ul{position: absolute;list-style: none;width: 200px;}ul li{background: #666;color: white;padding: 5px 10px;}ul li:hover{color:black;}#btn{cursor: pointer;width: 100px;height: 30px;line-height: 30px;background: #00a1ff9c;border:none;box-shadow: 2px 1px 3px #666;border-radius: 4px;position: absolute;right:0px;}
1111
2222
3333
4444