[js高手之路]设计模式系列课程-委托模式实战微博发布功能

在实际开发中，经常需要为Dom元素绑定事件，如果页面上有4个li元素，点击对应的li，弹出对应的li内容，怎么做呢？是不是很简单？

大多数人的做法都是：获取元素，绑定事件

    <ul>
        <li>跟着ghostwu学习javascript设计模式的应用1</li>
        <li>跟着ghostwu学习javascript设计模式的应用2</li>
        <li>跟着ghostwu学习javascript设计模式的应用3</li>
        <li>跟着ghostwu学习javascript设计模式的应用4</li>
    </ul>
    <script>
        var aLi = document.querySelectorAll( "li" );
        aLi.forEach(( ele, ind ) => {
            ele.addEventListener( "click", ()=> {
               alert( ele.innerHTML ); 
            } );
        });
    </script>

如果页面上有1w个元素， 甚至10w个元素呢?

继续使用上述方式，会有很大的性能问题，这个时候，有人可能要问，实际中的项目 哪有1w个，10w个元素的。一般的项目可能没有，但是社交类的网站，如微博，其他的如大批量文件上传等能功能，都是需要动态创建dom元素，而且数量巨大，并且创建出来的dom元素，一般都需要绑定事件和相应的特效。一般情况下，用普通的绑定事件方式是不能给动态创建的dom元素绑定到事件的，所以这里就产生了两个问题：

1，当页面元素很多的时候，如果给这些元素绑定上事件？

2，当动态创建dom时，如果给动态创建的dom绑定上事件和相应的特效？

这就是本文需要讨论的模式-委托模式

采用事件委托可以顺利解决上面2个问题

那么，什么是事件委托呢？

给元素的父元素绑定事件，利用冒泡原理，当子元素触发事件的时候，会去触发父元素的事件，然后把相应的业务逻辑放在父元素的事件中去处理。通俗点讲就是，子元素不做事件绑定，把绑定事件的操作委托给父元素，这就叫做事件委托， 委托有一个特性，他能够在事件触发中，识别到具体是由哪个子元素触发的，这个就是事件对象的target属性

    <ul>
        <li>跟着ghostwu学习javascript设计模式的应用1</li>
        <li>跟着ghostwu学习javascript设计模式的应用2</li>
        <li>跟着ghostwu学习javascript设计模式的应用3</li>
        <li>跟着ghostwu学习javascript设计模式的应用4</li>
    </ul>
    <script>
        var oUl = document.querySelector("ul");
        oUl.addEventListener( "click", ( ev )=>{
            var oEvent = ev || event;
            target = oEvent.target || oEvent.srcElement;
            alert( target.innerHTML );
        });
    </script>

当我们点击li的时候，就能通过事件对象oEvent.target识别到触发事件的li元素, srcElement是兼容ie的写法。

在没有事件委托之间，我们通过javascript做一个hover的功能，一般这么做.

    <ul>
        <li>跟着ghostwu学习设计模式</li>
        <li>跟着ghostwu学习设计模式</li>
        <li>跟着ghostwu学习设计模式</li>
        <li>跟着ghostwu学习设计模式</li>
        <li>跟着ghostwu学习设计模式</li>
    </ul>
    <script>
        var aLi = document.getElementsByTagName( "li" );
        for( var i = 0, len = aLi.length; i < len; i++ ){
            aLi[i].onmouseover = function(){
                this.style.backgroundColor = 'red';
            }
            aLi[i].onmouseout = function(){
                this.style.backgroundColor = '';
            }
        }
    </script>

如果li元素很多，就会产生性能问题，而采用委托模式，我们可以这么做

    <ul>
        <li>跟着ghostwu学习设计模式1</li>
        <li>跟着ghostwu学习设计模式2</li>
        <li>跟着ghostwu学习设计模式3</li>
    </ul>
    <script>
        var aLi = document.getElementsByTagName("li");
        var oUl = document.getElementsByTagName( "ul" )[0];
        oUl.onmouseover = function( ev ){
            var oEvent = ev || event;
            var target = oEvent.target || oEvent.srcElement;
            if ( target.tagName.toLowerCase() == 'li' ) {
                target.style.backgroundColor = 'red';
            }
        }
        oUl.onmouseout = function( ev ){
            var oEvent = ev || event;
            var target = oEvent.target || oEvent.srcElement;
            if ( target.tagName.toLowerCase() == 'li' ) {
                target.style.backgroundColor = '';
            }
        }
    </script>

