点击框外区域，本弹框消失——事件委派

要解决这个问题首先要了解DOM事件流

7.1 事件委派的原理及作用

事件委派属于事件冒泡的好处：

原理：不是给每个节点单独是设置事件监听器，而是将事件监听器设置再其父结点上，然后利用冒泡原理影响设置每个子节点
作用：只操作了一次DOM，提高了程序的性能

---

7.2 阻止事件冒泡

利用事件对象里面的stopPropagation()方法

7.3 例子——点击框外，框本身消失

以div为’框’，点击div以外区域，div消失，点击出现按钮，div出现

效果图如下：
代码如下：

 	div {
            width: 200px;
            height: 200px;
            margin-top: 10px;
            background-color: bisque;
            box-shadow: 0px 0px 10px 5px #ccc; /* 给div设置阴影*/
        }

    <button class='show'>出现</button>
    <button class="hide">消失</button>
    <div></div>

原生js代码：（因为我是用jQuery写的，但是考虑到可能有些同伴可能看不习惯jq，就也用原生再写了一遍，下面也有jq代码哦~习惯看jq的也能小滑到下面看jq代码）

        var body = document.body;
        var div = document.querySelector('div');
        var btnShow = document.querySelector('.show');
        
        //点击body，div消失
        body.addEventListener('click', function() {
            div.style.display = 'none';
        })

		//点击div，阻止body的div消失的事件
        div.addEventListener('click', function(e) {
            e.stopPropagation();
        })

		//点击出现按钮，阻止body的div消失事件，且令div出现
        btnShow.addEventListener('click', function(e) {
            e.stopPropagation();
            div.style.display = 'block';
        })

jQuery代码：

        $(function() {  //点击body，div消失
            $('body').on({
                click: function() {
                    $('div').hide();
                }
            })
            $('div').on({  //点击div，阻止body的div消失的事件
                click: function(e) {
                    e.stopPropagation();
                }
            })
            $('.show').on({  //点击出现按钮，阻止body的div消失事件，且令div出现
                click: function(e) {
                    e.stopPropagation();
                    $('div').show();
                }
            })
        })