事件类

DOM事件类：

  • DOM事件的级别
  • DOM事件的模型
  • DOM事件流
  • DOM事件捕获的具体流程
  • Event对象的常见应用
  • 自定义事件

1、DOM事件的级别

主要有三个级别0,，2，3。没有1，主要是当时没有涉及到与事件相关的操作。

DOM0级，el.onclick = function(){}；DOM2级和DOM3级差不多，都是使用的是el.addEventListener()来监听，DOM2是el.addEventListener(onclick,function(){},false)，DOM3是el.addEventListener('keyup',function(){},false)。这里的第三个参数是事件模型的捕获和冒泡判定，true为捕获，false为冒泡。而这连个主要区别在于第一个参数上，DOM2第一个参数主要是onclick、onmouserover、onmousemove、onmouseout等；DOM3主要就是鼠标事件、键盘事件等。

2、事件模型和事件流

事件模型就是事件捕获和事件冒泡两个了。捕获就是从上往下触发，冒泡是事件从下往上触发。而事件流就是对模型的具体化，也就一个操作的具体过程。就如点击鼠标触发，它是如何传到页面的，这一个完整的过程就可以说是事件流。完整的事件事件流主要有三个阶段，第一个阶段是捕获阶段，当到达目标后就是第二个阶段即目标阶段，第三个阶段就是目标阶段（目标元素）返回到浏览器执行（windon）也就是冒泡阶段。

 

3、DOM事件捕获的具体流程

DOM事件捕获的具体流程是从浏览器往下触发到最后的目标元素。浏览器即window对象。

执行顺序：window——>document——>document.documentElement（html）——>body——>元素结构（从上到下）——>最后目标元素。

4、Event对象的常见应用

阻止事件的默认行为event.preventDefault()，阻止时间冒泡event.stopPropagation()，event.stopImmediatePropagation() 这个方法比较特别，它可以阻止绑定在同一个元素上的两个都执行事件，这么来说，一般在一个元素元素上绑定两个事件，那么这两个事件都会被执行，而想要它们只执行一个事件就需要用到event.stopImmediatePropagation() 这个方法来阻止了。还有两个是event.currentTarget和event.target，第一个是指当前元素所绑定的事件，而第二个是指当前的元素。

5、自定义事件

事件有很多种，如click，onmouserover、onmousemove等等，这些都是js本身存在的。自定义事件的话需要用到事件对象Event()，如：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>自定义事件</title>
  <style>
    *{margin:0;padding:0}
    .el{
      width:100px;
      height:100px;
      line-height:100px;
      background-color: red;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="el">
    自定义事件
  </div>
  <script>
    const el = document.querySelector('.el')
    // 自定义事件
    const custom_e = new Event('test')
    el.addEventListener('test', function(){
      console.log('456')
    })
    el.addEventListener('click', function(){
      // 点击执行自定义事件
      el.dispatchEvent(custom_e)
    })
  </script>
</body>
</html>

 

posted @ 2020-12-08 00:43  溪过山丘  阅读(120)  评论(0)    收藏  举报