1.什么是事件
- 一个事件由什么东西组成
- 触发谁的事件：事件源
- 触发什么事件：事件类型
- 触发以后做什么：事件处理函数
var oDiv = document.querySelector('div')
oDiv.onclick = function () {}
// 谁来触发事件 => oDiv => 这个事件的事件源就是 oDiv
// 触发什么事件 => onclick => 这个事件类型就是 click
// 触发之后做什么 => function () {} => 这个事件的处理函数
每一个事件都会有一个对应的对象来描述这些信息，我们就把这个对象叫做**事件对象**
浏览器给了我们一个**黑盒子**，叫做 `window.event`，这里就是对事件信息的所有描述!
2.事件的绑定方式
我们现在给一个注册事件都是使用 `onxxx` 的方式
oDiv.onclick = function () {
console.log('绑定了一个事件')
}
注意：但是这个方式不是很好，只能给一个元素注册一个相同类型的事件
- 一旦写了第二个事件，那么第一个就被覆盖了
3.事件的监听
监听方式一：
- `addEventListener` : 非 IE 7 8 下使用
- 语法： 元素.addEventListener('事件类型'， 事件处理函数， 冒泡还是捕获)
oDiv.addEventListener('click', function () {
console.log('绑定了一个事件')
}, false)
监听方式二：
`attachEvent` ：IE 7 8 下使用
- 语法： `元素.attachEvent('事件类型'， 事件处理函数)`
oDiv.attachEvent('onclick', function () {
console.log('绑定了一个事件')
})
4.两个方式的区别
- 注册事件的时候事件类型参数的书写
- `addEventListener` ： 不用写 on
- `attachEvent` ： 要写 on
- 参数个数
- `addEventListener` ： 一般是三个常用参数
- `attachEvent` ： 两个参数
- 执行顺序
- `addEventListener` ： 顺序注册，顺序执行
- `attachEvent` ： 顺序注册，倒叙执行
- 适用浏览器
- `addEventListener` ： 非 IE 7 8 的浏览器
- `attachEvent` ： IE 7 8 浏览器
//事件监听兼容写法
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.取消事件监听
removeEventListener `: 非 IE 7 8 下使用
- 语法：元素.removeEventListener('事件类型'， 事件处理函数， 冒泡还是捕获)
detachEvent`：IE 7 8 下使用
- 语法：`元素.detachEvent('事件类型'， 事件处理函数)`
示例：
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);
}
