1.什么是事件
- 一個事件由什么東西組成
- 觸發(fā)誰的事件：事件源
- 觸發(fā)什么事件：事件類型
- 觸發(fā)以后做什么：事件處理函數(shù)
var oDiv = document.querySelector('div')
oDiv.onclick = function () {}
// 誰來觸發(fā)事件 => oDiv => 這個事件的事件源就是 oDiv
// 觸發(fā)什么事件 => onclick => 這個事件類型就是 click
// 觸發(fā)之后做什么 => function () {} => 這個事件的處理函數(shù)
每一個事件都會有一個對應(yīng)的對象來描述這些信息，我們就把這個對象叫做**事件對象**
瀏覽器給了我們一個**黑盒子**，叫做 `window.event`，這里就是對事件信息的所有描述!
2.事件的綁定方式
我們現(xiàn)在給一個注冊事件都是使用 `onxxx` 的方式
oDiv.onclick = function () {
? ?console.log('綁定了一個事件')
}
注意：但是這個方式不是很好，只能給一個元素注冊一個相同類型的事件
- 一旦寫了第二個事件，那么第一個就被覆蓋了
3.事件的監(jiān)聽
監(jiān)聽方式一：
- `addEventListener` :? 非 IE 7 8 下使用
- 語法： 元素.addEventListener('事件類型'， 事件處理函數(shù)， 冒泡還是捕獲)
oDiv.addEventListener('click', function () {
? ?console.log('綁定了一個事件')
}, false)?
監(jiān)聽方式二：
`attachEvent` ：IE 7 8 下使用
- 語法： `元素.attachEvent('事件類型'， 事件處理函數(shù))`
oDiv.attachEvent('onclick', function () {
? ?console.log('綁定了一個事件')
})
4.兩個方式的區(qū)別
- 注冊事件的時候事件類型參數(shù)的書寫
- `addEventListener` ： 不用寫 on
- `attachEvent` ： 要寫 on
- 參數(shù)個數(shù)
- `addEventListener` ： 一般是三個常用參數(shù)
- `attachEvent` ： 兩個參數(shù)
- 執(zhí)行順序
- `addEventListener` ： 順序注冊，順序執(zhí)行
- `attachEvent` ： 順序注冊，倒敘執(zhí)行
- 適用瀏覽器
- `addEventListener` ： 非 IE 7 8 的瀏覽器
- `attachEvent` ： IE 7 8 瀏覽器
? //事件監(jiān)聽兼容寫法
? ? ? ?if(div1.attachEvent){
? ? ? ? ? ?div1.attachEvent("onclick",fn1)
? ? ? ? ? ?div1.attachEvent("onclick",fn2)
? ? ? ? ? ?div1.attachEvent("onmouseover",fn3)
? ? ? ?}else{
? ? ? ? ? ?div1.addEventListener("click",fn1)
? ? ? ? ? ?div1.addEventListener("click",fn2)
? ? ? ? ? ?div1.addEventListener("mouseover",fn3)
? ? ? ?}
5.取消事件監(jiān)聽
removeEventListener `: ?非 IE 7?8 下使用
- 語法：元素.removeEventListener('事件類型'， 事件處理函數(shù)， 冒泡還是捕獲)
detachEvent`：IE 7?8 下使用
- 語法：`元素.detachEvent('事件類型'， 事件處理函數(shù))`
示例：
?var x?= document.getElementById("myDIV");
?if (x.removeEventListener) {? ? ? ? ? ? ? ? ? ?// // 所有瀏覽器，除了 IE 8?及更早IE版本
? ? ?x.removeEventListener("mousemove", myFunction);
?} else if (x.detachEvent) {? ? ? ? ? ? ? ? ? ?// IE 8?及更早IE版本
? ? ?x.detachEvent("onmousemove", myFunction);
?}
