【前端攻城狮之vue基础】01原生事件和vue事件知识基础和拓展

事件循环模型

事件循环模型分为三个部分，一个是执行栈，一个是浏览器的API模块，一个是存放回调函数的回调队列

• js执行代码的时候先执行初始化代码，当在定义一个事件/定义一个定时器的时候，将回调函数交给浏览器的事件管理模块/定时器管理模块；
• 当事件触发或者定时结束的时候，浏览器的事件管理模块/定时器管理模块就将回调函数放到任务队列里面等待执行；
• 只有当初始化代码执行结束之后，才会循环遍历执行任务队列里面的回调函数
  别称：任务队列=回调队列=消息队列=事件队列

进程和线程

进程和线程，js是单线程还是多线程

• 进程指的是程序的一次运行，占用一片独立的内存空间
• 线程是CPU调度的最小单元，一个进程里面可以有很多个进程，这种程序叫多线程程序
• 单线程指的是，同一个进程里面只能有一个线程；一个程序必须运行在一个进程的一个线程上
• js是单线程语言，代码从上到下顺序执行，（因为如果是多线程的，会出现线程切换的问题，比如一个线程正要修改p标签的文字，这是突然切换到 了另一个要删除p标签的线程，改着改着就被删了）但是H5的web workers是多线程的

js代码分类

JS代码分类

• 分为初始化代码和回调代码（作为参数传递的函数叫做回调函数，定义定时器，和绑定事件的代码都是初始化代码）
• js代码执行的时候先执行初始化代码，之后才会执行回调代码（定时器的回调函数和事件的回调函数）

浏览器内核

浏览器内核
顾名思义：浏览器程序中最核心的代码

• 谷歌和苹果浏览器 用的是Webkit内核
• 火狐 用的是 gecko
• IE浏览器用的是trident
• 浏览器内核包括很多模块，
  • 以下是主线程
    有js引擎，用来解析js代码；
    文档解析模块：将文档解析成字符串
    Dom/css模块，将html文本字符串解析成节点对象
    布局和渲染模块，将节点对象渲染到页面上
  • 以下是分线程
    定时器模块
    事件处理模块
    网络请求模块

事件的三个阶段

事件的三个阶段

• 捕获阶段 从window对象向内传播到目标节点的过程，不会触发事件
• 目标阶段 在目标节点上开始触发事件
• 冒泡阶段 从目标节点向外传播到window对象，会依次触发事件

事件的捕获

如果一个父元素和子元素绑定了同一个事件，但是我们只想要触发父元素，怎么做?

• 使用事件捕获capture，将事件处于捕获阶段正向目标阶段传递的时候，就触发事件执行回调函数
• 原生js可以将addEventListener的第三个参数设置为true
• vue可以添加事件修饰符capture让事件在捕获阶段就触发@click.capture

事件的委托

事件委托

• 利用了事件冒泡的原理，将事件加到父元素或祖先元素上,提高了代码开发的效率

vue事件传参

vue事件传参

• 只传自定义参数 @click=‘fun（obj.id）’
• 如果不传递任何参数只传递事件对象（不传递参数可以省略括号），默认methods对应的回调函数会接受一个事件对象作为实参 @click=‘fun()’
• 传递事件对象和自定义参数，自定义参数用$event接受

vue事件和原生js事件的区别

Vue事件和原生事件的区别

• 个人理解是标签只要一绑定了事件就会将参数传递给methods回调函数做实参，当事件触发的时候，才会执行methods里面的回调函数；而原生的js 事件，只要传递了实参，就代表执行了回调函数

vue事件修饰符

vue事件修饰符

• .stop 阻止向上冒泡
• .capture 让事件在捕获阶段就触发
• .once 事件只会触发一次
• .prevent 阻止默认事件 比如点击a标签之后，会向href属性地址跳转
• .native 监听一个原生事件
• .self 只有event.target是当前操作的元素时 才会触发事件
• .passive 默认行为立马执行，不用先等回调函数先执行