1 什么是事件
一个事件有什么组成
触发谁的事件:事件源
触发什么事件:事件类型
触发后做什么:事件处理函数
2 事件绑定方式
1) dom0级的事件绑定方式
元素.onxxxx的方式
弊端:一旦写了第二个事件,那么第一个时间就会被覆盖
2)dom2级事件监听
元素.addEventListener('事件类型',事件处理函数[,冒泡还是捕获])
这个方法不兼容,在IE的低版本里面使用addEvent
var oDiv = document.querySelector('div')
// dom0级事件绑定
oDiv.onclick = function () {
console.log(this)
console.log('触发了事件1')
}
// dom2级事件监听
oDiv.addEventListener('click', function () {
console.log('我是第一个事件')
})
3 事件的解绑方式
1) dom0级事件的解绑
元素.onxxx = null
同类事件会被覆盖并且清空
2) dom2级事件的解绑
元素.removeEventListener('事件类型',要解绑的事件处理函数[,冒泡还是捕获])
用于解绑指定元素的事件监听器
var oDiv = document.querySelector('div')
function clickHandler() {
console.log(this)
console.log('第一个事件')
}
function clickHandler2() {
console.log('第二个事件')
}
// dom2级 绑定事件
oDiv.addEventListener('click',clickHandler)
oDiv.addEventListener('click', clickHandler2)
// 解绑
oDiv.removeEventListener('click',clickHandler)
oDiv.removeEventListener('click', clickHandler2)
// dom0级 绑定事件
oDiv.onclick = clickHandler
oDiv.onclick = clickHandler2
// dom0解绑
oDiv.onclick = null
4 事件委派
元素.dispatchEvent(事件对象)
== 向一个指定的事件目标派发一个事件,可以是原生事件也可以是自定义事件
// 事件委派
var event1 = new Event('click')
console.log(event1)
setInterval(function(){
oDiv.dispatchEvent(event1)
},1000)