美文网首页
javascript设计模式——委托模式

javascript设计模式——委托模式

作者: 蟹老板爱写代码 | 来源:发表于2018-04-05 20:11 被阅读0次

    委托模式:多个对象接收并处理同一个请求,他们将请求委托给另一个对象统一处理请求。
    代码实现:对每个段落进行点击事件监听,如果直接对每个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设计模式——委托模式

          本文链接:https://www.haomeiwen.com/subject/srmdhftx.html