JS有三種常用的綁定事件的方法
- 在DOM元素上直接綁定
- 在JS代碼中綁定
- 在JS中綁定事件監(jiān)聽函數(shù)
在DOM中直接綁定，行內(nèi)綁定
<button onclick="fn()">按鈕</button>
<script>
function fn(ev) { console.log('DOM0級事件渠脉，行內(nèi)綁定') }
</script>
- 我們可以在DOM元素上綁定onclick霸饲、onmouseover习寸、onmouseout、onmousedown鸯匹、onmouseup臂容、onkeydown糟秘、onkeyup等。不列出了悲龟。
- 行內(nèi)綁定時沒辦法解綁的，但是可以將綁定函數(shù)改寫成空函數(shù)來實現(xiàn)斩芭。
在JS代碼中綁定划乖，也叫DOM0級事件綁定
<button id="btn">按鈕</button>
<script>
var btn = document.getElementById('btn');
btn.onclick = fn;
function fn(ev) { console.log('DOM0級事件，JS綁定') }
</script>
- JS代碼中綁定可以使JS和HTML分離儿礼，結構清晰止邮，便于管理和開發(fā)。
- DOM級事件只能綁定一個事件，如果綁定多個也只有最后一個會被觸發(fā)
- 想解綁直接可以把綁定指向null
btn.onclick = null;止毕。- 如果對一個元素同時進行行內(nèi)綁定和JS綁定闯传，行內(nèi)綁定會被JS綁定覆蓋则披。
使用事件監(jiān)聽綁定翩活，也叫DOM2級事件澄峰，可以綁定多個監(jiān)聽
<button id="btn">按鈕</button>
<script>
var btn = document.getElementById('btn');
if (document.addEventListener) { // 支持 addEventListener
btn.addEventListener('click', fn, false);
} else { // 不支持addEventListener（IE6-8）
btn.attachEvent('onclick', fn);
}
function fn(ev) { console.log('DOM2級事件綁定') }
</script>
- addEventListener() 或 attachEvent() 來綁定事件監(jiān)聽函數(shù)魂毁。attachEvent事件名要加'on'烦秩，沒有第三個參數(shù)
- 如果不考慮兼容IE6-8可以只使用addEventListener。
- DOM2級事件可以同時綁定多個監(jiān)聽只祠，事件觸發(fā)時會全部監(jiān)聽到。
- 第三個參數(shù)有true和false兩個值，false：事件在冒泡階段監(jiān)聽（默認值），true：在捕獲階段觸發(fā)书劝。
- IE的attachEvent沒有第三個參數(shù)陶因，它默認就是在冒泡階段觸發(fā)。
- DOM2級事件有單獨的解綁函數(shù)。
事件冒泡、事件捕獲和事件委托
事件監(jiān)聽的解綁
if (document.removeEventListener) { // 支持 removeEventListener
btn.removeEventListener('click', fn, false);
} else { //（IE6-8）
btn.detachEvent('onclick', fn);
}
三個參數(shù)要和綁定時完全一致才會解綁成功望浩。第三個參數(shù)默認值時false
現(xiàn)在DOM3級事件也有了
和DOM2區(qū)別不大，我還沒有研究，就先不賣弄了丰滑。
