DOM事件类

1.前言

• 本文主要讲述了DOM事件的一些基本概念。
• 如何自定义事件。

2. DOM事件类

• DOM事件的级别

    DOM0   element.onclick = function() {} // 或者html标签内的onClick

    DOM1   DOM1规范中没有关于事件的更新。

    DOM2   element.addEventListener('click', function() {}, false) // false/true => 事件的类型：冒泡/捕获

    DOM3   element.addEventListener('keyup', function() {}, false) // DOM3规范中增加的键盘、鼠标等事件。

• DOM事件模型

    1. 事件的模型分为捕获、冒泡
    2. 捕获： 从父元素向子元素
    3. 冒泡： 子元素向父元素

• DOM事件流

    事件流： 事件捕获 => 目标对象 =》 事件冒泡

• DOM事件的具体流程

    捕获流程：window => document => html => body => ...(dom节点) => 目标元素
    冒泡流程：与捕获流程相反。
    body节点： document.body
    html节点： document.documentElement

• Event的常见应用

    event.preventDefault()     // 阻止默认行为
    event.stopPropagation()    // 阻止冒泡
    
    // 当dom节点有多个事件时，在事件1中添加event.stopImmediatePropagation()可以阻止事件2的执行
    event.stopImmediatePropagation()
    
    // 事件代理(事件委托)，当要ul下的li添加事件时，可以把事件绑定在ul上，点击时只要判断点击的li元素
    event.currentTarget()  // 当前事件绑定的节点
    event.target()         // 表示当前被点击的元素，ie老版本不支持

• 自定义事件

    val myEvent = new Event('eventName');   
    // 或者new CustomEvent('eventName', params)， CustomEvent api允许你传入自定义的details，并通过事件传递。
    dom.addEventListener('eventName', function() {
      console.log('eventName'+ '事件被执行')
    })
    dom.dispatchEvent(myEvent) // 通过dispatchEvent触发自定义事件

3、总结

1. 本文主要讲述了dom事件的基本概念。
2. 捕获和冒泡的具体流程。
3. 如何自定义dom事件。