有的時(shí)候我會(huì)遇到導(dǎo)入本地文件<input class="IamInputElement" type="file"/>的情況怀浆，但是往往為了美觀或者為了可以自己設(shè)計(jì)一個(gè)美觀的樣式而將input的樣式設(shè)置為display:none。然后給出一個(gè)button戈鲁，為button添加click時(shí)間芥永，然后document.getElementByClassName("IamInputElement").click()，這樣就可以實(shí)現(xiàn)對(duì)input框的點(diǎn)擊了瞬内。
但是我們還需要獲取到input輸入的地址，這個(gè)時(shí)候往往會(huì)給input框添加上addEventListener事件：document.getXXX("XXX").addEventListener("change",function(e){
?var file ? = e.target.files[0]
})
另外如果是react的話就可以用this.refs.XXX.addEventListener來(lái)實(shí)現(xiàn)（一般會(huì)在componentDidMount中實(shí)現(xiàn)）
以上作為一個(gè)分割線吧限书，雖然跟題目沒有什么太大的關(guān)系虫蝶。但是因?yàn)樯厦娴膯?wèn)題而引起的對(duì)題目（addEventListener和on的區(qū)別）的思考。家長(zhǎng)里短的說(shuō)一下倦西。
拋開上面的例子能真。以一個(gè)button為例子，在js中為他加上click點(diǎn)擊事件的話可以使用扰柠。document.getElementById("thisIsButtonId").onclick = function(){
?//dosomething
}
通過(guò)以上的方法可以在button被點(diǎn)擊的時(shí)候做出響應(yīng)粉铐。
但是這種方法如果為同一個(gè)button添加多個(gè)響應(yīng)事件，只會(huì)執(zhí)行最后一個(gè)卤档，因?yàn)楹竺娴臅?huì)覆蓋前面的蝙泼。
然后來(lái)看看addEventListener（）方法：
document.getElementById("thisIsButtonId").addEventListener（“click”,function(){
?//dosomething
}）,這個(gè)樣子的話就可以實(shí)現(xiàn)跟上面一樣的效果了。只是如果通過(guò)這個(gè)方法為button添加多個(gè)方法的時(shí)候每一個(gè)方法都會(huì)執(zhí)行劝枣。
來(lái)看看某網(wǎng)站的文檔說(shuō)明：
這里面的bool型參數(shù)useCapture是控制執(zhí)行的順序的(useCapture默認(rèn)為FALSE)
上面大概的意思是如果兩個(gè)element都包含響應(yīng)事件的話汤踏，useCapture控制執(zhí)行的順序：
如果useCapture為false：根據(jù)事件冒泡的順序執(zhí)行的。也就是說(shuō)是根據(jù)被點(diǎn)擊的元素向外逐個(gè)執(zhí)行舔腾。
如果useCaptrue為true：跟上面相反溪胶。也叫事件捕獲執(zhí)行。
為什么使用addEventListener（）呢稳诚？
第一：允許為一個(gè)event（例如:click）添加多個(gè)handler哗脖。
第二：為我們提供了可選的執(zhí)行順序，有useCaptrue來(lái)控制（如果我沒有理解錯(cuò)的話）
第三：實(shí)用在任何DOM中采桃，這個(gè)在最前面提到的react中使用到了懒熙∏鹚穑可以通過(guò)this.refs.XXX.addeventListener('click',function(){},false)
另外普办，addEventListener（）過(guò)后需要removeEventListener（）的話需要使用同一個(gè)function()也就是說(shuō)document.getElementById("XX").addEventListener('click',function(){})
然后document.getElementById("XX").removeEventListener('click',function(){}),這樣是不對(duì)的。因?yàn)榍昂髢蓚€(gè)的function是不一樣的徘钥，即使他們的方法都是一模一樣的衔蹲。應(yīng)該使用
function func(){//dosomething}，然后將這個(gè)func放進(jìn)去，這樣的話兩個(gè)方法用的就是同一個(gè)function了舆驶。但是要注意：func后面就不可以加“（）”了
以前的時(shí)候很少看文檔橱健，現(xiàn)在慢慢養(yǎng)成這樣的習(xí)慣吧。這次總結(jié)（如果這鬼東西也能叫總結(jié)的話）沙廉，我看英文文檔看的心好累拘荡。最后的時(shí)候感覺自己總結(jié)的狗屁不通。慢慢改進(jìn)吧撬陵。x
