阅读 26

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事件。
关注下面的标签,发现更多相似文章
评论