然冬 ·DOM 事件綁定
DOM 提供了許多事件供開(kāi)發(fā)者進(jìn)行綁定，以響應(yīng)各種操作，豐富頁(yè)面交互。
想要觸發(fā)事件，就得先給 DOM 節(jié)點(diǎn)綁定事件，提供事件處理器。
1. 直接在 HTML 上提供事件
這種方式是將事件內(nèi)聯(lián)在 HTML 代碼中。
<style>
.box {
width: 100px;
height: 100px;
background: green;
}
</style>
<div class="box" onclick="alert('耶耶耶耶耶！')"></div>
通過(guò)設(shè)置 HTML 的 onclick 屬性，可以綁定點(diǎn)擊事件，屬性內(nèi)可以寫(xiě)簡(jiǎn)單的 JavaScript 代碼。
但是可以看到這種方式是有局限性的，寫(xiě)大量的 JavaScript 代碼在里面肯定是不合理的。
過(guò)去網(wǎng)頁(yè)的交互相對(duì)較少，會(huì)在 body 標(biāo)簽上綁定 onload 事件，即頁(yè)面加載完畢后做的事情。
<script>
function load() {
alert('頁(yè)面加載完畢啦！');
}
</script>
<body onload="load()">
<div>我是一段濫竽充數(shù)文案。</div>
</body>
onload="load()" 即表示在頁(yè)面加載完成后，執(zhí)行 load 函數(shù)?，F(xiàn)在翻閱部分文獻(xiàn)，依然能夠看到這種寫(xiě)法。
2. 設(shè)置事件處理器屬性
通過(guò)事件處理器屬性設(shè)置綁定事件，需要先獲取到 DOM 節(jié)點(diǎn)。
<style>
.btn {
border: 1px solid #4caf50;
font-size: 22px;
padding: 8px 12px;
color: #4caf50;
outline: none;
}
.btn:active {
background: #eee;
}
</style>
<button class="btn">
我是一個(gè)可以改變一切的按鈕
</button>
<script>
var btn = document.querySelector('.btn');
btn.onclick = function() {
var text = btn.innerText;
btn.innerText = text.replace('一切', '世界');
};
</script>
通過(guò) onclick 就可以設(shè)置按鈕的點(diǎn)擊事件。
如果需要清除事件，可以重新將屬性重新設(shè)置為 null。
<style>
.btn {
border: 1px solid #4caf50;
font-size: 14px;
padding: 8px 12px;
color: #4caf50;
outline: none;
}
.btn:active {
background: #eee;
}
p {
font-size: 22px;
}
</style>
<button class="btn">
我是一個(gè)可以改變一切的按鈕
</button>
<p>1</p>
<script>
var btn = document.querySelector('.btn');
var p = document.querySelector('p');
var total = 1;
btn.onclick = function() {
p.innerText = ++total;
if (total >= 5) {
btn.onclick = null;
}
};
</script>
這種綁定事件的方式依然常用，各種文獻(xiàn)的 demo 也會(huì)采用這種方式，但缺點(diǎn)是同一個(gè)事件在沒(méi)有其他輔助條件下，只能綁定一個(gè)事件處理器。
3. 使用 element.addEventListener 綁定事件
使用 DOM 節(jié)點(diǎn)的 addEventListener 方法也可以綁定事件。
<style>
.btn {
border: 1px solid #4caf50;
font-size: 14px;
padding: 8px 12px;
color: #4caf50;
outline: none;
}
.btn:active {
background: #eee;
}
input {
padding: 10px 12px;
font-size: 14px;
outline: none;
}
p {
font-size: 22px;
}
</style>
<input type="text">
<button class="btn">
按鈕
</button>
<p>1</p>
<script>
var btn = document.querySelector('.btn');
var input = document.querySelector('input');
var p = document.querySelector('p');
var total = 1;
btn.addEventListener('click', function() {
input.value = input.value.split('').reverse().join('');
btn.value = input.value;
p.innerText = input.value;
});
input.addEventListener('keyup', function() {
btn.innerText = input.value;
});
</script>
addEventListener 的第一個(gè)參數(shù)是事件類(lèi)型，和使用事件處理器屬性與HTML內(nèi)聯(lián)事件不同，這個(gè)方法的事件類(lèi)型不需要 on 前綴。
第二個(gè)參數(shù)就是事件處理器，即觸發(fā)事件時(shí)要做的事情。
使用 addEventListener 可以綁定多個(gè)事件處理器。
<style>
.btn {
border: 1px solid #4caf50;
font-size: 14px;
padding: 8px 12px;
color: #4caf50;
outline: none;
}
.btn:active {
background: #eee;
}
</style>
<button class="btn">
按鈕
</button>
<p></p>
<script>
var btn = document.querySelector('.btn');
var p = document.querySelector('p');
var total = 1;
btn.addEventListener('click', function() {
btn.innerText = ++total;
});
btn.addEventListener('click', function() {
p.innerText = total;
});
</script>
一個(gè)事件綁定多個(gè)事件處理器，其執(zhí)行順序是按照綁定順序來(lái)的。
如果需要去除事件，可以使用 removeEventListener 方法。
<style>
.btn {
border: 1px solid #4caf50;
font-size: 14px;
padding: 8px 12px;
color: #4caf50;
outline: none;
}
.btn:active {
background: #eee;
}
</style>
<button class="btn">
按鈕
</button>
<script>
var btn = document.querySelector('.btn');
var total = 1;
function fn() {
btn.innerText = ++total;
if (total > 5) {
btn.removeEventListener('click', fn);
}
}
btn.addEventListener('click', fn);
</script>
使用 removeEventListener 去除事件，需要傳遞指定的事件，且事件處理器必須與綁定事件傳入的一樣，為同一個(gè)。
addEventListener 與 removeEventListener 還具有第三個(gè)參數(shù)，會(huì)在事件流章節(jié)進(jìn)行討論。
IE8及以下都不支持該方法，需要使用IE提供的 attachEvent 與 detachEvent 來(lái)處理事件
4. DOM 事件級(jí)別
目前常討論的 DOM 級(jí)別有 4 級(jí)，為 DOM 0級(jí) 至 DOM 3級(jí)，這里的級(jí)可以理解成標(biāo)準(zhǔn)的版本。
這 4 級(jí)內(nèi)容中， DOM 1級(jí)沒(méi)有提供事件相關(guān)的內(nèi)容，所以不會(huì)拿來(lái)討論，因此 DOM 事件就被分為了常說(shuō)的 DOM 0級(jí)事件、DOM 2級(jí)事件、DOM 3級(jí)事件。
DOM 0級(jí)提供的事件綁定方式為在HTML 上內(nèi)聯(lián)事件與事件處理器屬性。DOM 2級(jí)提供了addEventListener與removeEventListener方法。DOM 3級(jí)則是在 2 級(jí)的基礎(chǔ)上進(jìn)行了擴(kuò)充，添加了更多的事件類(lèi)型。
事實(shí)上 DOM 0級(jí)事件并不是標(biāo)準(zhǔn)中的，在 W3C 制定 DOM 標(biāo)準(zhǔn)前，部分瀏覽器已經(jīng)有了 DOM 模型，也有自己相應(yīng)的事件，這些出現(xiàn)在標(biāo)準(zhǔn)第一個(gè)版本之前的，就被稱(chēng)為了 DOM 0。
5. 小結(jié)
綁定 DOM 事件可以通過(guò)以下三種方式：
- 將事件內(nèi)聯(lián)在 HTML 中
- 使用 事件處理器屬性 綁定事件
- 使用
addEventListener與removeEventListener處理事件
前兩種方式不能綁定多個(gè)事件處理器，三種綁定方式由不同版本的 DOM 標(biāo)準(zhǔn)提供，通常使用 DOM 級(jí)別進(jìn)行區(qū)分。
2025 imooc.com All Rights Reserved |