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元素仍可以触发相应逻辑

 

你可能感兴趣的:(前端系列学习,JS委托模式)