DOM事件

1.DOM事件的级别

1. DOM0 element.onclick = function(){}

2.DOM2 element.addEventListener('click',function(){},false)

3.DOM3 element.addEventListener('keyup',function(){},false)

DOM2和DOM3的主要区别就是 定义的事假类型不同 DOM3增加了键盘事件 和 鼠标事件

2.事件模型

冒泡

结构上从里到外

目标元素 => ...(自己写的都没结构) => body => document => html => window

focus blur mouseenter mouseleave 等事件不支持冒泡

捕获

结构上从外到里

先捕获 后 冒泡

3.event对象常见应用

1.event.preventDefault() //阻止浏览器默认行为

兼容性写法

function stopDefault(e){
    <!--阻止默认行为W3C-->
    if(e&&e.preventDefault()){
        e.preventDefault();
    }else{
        <!--IE中阻止默认行为-->
        return false;
    }
        
    }
}

2.event.stopPropagation() //阻止冒泡

兼容性写法

function stopBubble(e){
     <!--如果提供了事件对象，则这是个非IE浏览器-->
    if(e&&e.stopPropagation){
        e.stopPropagation();
    }else{
        <!--我们需要使用IE的方式来取消事件冒泡-->
        window.event.cancelBubble = true;
    }
} 

3.event.stopImmediatePropagation() //当一个事件别注册多次时 优先级

列如

此时点击的结果为

当我们只想要一个注册事件1的时候 我们可以在 注册事件一的函数上加上 event.stopImmediatePropagation()

此时 结果就为

4.event.currentTarget //当前绑定事件的对象的dom

5.event.targe //触发事件的目标dom 事件委托

4.自定义事件

创建自定义事件的方法有两种

1.event = new Event(typeArg, eventInit);

typeArg

是DOMString 类型，表示所创建事件的名称。

eventInit可选

是 EventInit 类型的字典，接受以下字段:

• "bubbles"，可选，Boolean类型，默认值为 false，表示该事件是否冒泡。
• "cancelable"，可选，Boolean类型，默认值为 false， 表示该事件能否被取消。
• "composed"，可选，Boolean类型，默认值为 false，指示事件是否会在影子DOM根节点之外触发侦听器。
• 

 

2.event = new CustomEvent(typeArg, customEventInit);

typeArg

一个表示 event 名字的字符串

customEventInit | 可选

Is a CustomEventInit dictionary, having the following fields:  一个字典类型参数，有如下字段

• "detail", optional and defaulting to null, of type any, that is a event-dependant value associated with the event.   可选的默认值是 null 的任意类型数据，是一个与 event 相关的值
• bubbles 一个布尔值，表示该事件能否冒泡。 来自 EventInit。注意：测试chrome默认为不冒泡。
• cancelable 一个布尔值，表示该事件是否可以取消。 来自 EventInit

Event和customEvent 的区别 主要在于 customeEvent 可以传递 自己携带的一些参数