首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    用伪代码理解浏览器中的事件冒泡以及捕获

    好了,从这个时候开始,浏览器就会运行自己的事件循环,查看是否有各种事件发生 于是,这个时候,用户点击了一下页面上的某一块位置,但是浏览器并不知道用户点 击了哪一个dom,并且也不知道该dom是否有事件响应程序...,浏览器知道的只是用户点 击的位置的x,y坐标,浏览器这个时候就开始从dom树的根开始寻找,(这里是捕获的 开始),x,y是否在根的位置上,根有没有注册点击事件?...点击事件是否是捕获注册的 ?...如果事件是捕获注册的,那么执行这个事件处理函数,在该函数中,判断是否有 event.stopPropagation()来阻止事件的捕获,若阻止了,那么该点击事件的整个过程就完 成了,不论子节点是否注册了点击事件都不会执行到的...在回 去的过程中,判断每个节点是否注册了点击事件,是否是冒泡注册的,如果是冒泡注册的 事件,那么就执行,执行过程中如果发生了event.stopPropagation(),那么整个点击事件 就结束了

    67820

    如何在JavaScript中访问暂未存在的嵌套对象

    JavaScript 是个很神奇的东西。但是 JavaScript中的一些东西确实很奇怪,让人摸不着头脑。...但是,由于某种原因,user 中的 personal不可用,对象结构将是这样的: const user = { id: 101, email: 'jack@dev.com' } 现在,如果你在试着访问...const name = user.personalInfo.name; // Cannot read property 'name' of undefined 这是因为我们试图访问对象中不在的 key...做法是检查用户是否存在,如果不存在,就创建一个空对象,这样,下一个级别的键将始终从存在的对象访问。 不幸的是,你不能使用此技巧访问嵌套数组。...但是在轻量级前端项目中,特别是如果你只需要这些库中的一两个方法时,最好选择另一个轻量级库,或者编写自己的库。

    8.1K20

    浏览器中的JavaScript核心BOM(浏览器对象模型)

    浏览器中内置对象History属性与方法详解 引言 正文 一、History对象的作用 二、History对象的引用 三、History对象的方法 四、History对象的属性 结束语 引言 在学过JavaScript...之后,我们都知道对象分为内置对象 、宿主对象 、自定义对象,我们经常用到的浏览器中的内置对象就是宿主对象的一种,浏览器的内置对象有很多,本文就来详细讲解一下History对象的属性与方法吧。...正文 因为把浏览器的所有内置对象逐个详细讲解,文章篇幅会很长,所以我把每个对象的讲解都放在不同的文章中,大家如果还想了解其他的浏览器内置对象,可以划到文章最后一部分,那里有跳转链接。...接下来我们来看一下它的实现原理,因为有些小伙伴可能不知道栈结构,这里我就拿两个没有盖子的杯子来举例,第一个杯子最上面的绿色块儿代表当前所在的页面 首先我们浏览器未做任何跳转页面操作时,这第一个杯子中有一个页面...结束语 好了,Hitory对象的讲解就到这里了,如果各位对浏览器的其他内置对象感兴趣的话,可以去看我这篇文章——浏览器中的JavaScript核心讲解之BOM(浏览器对象模型),翻到最底部,可以看到各种其它浏览器内置对象的详解

    50110

    浏览器中的JavaScript核心BOM(浏览器对象模型)重点掌握对象之Window对象的属性与方法

    浏览器中的JavaScript核心BOM(浏览器对象模型)重点掌握对象之Window对象的属性与方法 引言 正文 一、Window对象的方法 (1)计时器 (2)打开窗口 (3)关闭窗口 (4)对话框...中扮演着核心的角色,它是客户端的一个全局内置对象。...若不是被别的窗口打开,则返回null;若是被别的窗口打开,则返回那个窗口的window对象。...Location对象 博客链接:浏览器中内置对象Location属性与方法详解 History对象 博客链接:浏览器中内置对象History属性与方法详解 Navigator对象 博客链接:浏览器中内置对象...Navigator和对象Screen的简单了解 Screen对象 博客链接:浏览器中内置对象Navigator和对象Screen的简单了解 结束语 各位如果有什么要补充的,欢迎在评论区留言。

    1.7K20

    浏览器中的JavaScript核心BOM(浏览器对象模型)重点掌握对象之Location对象的属性与方法

    浏览器中内置对象Location详解 引言 正文 一、Location对象的作用 二、Location对象的引用 三、Location对象的属性 四、Location对象的方法 结束语 引言 在学过JavaScript...之后,我们都知道对象分为内置对象 、宿主对象 、自定义对象,我们经常用到的浏览器中的内置对象就是宿主对象的一种,浏览器的内置对象有很多,本文就来详细讲解一下Location对象的属性与方法吧。...,所以我把每个对象的讲解都放在不同的文章中,大家如果还想了解其他的浏览器内置对象,可以划到文章最后一部分,那里有跳转链接。...二、Location对象的引用 我们可以通过浏览器的全局对象window来引用Location,像这样window.location ,也可以直接通过 location 来引用Locagtion对象。...结束语 好了,Location对象的讲解就到这里了,如果各位对浏览器的其他内置对象感兴趣的话,可以去看我这篇文章——浏览器中的JavaScript核心讲解之BOM(浏览器对象模型),翻到最底部,可以看到各种其它浏览器内置对象的详解

    67510

    浏览器中的JavaScript核心BOM(浏览器对象模型)对象Navigator和Screen的简单了解

    浏览器中内置对象Navigator和对象Screen的简单了解 引言 正文 一、Navigator对象 二、Screen对象 结束语 引言 想必大家很奇怪,为什么本文是简单了解。...】 正文 一、Navigator对象 Navigator对象主要是用来帮助我们获取浏览器的一些信息的,例如浏览器的名称 、浏览器编译版本 、浏览器的语言 、浏览器使用的插件信息…… 并且该对象被所有支持...javascript语言的浏览器支持,每个浏览器中的navigator对象都有一套自己的属性,所以我们就来列举一些大多数浏览器都通用的Navigator对象的属性吧 属性 描述 appName 完整的浏览器名称...二、Screen对象 该对象可以获取浏览器窗口外部显示器的信息,例如像素宽度和高度之类的。...那因为每个浏览器的Screen对象都有他们各自支持和不支持的属性,那我在这里就列举所有浏览器的支持的属性给大家,如果有想深入研究的可以去搜索更多的属性,以及他们的版本支持 属性 描述 availHeight

    56930

    C#.NET 匿名函数会捕获变量,并延长对象的生命周期

    C#/.NET 匿名函数会捕获变量,并延长对象的生命周期 发布于 2018-01-05 01:26 更新于...由于 DoSomething 中的委托参数恰好就是 MainPage 类型的,不禁让人觉得可能是此函数做了一些奇怪的事情。然而毕竟参数中传入的委托参数只是形参,理论上不应该影响到外部对象的回收。...那么影响的只可能是变量的捕获了。...匿名函数会捕获当前上下文的局部变量,延长对象的生命周期;直到此委托或表达式树被回收掉。...也就是说,只要某个方法中存在没有被回收的匿名函数/lambda 表达式/表达式树,那么当前上下文的对象直到这些匿名函数被回收之前都不会被回收,即便已经设为了 null。

    1.1K10

    为什么 Vue 中的 data 属性是一个函数而不是一个对象?

    在 Vue.js 中,data 属性通常是一个函数而不是一个对象,这是为了确保每个组件实例都有独立的数据副本。以下是详细解释:1....使用函数确保独立性通过将 data 定义为一个函数并返回一个对象,Vue 可以确保每个组件实例都有自己的数据副本。这样可以避免数据污染和意外的副作用。...}; }});在这个例子中,每个组件实例都会调用 data 函数并获得一个新的数据对象,从而确保数据的独立性。3. 性能优化使用函数返回数据对象还可以提高性能。...Vue 在创建组件实例时,会调用 data 函数来获取初始数据。这样可以确保每次创建新实例时都生成新的数据对象,而不会影响其他实例。4....总结将 data 定义为一个函数而不是一个对象,可以确保每个组件实例都有独立的数据副本,从而避免数据污染和意外的副作用,同时提高性能。

    6000

    JS 函数中的 arguments 类数组对象

    箭头函数中没有 arguments 1. arguments 介绍 众所周知,js 是一门非常灵活的语言。...当我们在 js 中调用一个函数时,经常会给函数传递一些参数,js 把调用函数时传入的全部实参存储到一个叫做 arguments 的类数组对象里面 arguments 是一个类数组对象,不是一个真正的数组...这里做下总结 arguments 是类数组对象(伪数组),即不是一个真正的数组,而是一个对象。...它有 length 属性,并且可以通过下标获取元素,但是它不能调用数组方法,就是因为它不是真正的数组,这一点可以通过查看它的原型验证 2. arguments 转为数组 arguments 是类数组对象...箭头函数中没有 arguments arguments 只存在于普通函数中,而在箭头函数中是不存在的 下面代码抛出错误异常:Uncaught ReferenceError: arguments is not

    5.4K20

    JavaScrip最容易犯的十大错误及其避免方法()

    Uncaught TypeError: Cannot read property 如果你是一个javascript开发者,你肯定看到过此错误 读取属性或调用方法的对象的未定义 这可能由于许多原因而发生,...your name" /> 4 (unknown): Script error 当未捕获的...例如,如果您在CDN上托管JavaScript代码,任何未捕获的错误(冒泡到window.onerror处理程序的错误,而不是在try-catch中捕获)将被报告为“脚本错误”而不是包含有用的错误 信息...您可以在IE Developer Console中对此进行测试。 这相当于Chrome中的错误“TypeError:’undefined’不是函数”。...是的,不同的浏览器可以针对相同的逻辑错误具有不同的错误消息。 对于使用JavaScript命名空间的Web应用程序中的IE,这是一个常见问题。

    18910

    是否还在疑惑Vue.js中组件的data为什么是函数类型而不是对象类型

    分析Vue.js组件中的data为何是函数类型而非对象类型 引言 正文 一、Vue.js中data的使用 二、data为对象类型 三、data为函数 结束语 引言 要理解本篇文章,必须具备JavaScript...这是因为这两个实例对象在创建时,是先获得了一个函数,将该函数的返回值作为了自己属性data的值,并且这两个实例对象中data的值在栈中对应的堆中的地址也不一样,所以他们不会互相影响。...因为我们刚开始定义了构造函数Vue时,给他内部的data设置了一个值,该值为对象类型,对象类型在js中称为引用数据类型,在栈中是存储着一个指向内存中该对象的堆中的地址。...当我们创建一个实例对象时,要获取函数中的data,其实只是获取了那个堆中的地址,同样的,创建第二个实例对象时,获取的也是那个地址,然而该地址指向的都是同一个数据,也就是{name: '李四', age:...因为本文也是说到构造函数创建实例对象的概念,如果对于JavaScript中对象的概念不理解的话,也可以翻阅我之前写的一篇文章,全面剖析了js中的对象概念——充分了解JavaScript中的对象,顺便弄懂你一直不明白的原型和原型链

    3.5K30

    【JavaScript】内置对象 ① ( 内置对象简介 | JavaScript 中的三类对象 - 自定义对象 内置对象 浏览器对象 | 常用的内置对象 )

    一、JavaScript 内置对象简介 1、JavaScript 中的三类对象 - 自定义对象 / 内置对象 / 浏览器对象 在 JavaScript 中 , 对象可以分为三类 : 自定义对象 , 内置对象..., 浏览器对象 ; 自定义对象 : 该类型对象是 开发者根据需求自己定义的对象 , 用于表示现实世界中的实体或抽象概念 ; 自定义对象 一般 通过 字面量 或 new 操作符 + 构造函数 创建...; 浏览器对象 : 这是 浏览器提供的 JavaScript 代码 与 网页 和 浏览器本身 交互的对象 , 这些对象 允许 JavaScript 代码 与 浏览器窗口 / 文档 / 历史记录 等进行交互...可以 帮助开发者 进行 快速开发 ; JavaScript 中 的 内置对象 提供了 语言的常用核心功能 , 如 : 日期处理 / 数学计算 / 字符串操作 等功能 , 常用的 内置对象如下 : Math...相关功能 , 如 : 字符串截取 substring() 字符串转大写字母 : toUpperCase() 字符串转小写字母 : toLowerCase() Number : 提供 数值相关的常量和函数

    37110

    框架篇-Vue面试题1-为什么 vue 组件中的 data 是函数而不是对象

    在vue组件中data的属性值是函数,如下所示 export default { data() { // data是一个函数,data: function() {}的简写 return...// data是一个对象 name: 'itclanCoder', }, }; 当一个组件被定义,data必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例 也就是说,在很多页面中...,定义的组件可以复用在多个页面 如果data是一个纯碎的对象,则所有的实例将共享引用同一份data数据对象,无论在哪个组件实例中修改data,都会影响到所有的组件实例 如果data是函数,每次创建一个新实例后...,调用data函数,从而返回初始数据的一个全新副本数据对象 这样每复用一次组件,会返回一份新的data数据,类似于给每个组件实例创建一个私有的数据空间,让各个组件的实例各自独立,互不影响,保持低耦合 可以看下面一段代码...,实例化出来的对象(p1,p2)都指向的是同一份实体 原型下的属性相当于是公有的 修改一个实例对象下的属性,也会造成另一个实例属性跟着改变,这样在组件复用的时候,肯定是不行的,那么改成函数就可以了的,如下代码所示

    1.9K20

    Linux编程中关于信号捕获“--”和新建函数体空格的问题讨论

    最近在学习《Linux命令行和shell脚本编程大全》(第四版)这本书,对于自己遇到的问题以及通过搜索引擎和书籍中的解决方案进行一个案例的剖析,希望对于像我这样的初学者,有一个帮助。...1 关于信号捕获 trap - 与 trap --在第16章 《脚本控制》的16.1.5节中关于修改或移除信号捕获中有如下描述:那么我在复述该脚本的时候,如下:[root@iZuf6gxtsgxni1r88kx9rtZ...#Loop 5.The trap is been removed.Second loop 1^C这里其实说明两个问题:利用trap取消信号捕获的设置时,可能不同系统有不同的模式,--以及-都是可以的关于信号的描述...2 关于新建函数空格的问题在17章,17.2.1节,讲述函数如何构建,主要有两种方式,其实跟其他编程方式类似,如下:{# 方法一function funcname {函数体}# 方法二funcname(...3 小结上述两个例子,是我个人在学习的过程中遇到的,可能新手学习的时候也会有类似的苦恼。

    12110
    领券