DOM事件你知道多少

一、基本概念：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