您好,欢迎来到尔游网。
搜索
您的当前位置:首页JS设计模式之委托模式

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

 

因篇幅问题不能全部显示,请点此查看更多更全内容

Copyright © 2019- axer.cn 版权所有 湘ICP备2023022495号-12

违法及侵权请联系:TEL:199 18 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务