在实际开发中，经常需要为Dom元素绑定事件，如果页面上有4个li元素，点击对应的li，弹出对应的li内容，怎么做呢？是不是很简单？
大多数人的做法都是：获取元素，绑定事件
1
- 2
- 跟着ghostwu学习javascript设计模式的应用1 3
- 跟着ghostwu学习javascript设计模式的应用2 4
- 跟着ghostwu学习javascript设计模式的应用3 5
- 跟着ghostwu学习javascript设计模式的应用4 6
如果页面上有1w个元素， 甚至10w个元素呢?
继续使用上述方式，会有很大的性能问题，这个时候，有人可能要问，实际中的项目 哪有1w个，10w个元素的。一般的项目可能没有，但是社交类的网站，如微博，其他的如大批量文件上传等能功能，都是需要动态创建dom元素，而且数量巨大，并且创建出来的dom元素，一般都需要绑定事件和相应的特效。一般情况下，用普通的绑定事件方式是不能给动态创建的dom元素绑定到事件的，所以这里就产生了两个问题：
1，当页面元素很多的时候，如果给这些元素绑定上事件？
2，当动态创建dom时，如果给动态创建的dom绑定上事件和相应的特效？
这就是本文需要讨论的模式-委托模式
采用事件委托可以顺利解决上面2个问题
那么，什么是事件委托呢？
给元素的父元素绑定事件，利用冒泡原理，当子元素触发事件的时候，会去触发父元素的事件，然后把相应的业务逻辑放在父元素的事件中去处理。通俗点讲就是，子元素不做事件绑定，把绑定事件的操作委托给父元素，这就叫做事件委托， 委托有一个特性，他能够在事件触发中，识别到具体是由哪个子元素触发的，这个就是事件对象的target属性
1
- 2
- 跟着ghostwu学习javascript设计模式的应用1 3
- 跟着ghostwu学习javascript设计模式的应用2 4
- 跟着ghostwu学习javascript设计模式的应用3 5
- 跟着ghostwu学习javascript设计模式的应用4 6
当我们点击li的时候，就能通过事件对象oEvent.target识别到触发事件的li元素, srcElement是兼容ie的写法。
在没有事件委托之间，我们通过javascript做一个hover的功能，一般这么做.
1
- 2
- 跟着ghostwu学习设计模式 3
- 跟着ghostwu学习设计模式 4
- 跟着ghostwu学习设计模式 5
- 跟着ghostwu学习设计模式 6
- 跟着ghostwu学习设计模式 7
如果li元素很多，就会产生性能问题，而采用委托模式，我们可以这么做
1
- 2
- 跟着ghostwu学习设计模式1 3
- 跟着ghostwu学习设计模式2 4
- 跟着ghostwu学习设计模式3 5
通过事件委托，把元素绑定到父元素，大大提高性能
至此，我们解决了第一个问题：当页面元素很多的时候，如果给这些元素绑定上事件
对于新创建的dom元素，普通绑定事件的方式，是不能绑定到这些dom元素的
1 2
- 3
- ghostwu1 4
- ghostwu2 5
新创建的li元素，是不能绑定到onmouseover和onmouseout事件的，我们采用委托模式之后，可以这么做
1 2
- 3
- ghostwu1 4
- ghostwu2 5
至此，我们解决了第二个问题：当动态创建dom时，如果给动态创建的dom绑定上事件和相应的特效
最后，我们结合委托模式，来实战一个微博发布的功能，微博发布之后，给动态创建的dom元素添加手风琴折叠功能
Document