DOM事件类

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

• DOM事件模型

• DOM事件流

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

• Event对象的常见应用

• 自定义事件

事件级别

DOM0 element.onclick=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)