JS设计模式之委托模式

委托模式：多个对象接收并处理同意请求，他们将请求委托给另一个对象统一处理请求。

 

（例）一无序列表，点击li元素当前元素发生一系列改变。

ul.onclick = function(){
     var e = e || window.event;
            tar = e.target || e.srcElement;
      if(tar.nodeName.toLowerCase() === 'li'){
            tar.style.backgroundColor = 'grey'
      }
}  //将子元素的事件委托给父元素，通过事件冒泡传递，再判断事件源的某种特性（类名、节点名称、自定义属性等）来执行某一业务逻辑

将子元素的事件委托给父元素，再通过一些条件判断子元素的特性，不仅可以优化页面中事件的数量，还可以对尚未添加的元素绑定事件。

var p = document.createElement('p');
p.innerHTML = '新增p标签';
div.appendChild('p');

div.onclick = function(){
     var tar = e && e.target || window.event.srcElement;
      if(tar.nodeName.toLowerCase() === 'p'){
            tar.innerHTML = '我要改变添加的P标签的内容。'
      }
}  //为div元素添加点击事件，当新增子节点后，点击p元素仍可以触发相应逻辑