• 基本概念：DOM事件的级别

• DOM事件模型

• DOM事件流

• 描述DOM事件捕获的具体流

• Event对象的常见应用

• 自定义事件

事件级别

DOM0 element.=function(){}

DOM2 element.addEventListener('click', function(){}, false)    //冒泡false和捕获true DOM3 element.addEventListener('keyup', function(){}, false)

事件流

image.png

描述DOM事件捕获的具体流程

image.png

        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);

        ev.addEventListener('click', function (e) {            console.log('ev captrue');

        }, true);

Event对象的常见应用

event. preventDefault()    // 阻止默认事件(a标签)event. stopPropagation()    // 阻止冒泡event. stoplmmediatePropagation()    //绑定两个事件触发A事件阻止B事件发生event. current Target        //暂时还不是很了解event. target                    //暂时还不是很了解

自定义事件

image.png

var eve=new Event('custome')

ev.addEventListener('custome',function(){    console.log('custome')

    })

events.addEventListener('click', function () {    window.dispatchEvent(eve)  

}, true)

作者：艾尔丶Lawliet
链接：https://www.jianshu.com/p/fb0ba14e5f93