下拉框是页面中经常需要使用到的一个功能，由于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的下拉框不会消失，会存在两个下拉框同时存在的情况，这个问题待我琢磨一下提出解决方案
