下拉框是頁面中經(jīng)常需要使用到的一個(gè)功能巫俺，由于select的樣式自定義復(fù)雜且兼容性極差伏蚊，所以利用JavaScript模仿下拉框是每個(gè)前端er必備的技術(shù)筋讨，而復(fù)用又是必須掌握的一項(xiàng)技能，所以這里寫一寫關(guān)于我在復(fù)用下拉框功能時(shí)候碰到的一些坑
1.全局對象使用和on添加事件的弊端
<div id="select1">
<div class="selcon">
<div class="sel">下拉框1</div>
<div class="selbtn"></div>
</div>
<ul class="list">
<li>選項(xiàng)1-1</li>
<li>選項(xiàng)1-2</li>
<li>選項(xiàng)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>選項(xiàng)2-1</li>
<li>選項(xiàng)2-2</li>
<li>選項(xiàng)2-3</li>
</ul>
</div>
這里是兩個(gè)下拉框的html代碼栽燕，我們需要跟它們都加上功能暂氯，這時(shí)候我能想到的方法就是封裝一個(gè)函數(shù)潮模，獲取到每個(gè)下拉框的包裹層，然后將獲取到的對象傳入函數(shù)的參數(shù)株旷，就可以實(shí)現(xiàn)功能了
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);
功能寫完了再登，在使用時(shí)才發(fā)現(xiàn)問題，select2的功能是完好的晾剖，但是當(dāng)我點(diǎn)擊select1出現(xiàn)下拉框后點(diǎn)擊document锉矢，無法讓select1的下拉框收回
問題所在：
document.onclick = function(){
list.style.display = 'none';
}
這里是點(diǎn)擊document讓下拉框消失，用的是on的方式添加事件
document是一個(gè)全局對象齿尽，聲明兩個(gè)函數(shù)時(shí)沽损，第一個(gè)函數(shù)會(huì)點(diǎn)擊綁定在document身上，聲明的第二個(gè)函數(shù)也會(huì)將點(diǎn)擊事件綁定在document身上循头，這時(shí)候利用的on添加事件的方式弊端就出來了绵估，第二個(gè)事件會(huì)將第一個(gè)事件覆蓋，在控制臺(tái)嘗試輸出list的時(shí)候卡骂，總是輸出的是第二個(gè)下拉框中的list
解決方案：
使用addEventListener()進(jìn)行事件添加国裳，通過該方法添加事件不會(huì)被覆蓋
document.addEventListener('click',function(){
list.style.display = 'none';
});
這里還存在一個(gè)問題，點(diǎn)擊select1的btn全跨，select1中的下拉框出現(xiàn)缝左，但是點(diǎn)擊select2中的btn時(shí)，select1的下拉框不會(huì)消失浓若，會(huì)存在兩個(gè)下拉框同時(shí)存在的情況渺杉，這個(gè)問題待我琢磨一下提出解決方案
