JS的addEventListener方法
- addEventListener方法是將監(jiān)聽(tīng)器綁定到某個(gè)Document元素上失都，當(dāng)觸發(fā)指定事件時(shí)柏蘑，執(zhí)行指定的回調(diào)函數(shù)，只要當(dāng)前Document未被銷毀掉粹庞，該事件就會(huì)被調(diào)用咳焚，如：
<div class="list-bottom load-more">加載更多</div>
document.querySelector('.load-more').addEventListener('click', function(e) {
console.log('加載更多')；
}
// 此時(shí)點(diǎn)擊div會(huì)觸發(fā)點(diǎn)擊事件
// 當(dāng)div去掉“l(fā)oad-more”時(shí)
<div class="list-bottom">加載更多</div>
// 此時(shí)點(diǎn)擊div仍然會(huì)觸發(fā)點(diǎn)擊事件庞溜，可以通過(guò)判斷某個(gè)class是否存在來(lái)阻止事件繼續(xù)執(zhí)行革半，即觸發(fā)該事件但并不執(zhí)行操作
document.querySelector('.load-more').addEventListener('click', function(e) {
if (! this.classList.contains("load-more")) return;
console.log('加載更多')；
}
- addEventListener的參數(shù)：dom.addEventListener(type, listener, useCapture );
type:事件觸發(fā)的類型;
listener:當(dāng)監(jiān)聽(tīng)的事件被觸發(fā)后所執(zhí)行的操作;
useCapture :可選參數(shù),Boolean類型,默認(rèn)為false.在一個(gè)DOM樹(shù)中,最外面的根元素注冊(cè)了listener,當(dāng)DOM樹(shù)中的某一子元素觸發(fā)該事件時(shí),是否會(huì)觸發(fā)其父節(jié)點(diǎn)綁定的事件.
捕獲流码、綁定和冒泡
捕獲:多層DOM樹(shù),鼠標(biāo)觸發(fā)DOM事件時(shí),瀏覽器會(huì)從根節(jié)點(diǎn)開(kāi)始向內(nèi)進(jìn)行事件傳播,如果父元素綁定了相同事件則會(huì)先觸發(fā)父元素事件.
<html>
<body>
<div id="d1">parent
<div id="d2">child</div>
</div>
</body>
<script>
document.body.addEventListener('click', function(e) {
console.log('body-cap');
}, true);
document.querySelector('#d1').addEventListener('click', function(e) {
console.log('parent-cap');
}, true);
document.querySelector('#d2').addEventListener('click', function(e) {
console.log('child-cap');
}, true);
</script>
</html>
// 輸出結(jié)果
body-cap
parent-cap
child-cap
冒泡:與傳播恰好相反,由觸發(fā)事件節(jié)點(diǎn)向根節(jié)點(diǎn)傳播事件.
<body>
<div id="d1">parent
<div id="d2">child</div>
</div>
</body>
<script>
document.body.addEventListener('click', function(e) {
console.log('body');
});
document.querySelector('#d1').addEventListener('click', function(e) {
console.log('parent');
});
document.querySelector('#d2').addEventListener('click', function(e) {
console.log('child');
});
</script>
</html>
// 輸出結(jié)果
child
parent
body
