下拉框复用

下拉框是页面中经常需要使用到的一个功能，由于select的样式自定义复杂且兼容性极差，所以利用JavaScript模仿下拉框是每个前端er必备的技术，而复用又是必须掌握的一项技能，所以这里写一写关于我在复用下拉框功能时候碰到的一些坑

1.全局对象使用和on添加事件的弊端

<div id="select1">
    <div class="selcon">
        <div class="sel">下拉框1</div>
        <div class="selbtn"></div>
    </div>
    <ul class="list">
        <li>选项1-1</li>
        <li>选项1-2</li>
        <li>选项1-3</li>
    </ul>
</div>
<div id="select2">
    <div class="selcon">
        <div class="sel">下拉框2</div>
        <div class="selbtn"></div>
    </div>
    <ul class="list">
        <li>选项2-1</li>
        <li>选项2-2</li>
        <li>选项2-3</li>
    </ul>
</div>

这里是两个下拉框的html代码，我们需要跟它们都加上功能，这时候我能想到的方法就是封装一个函数，获取到每个下拉框的包裹层，然后将获取到的对象传入函数的参数，就可以实现功能了

function select(obj){
    var selBtn = obj.querySelector('.selbtn');
    var sel = obj.querySelector('.sel');
    var list = obj.querySelector('.list');
    var opts = obj.querySelectorAll('.list>li');
    selBtn.onclick = function(ev){
        list.style.display = 'block';
        ev.cancelBubble = true;
    };
    for(var i=0;i<opts.length;i++){
        opts[i].onclick = function(){
            sel.innerHTML = this.innerHTML;
            list.style.display = 'none';
        };
    }
    document.onclick = function(){
        list.style.display = 'none';
    }
};
var select1 = document.getElementById('select1');
var select2 = document.getElementById('select2');
select(select1);
select(select2);

功能写完了，在使用时才发现问题，select2的功能是完好的，但是当我点击select1出现下拉框后点击document，无法让select1的下拉框收回

问题所在：

document.onclick = function(){
    list.style.display = 'none';
}

这里是点击document让下拉框消失，用的是on的方式添加事件
document是一个全局对象，声明两个函数时，第一个函数会点击绑定在document身上，声明的第二个函数也会将点击事件绑定在document身上，这时候利用的on添加事件的方式弊端就出来了，第二个事件会将第一个事件覆盖，在控制台尝试输出list的时候，总是输出的是第二个下拉框中的list

解决方案：

使用addEventListener()进行事件添加，通过该方法添加事件不会被覆盖

document.addEventListener('click',function(){
    list.style.display = 'none';
});

这里还存在一个问题，点击select1的btn，select1中的下拉框出现，但是点击select2中的btn时，select1的下拉框不会消失，会存在两个下拉框同时存在的情况，这个问题待我琢磨一下提出解决方案