JavaScript中的事件模型

JavaScript中的事件模型分为:事件和事件流、原始事件、标准事件和IE事件。

事件与事件流

JavaScript中的事件,可以理解为HTML文档或者浏览器中发生的一种交互操作,让网页有互动的功能。常见的事件就是加载事件、鼠标事件和自定义事件。

因为DOM是一个树结构,如果在子节点上绑定事件,那触发事件的时候,就会发生执行顺序的问题,这就涉及到了事件流的概念:

事件流会经历三个阶段:

  1. 事件捕获阶段
  2. 处于目标阶段
  3. 事件冒泡阶段

事件冒泡是一种从下往上的传播方式,由触发点开始,然后向上传播到最不具体的那个节点上,也就是DOM中的最高层父节点上。例如以下代码:

javascript 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button id="clickMe">Click Me</button>
  <script>
    var btn =  document.getElementById('clickMe')
    btn.onclick = function(){
      console.log('1.btn')
    }

    document.body.onclick = function(){
      console.log('2.body')
    }

    document.onclick = function(){
      console.log('3.document')
    }

    window.onclick = function(){
      console.log('4.window')
    }
  </script>
</body>
</html>

点击按钮的时候,事件首先在button触发,然后向上传播。

事件捕获阶段则是从Document上开始的。

事件模型

事件模型可以分为三种:

  1. 原始事件模型【DOM0级】
  2. 标准事件模型【DOM2级】
  3. IE事件模型(基本上不用了)

原始事件模型【DOM0级】

事件绑定比较简单,有两种方式:

1、HTML代码中绑定:

javascript 复制代码
<button onclick='funclick()'></button>

2、通过JS代码绑定:

javascript 复制代码
var btn = document.getELementById('btn');
btn.onclick = function(){

}

原始事件模型的特性:

  1. 绑定速度快,原始事件具有很好的跨浏览器优势,会以最快的速度绑定,但是由于绑定速度太快,可能页面还未完全加载出来,以至于事件可能无法正常运行。
  2. 只支持冒泡,不支持捕获
  3. 同一个类型的事件只能绑定一次

标准事件模型【DOM2级】

标准事件模型的一个事件,会有三个过程:

  • 事件捕获阶段:事件从Document上一直向下传播到目标元素,依次检查经过的节点是否绑定事件监听函数,如果有那就执行;
  • 事件处理阶段:事件达到目标元素,触发目标元素的监听函数
  • 事件冒泡阶段:事件从目标元素冒泡到Document上,依次检查经过的节点上是否绑定事件监听函数,如果有那就执行。

事件监听函数:addEventListener(eventType, handler, useCapture)

移除监听函数:removeEventListener(eventType, handler, useCapture)

eventType:指定事件类型

handler:事件处理函数

useCapture:是一个布尔值,表示是否在事件捕获阶段执行,默认值是false,和IE浏览器保持一致。

相关推荐
不做超级小白15 分钟前
深入理解 JavaScript 对象字面量:创建对象的简洁方法
开发语言·javascript·ecmascript
朝阳3924 分钟前
JS 正则表达式 -- 分组【详解】含普通分组、命名分组、反向引用
前端·javascript·正则表达式
2301_818732061 小时前
用layui表单,前端页面的样式正常显示,但是表格内无数据显示(数据库连接和获取数据无问题)——已经解决
java·前端·javascript·前端框架·layui·intellij idea
Komorebi゛2 小时前
【uniapp】获取上传视频的md5,适用于APP和H5
前端·javascript·uni-app
林涧泣2 小时前
【Uniapp-Vue3】动态设置页面导航条的样式
前端·javascript·uni-app
杰九2 小时前
【全栈】SprintBoot+vue3迷你商城(10)
开发语言·前端·javascript·vue.js·spring boot
Hopebearer_2 小时前
入门 Canvas:Web 绘图的强大工具
前端·javascript·es6·canva可画
ILUUSION_S3 小时前
Vue平台开发三——项目管理页面
javascript·vue.js
_pengliang4 小时前
react native i18n插值:跨组件trans
javascript·react native·react.js
Catherinemin4 小时前
剑指Offer|LCR 045.找树左下角的值
javascript·算法