JS中事件处理机制包含事件委托、事件捕获和事件冒泡

1、事件委托(Event Delegation)

事件委托是一种利用事件冒泡机制的技术,它允许我们将事件处理程序绑定到父元素上,而不是在每个子元素上都绑定事件处理程序。 当一个事件发生在子元素上时,它会冒泡到父元素,然后由父元素上的事件处理程序来处理。这样做的好处是减少了事件处理程序的数量,尤其适用于动态生成的内容。 举例来说,如果有一个列表,我们希望对列表中的每个项都执行相同的操作,那么我们可以将点击事件处理程序绑定到整个列表的父元素上,而不是在每个列表项上都绑定。

2、事件捕获(Event Capturing)

事件捕获是事件处理的第一个阶段,在事件到达目标元素之前发生。 当一个事件发生时,它会从文档树的根节点开始向下传播至目标元素。在这个过程中,如果某个元素在捕获阶段上绑定了事件处理程序,那么这些事件处理程序会按照捕获的顺序被依次执行。 事件捕获阶段很少被使用,因为它相对不常见,而且大多数情况下我们更关心事件的冒泡阶段。

3、事件冒泡(Event Bubbling)

事件冒泡是事件处理的第二个阶段,在事件到达目标元素之后发生。 当一个事件发生时,它会从目标元素开始向上冒泡至文档树的根节点。在这个过程中,如果某个元素或者它的祖先元素上绑定了事件处理程序,那么这些事件处理程序会按照冒泡的顺序被依次执行。 事件冒泡是 JavaScript 中最常用的事件处理机制,因为它使得我们可以在较高级别的元素上捕获事件,并且更容易管理事件处理程序。

手机摄影教学分享 2024-05-19 分类: 0 3

JavaScript 运行机制以及Event Loop(事件循环)

JavaScript执行机制通常指的是它的单线程事件循环任务队列

单线程:

JavaScript在浏览器中是单线程的,意味着同一时间只能执行一个任务,后续的任务必须排队等候。

事件循环:

JavaScript执行时,会形成一个执行栈和一个任务队列。当执行栈为空时,会从任务队列中取出任务执行。

任务队列:

任务队列通常包括宏任务和微任务。宏任务(Macro Task)如setTimeout、setInterval、I/O操作、UI渲染等;微任务(Micro Task)如Promise、MutationObserver等。

手机摄影教学分享 2024-05-19 分类: 0 0

vue中$route和$router的区别

标签:路由vue

1、$router是用来操作路由,$router是VueRouter的一个实例,他包含了所有的路由,包括路由的跳转方法,钩子函数等,也包含一些子对象(例如history)。

2、$route是用来获取路由信息,$route是一个跳转的路由对象(路由信息对象),每一个路由都会有一个$route对象,是一个局部的对象。包括 path,params,hash,query,fullPath,matched,name 等路由信息参数。

手机摄影教学分享 2024-05-19 分类: 0 2

什么是window对象? 什么是document对象?

标签:window对象

window对象是指浏览器打开的窗口。是 JavaScript 中的全局对象,在浏览器环境中始终存在且可直接访问。

document对象是Document对象(HTML 文档对象)的一个只读引用,window对象的一个属性。

东江哥 2024-05-19 分类: 0 3

v-for循环为什么一定要绑定key?

vue中列表循环需加:key="唯一标识" 唯一标识可以是item里面id index等,因为vue组件高度复用增加Key可以标识组件的唯一性,为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM

1、vue更新已渲染过的元素时,默认使用就地复用策略(如果该元素dom未修改,则复用之前的元素,否则重新渲染这一项)。

2、key的作用是唯一标识组件元素,辅助判断新旧vdom节点在逻辑上是不是同一个对象,是否有更新

vue是通过比对组件自身新旧vdom进行更新的。

东江哥 2024-05-19 分类: 0 3

css样式中:link和@import的区别

标签:样式表css3

两者都是外部引用css的方式。但是有一定的区别:

1. 从属关系:

link是一个xhtml标签,除了加载css外,还可以定义 RSS、rel 连接属性等;

@import属于css范畴,只能加载css。

2. 加载顺序:

link引用css的时候,在页面载入的同时加载;

@import需要页面完全载入以后才加载。

3.兼容性:

link是xhtml标签,无兼容问题;

@import是在css2.1提出的,只可在 ie5 才能识别,低版本的浏览器不支持。

4.DOM可控制性:

link支持使用javascript控制dom去改变样式;

@import不支持。

现松 2024-05-19 分类: 0 2

javascript合并对象的几种方法

1、使用Object.assign()方法

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。

2、使用展开运算符...(ES6语法)

对象的扩展运算符(...)用于取出参数对象的所有可遍历属性,拷贝到当前对象之中。

3、使用for...in循环(递归赋值)

4、使用lodash的merge方法(如果已经在项目中使用了lodash)

5、jquery中的extend()

jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象。

现松 2024-05-19 分类: 0 1

实现水平垂直居中的方式?

1、通过绝对定位的方式 absolute 负margin

2、absolute transform (过渡)

3、absolute margin auto

4、使用flex布局设置居中

5、给容器加给伪元素line-height

6、tabel-cell实现垂直居中

现松 2024-05-19 分类: 0 3

创建一个空数组/空对象有哪些方式?

创建空对象

1.通过字面量: {}

2.通过Object

new Object()

3.通过函数

function a() {
   this.b = 2
}
let c = new a()

4.通过Object.create

Object.create()

创建空数组

1.通过字面量:[]

2.通过Array

new Array()

3.通过Object.create

Object.create(Array.prototype)
胡学长 2024-05-19 分类: 0 0

什么是作用域和作用域链?

作用域是指变量和函数在代码中的可访问范围

作用域链是指在代码中查找变量和函数的过程,当一个变量或函数在当前作用域中找不到时,它会向上层作用域继续查找,直到找到为止,这种层层嵌套的查找关系形成了作用域链。

胡学长 2024-05-19 分类: 0 1
活跃用户
追枫
Ta还没有签名
某帅
Ta还没有签名
goodBoy
Ta还没有签名
柠夏椥音℡
Ta还没有签名