javascript设计模式——委托模式

委托模式:多个对象接收并处理同一个请求,他们将请求委托给另一个对象统一处理请求。
代码实现:对每个段落进行点击事件监听,如果直接对每个P元素添加事件,会造成性能问题,可以通过事件冒泡机制,对父级元素进行监听,同时新添加元素也有了该事件监听。

  <div id="article">
    <p>第一段文字</p>
  </div>
  <script>
    var article = document.getElementById('article')
    // 监听父元素,利用事件冒泡
    article.onclick = function (e) {
      var tar = e.target
      if (tar.nodeName.toLowerCase() === 'p') {
        tar.innerHTML = '我要改变这段文字'
      }
    }
    // 新添加的元素因为使用委托模式,可以得到监听
    var p = document.createElement('p')
    p.innerHTML = '第二段文字'
    article.appendChild(p)
  </script>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 8,863评论 1 11
  • 以下文章为转载,对理解JavaScript中的事件处理机制很有帮助,浅显易懂,特分享于此。 什么是事件? 事件(E...
    jxyjxy阅读 8,161评论 1 10
  • js之事件机制 1、事件初探 1.1 js事件的概述 JavaScript事件:JavaScript是基于事件驱动...
    道无虚阅读 7,075评论 0 2
  • 就当一个农场主吧 盖一所木方 用中国最传统的隼卯结构 一间厨房不用太大 两间卧室要够放下大大的床吧 或许还需要一间...
    霍乱之间阅读 754评论 0 1
  • 行走在城市的街道上,车来车往,人来人往,我戴着耳机,漠然的看着这个世界,看着陌生的路人。他们的身上又有怎样的故...
    脱离状态阅读 1,313评论 0 0