一、基本概念：DOM事件级别
DOM0级：
element.onclick=function(event){}
DOM2级：element.addEventListener('click',function(event){},false)冒泡
DOM3级：element.addEventListener('keyup',function(event){},false),新增的鼠标键盘事件
注意dom1级没有涉及事件，不是没有dom1标准
二、事件模型
事件模型
指捕获和冒泡
三、事件流
捕获阶段的事件流
冒泡阶段反之
事件处于捕获阶段触发
ev.addEventListener('click', function (e) {
console.log('ev captrue');
}, true);
window.addEventListener('click', function (e) {
console.log('window captrue');
}, true);
document.addEventListener('click', function (e) {
console.log('document captrue');
}, true);
document.documentElement.addEventListener('click', function (e) {
console.log('html captrue');
}, true);
document.body.addEventListener('click', function (e) {
console.log('body captrue');
}, true);
四、Event对象常见应用
-
event.preventDefault():取消事件的默认行为，a标签设置此方法，不会打开连接 -
event.stopPropagation():取消事件冒泡或捕获。 -
event.stopImmediatePropagation():取消事件冒泡或捕获，同时取消其他事件处理程序的调用。
仅打印click1
window.addEventListener('click',function(e){
console.log('click1')
e.stopImmediatePropagation()
},true)
window.addEventListener('click',function(e){
console.log('click2')
},true)
-
event.currentTarget:范围大，表示添加事件处理程序的那个元素 -
event.target:小范围，表示真正点击的目标元素
五、自定义事件
无参数
var eve = new Event('test');//定义test事件
ev.addEventListener('test', function () {
console.log('test dispatch');
});
setTimeout(function () {//1s后出发事件
ev.dispatchEvent(eve);
}, 1000);
var f=document.getElementById('float')
var newE=document.createEvent('Event')//创建新事件
newE.initEvent('a')//初始化事件类型
f.addEventListener('a',function(e){
console.log(5)
})
setTimeout(function () {//1s后出发事件
f.dispatchEvent(newE)
}, 1000);
有参数
var newE=document.createEvent('CustomEvent')
newE.initCustomEvent('a',true,false,'hello')//事件类 型‘a’,冒泡，事件不可以取消，detail中的值为hello
f.addEventListener('a',function(e){
console.log(e.detail)
})
f.dispatchEvent(newE)
六、IE事件与DOM事件的区别
1、DOM中事件的this指向当前元素，而IE中的this指向window
DOM
var f=document.getElementById('float')
f.addEventListener('click',function(e){
console.log(this===f)//true
},true)
f.onclick=function(e){
console.log(this===f)//true
}
IEEdge已经不支持attachEvent了
f.attachEvent('onclick',function(){
console.log(this===window)//true
})
2、IE中的同一事件类型的不同处理程序，按照反添加顺序执行，DOM反之。
3、事件对象不同
DOM级别的事件处理程序均会传入event对象，在IE中的event对象方式取决于指定的事件处理程序方法。
IE中使用DOM0方法,event对象是window的一个属性
f.onclick=function(){
event=window.event
console.log(this===f)//true
}
IE中使用attachEvent()方法,会传入event对象,同DOM
f.attachEvent('onclick',function(event){
console.log(event.type)
})
4、IE中的事件目标是srcElement
event.srcElement,window.event.srcElement