通过事件委托，把元素绑定到父元素，大大提高性能

至此，我们解决了第一个问题：当页面元素很多的时候，如果给这些元素绑定上事件

对于新创建的dom元素，普通绑定事件的方式，是不能绑定到这些dom元素的

     <input type="button" value="创建">
   <ul>
       <li>ghostwu1</li>
       <li>ghostwu2</li>
   </ul>
    <script>
        var oBtn = document.getElementsByTagName( "input" )[0];
        var oUl = document.getElementsByTagName( "ul" )[0];
        var aLi = document.getElementsByTagName( "li" );
        oBtn.onclick = function(){
            var oLi = document.createElement( "li" );
            oLi.innerHTML = 'ghostwu';
            oUl.appendChild( oLi );
        }
        for( var i = 0, len = aLi.length; i < len; i++ ){
            aLi[i].onmouseover = function(){
                this.style.backgroundColor = 'red';
            }
            aLi[i].onmouseout = function(){
                this.style.backgroundColor = '';
            }
        }

    </script>

新创建的li元素，是不能绑定到onmouseover和onmouseout事件的，我们采用委托模式之后，可以这么做

    <input type="button" value="创建">
    <ul>
        <li>ghostwu1</li>
        <li>ghostwu2</li>
    </ul>
    <script>
        var oBtn = document.getElementsByTagName("input")[0];
        var oUl = document.getElementsByTagName("ul")[0];
        var aLi = document.getElementsByTagName("li");
        oBtn.onclick = function () {
            var oLi = document.createElement("li");
            oLi.innerHTML = 'ghostwu';
            oUl.appendChild(oLi);
        }
        oUl.onmouseover = function( ev ){
            var oEvent = ev || event;
            var target = oEvent.target || oEvent.srcElement;
            if ( target.tagName.toLowerCase() == 'li' ) {
                target.style.backgroundColor = 'red';
            }
        }
        oUl.onmouseout = function( ev ){
            var oEvent = ev || event;
            var target = oEvent.target || oEvent.srcElement;
            if ( target.tagName.toLowerCase() == 'li' ) {
                target.style.backgroundColor = '';
            }
        }
    </script>

至此，我们解决了第二个问题：当动态创建dom时，如果给动态创建的dom绑定上事件和相应的特效

最后，我们结合委托模式，来实战一个微博发布的功能，微博发布之后，给动态创建的dom元素添加手风琴折叠功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-offset-3 col-md-6">
                <form class="form-horizontal">
                    <div class="form-group">
                        <input id="title" type="text" class="form-control" placeholder="请输入标题">
                    </div>
                    <div class="form-group">
                        <textarea name="" id="txt" cols="30" rows="5" class="form-control"></textarea>
                    </div>
                    <div class="form-group">
                        <input type="button" value="发布" class="btn btn-primary" id="btn-publish">
                    </div>
                </form>
            </div>
            <div class="col-md-offset-3 col-md-6" id="content">
            </div>
        </div>
    </div>
</body>
<script>
    var oBtnPublish = document.getElementById("btn-publish");
    var aTpl = [
        '<div class="panel panel-success">',
           '<div class="panel-heading">',
                '<h4 class="panel-title">',
                   '<a href="javascript:;">',
                    '[title]',
                    '</a>',
                '</h4>',
            '</div>',
            '<div class="panel-body">',
                '[content]',
            '</div>',
        '</div>'
    ];
    var oContent = document.getElementById( "content" ),
        str = aTpl.join( "" ),
        title = '', content = '', panelParent = null;
    oBtnPublish.onclick = function(){
        str = aTpl.join( "" );
        title = document.getElementById( "title" ).value;
        txt = document.getElementById( "txt" ).value;
        str = str.replace( /\[title\]/, title );
        str = str.replace( /\[content\]/, txt );
        oContent.innerHTML += str;
    }
    oContent.onclick = function( ev ){
        var oEvent = ev || event;
        var target = oEvent.target || oEvent.srcElement;
        if ( target.tagName.toLowerCase() == 'a' ) {
            panelParent = target.parentNode.parentNode.parentNode;
            if ( panelParent.children[1].style.display == "block" ||  panelParent.children[1].style.display == '' ) {
                panelParent.children[1].style.display = 'none';
            } else {
                panelParent.children[1].style.display = 'block';
            }
        }
    }
</script>
</html>