首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

2020最新前端面试题_2020年前端面试题

直接在子组件通过 this.$parent.event 来调用组件方法。 子组件里用$emit()向组件触发一个事件组件监听这个事件就行了。...组件把方法传入子组件子组件里直接调用这个方法。 46、 如何让 CSS 只在当前组件起作用? 组件 style 前面加上 scoped 47、如何获取 dom?...需要管理焦点、选择文本或媒体播放时 触发式动画 与第三方 DOM 库集成 14、如何模块化 React 代码? 可以使用 export 和 import 属性来模块化代码。...Redux 由以下组件组成: Action 这是一个用来描述发生了什么事情对象 Reducer 这是一个确定状态将如何变化地方 Store 整个程序状态/对象保存在 Store View 查只显示...如何将一个HTML元素添加到DOM? 可以通过appendTo()方法指定DOM元素末尾添加一个现存元素或者一个新HTML元素。 什么是jQuery? jQuer能做什么?

6.6K10
您找到你想要的搜索结果了吗?
是的
没有找到

jQueryon()、bind()、live()、delegate()之间区别

首先简述下回涉及到几个知识点: DOM 首先,可视化一个HMTL文档DOM是很有帮助。一个简单HTML页面看起来就像是这个样子: ?...click事件接着会向根方向传播,广播到元素,然后接着是每个祖先元素,只要是它某个后代元素上单击事件触发事件就会传给它。 ? 操纵DOM语境,document是根节点。...接下来就详细说下几者之间区别: 1 .bind() .bind()是直接绑定在元素上,也很好解决了浏览器事件处理兼容问题。...; }); 当我们a 上面点击时候,首先会触发它本身所绑定click事件,然后会一路往上,触发元素,祖先元素上所有绑定click事件。...matchSelector方法来选出那个事件被调用时,会非常慢 当发生事件元素在你DOM很深时候,会有performance问题 当然,live方法还可以被绑定到具体元素(或context)

1.2K30

Vue面试核心概念

我们组件做了两件事,一是给子组件传入props,二是监听事件并用子元素变化更新元素传入props模型数据。 7....组件之间通过组件(标签)上面定义属性传值,子组件通过props方法接受组件传入数据;子组件向组件传递数据则要通过$emit方法引发事件并向组件传递事件参数。 10. MVVM和MVC区别?...(1)components目录添加你自定义组件(如Header.vue),JS中封装组件并导出: export default { … } (2)组件使用组件)中导入子组件: import...讲述Vue组件生命周期(vue钩子函数) Vue组件从创建到销毁整个过程不同时机会引发不同事件,我们可以使用钩子函数在对应事件添加处理代码,这些组件不同时机引发钩子事件称为“Vue组件生命周期...mounted是将编译好HTML挂在到页面完成后执行钩子函数,整个生命周期中只执行一次;模板渲染成html后调用,通常是初始化页面完成后,再对htmlDOM节点进行一些需要操作。

17110

100个最常问JavaScript面试问答-第2部分(共10部分)

通过与Vanilla JS对象进行交互或使用jQueryprop()方法,可以访问property。 attributes位于HTML,而不是DOM。...“冒泡阶段”事件冒泡或向上传播至,祖父,祖父,直到到达窗口为止;而在“捕获阶段”事件从窗口开始向下直到触发元素事件或event.target。 此过程称为事件传播。...Bubbling Phase事件冒泡,或者到达,祖父,祖父,直到到达窗口为止。...这整个事件事件冒泡。 问题16.什么是事件捕获? 答: 当事件发生在DOM元素上时,该事件并不完全发生在那个元素上。 捕获阶段,事件从窗口开始一直到触发事件元素。...问题18.如何知道是否元素中使用了event.preventDefault()方法? 答: 我们可以事件对象中使用event.defaultPrevented属性。

1.1K31

02-老马jQuery教程-jQuery事件处理

绑定简单事件 DOMDOM0绑定事件方式是直接给事件属性赋值,但是这样有个缺点就是每次指定事件处理程序会把之前覆盖掉。...jQuery简单绑定事件方式,可以让我绑定多个事件处理程序跟DOM2绑定事件方式一样....(链式编程原理) // 例如: $('#btn').click(function(){}); 1.2 jQuery简单绑定事件方式和DOM0区别 DOM0绑定事件方式 var btn = document.getElementById...event.stopPropagation() 防止事件冒泡到DOM树上,也就是不触发任何前辈元素上事件处理函数。 4....自定义事件 jQuery对象on方法不仅仅能绑定DOM已经定义事件,而且还可以注册和触发非标准事件也就是自定义事件

6.4K00

jQuery

来代替,相当于原生jswindow 1.1.3 jQuery 对象和 DOM 对象 用原生 JS 获取来对象是 DOM 对象 jQuery 方法获取元素是 jQuery 对象。...jQuery 对象是经过包装dom对象(伪数组形式存储) jQuery对象才能使用jQuery方法,不能混用 1.1.4 jQuery对象和Dom对象转换 // DOM对象转换成jQuery对象...jsclassName会覆盖类名,jQuery中指操作指定类名,不影响原先类名 3.2 jQuery效果 注意: 动画或者效果一旦触发就会执行,如果多次触发,就造成多个动画或者效果排队执行...div加定位,否则无效 3.2.5 事件切换 jQuery中有hover()事件,功能类似于csshover hover(function,function) 传入2个参数,第一个参数是鼠标移入是触发函数...()解绑事件 解除全部事件 $('div').off() 解除特定事件 $('div').off('click') 解除事件委托 $('div').off('click','li') 只触发一次事件

8.4K10

02-老马jQuery教程-jQuery事件处理

绑简单事件 DOMDOM0绑定事件方式是直接给事件属性赋值,但是这样有个缺点就是每次指定事件处理程序会把之前覆盖掉。...jQuery简单绑定事件方式,可以让我绑定多个事件处理程序跟DOM2绑定事件方式一样....(链式编程原理) // 例如: $('#btn').click(function(){}); 1.2 jQuery简单绑定事件方式和DOM0区别 DOM0绑定事件方式 var btn =...event.stopPropagation() 防止事件冒泡到DOM树上,也就是不触发任何前辈元素上事件处理函数。 4....自定义事件 jQuery对象on方法不仅仅能绑定DOM已经定义事件,而且还可以注册和触发非标准事件也就是自定义事件

2.7K80

React核心原理与虚拟DOM

React事件与原生事件执行顺序react所有事件都挂载document当真实dom触发后冒泡到document后才会对react事件进行处理所以原生事件会先执行然后执行react合成事件最后执行真正在...错误边界渲染期间、生命周期方法和整个组件构造函数捕获错误。... componentDidMount ,我们能够获取它引用这样我们就可以把它传递给 jQuery 插件了。...该方法会在重新渲染前被触发。其默认实现总是返回 true. 如果你知道什么情况下你组件不需要更新,你可以 shouldComponentUpdate 返回 false 来跳过整个渲染过程。...ReactDOM.render将生成好虚拟DOM渲染到指定容器上,其中采用了批处理、事务等机制并且对特定浏览器进行了性能优化,最终转换为真实DOM虚拟DOM组成防止XSS: 借助Symbol.for(

1.9K30

事件委托和this

它会随着DOM一层层向上冒泡,回溯到根节点。   冒泡过程非常有用。它将我们从对特定元素事件监听释放出来,如果没有事件冒泡,我们需要监听很多不同元素来确保捕获到想要事件。...也就是:利用冒泡原理,把事件加到上,触发执行效果。 好处呢:1.提高性能; 2. 易于维护; 比如用document元素来处理按钮点击行为,用ul元素来处理其子元素li事件。...(2)如何阻止事件冒泡 stopPropagation:告诉DOM事件停止冒泡 stopImmediatePropagation,它不仅停止冒泡,也会阻止这个元素上其它监听当前事件处理程序触发。...可以给它们共同祖先元素设置监听处理程序,但是如果共同祖先元素DOM处于较高层次(离根节点比较近),就会监听很多同辈元素事件,会造成意想不到结果;当然,也可能存在逻辑或结构原因要分开这两个元素...发布/订阅模型也能自定义事件。发布/订阅模型从一个元素发送消息后并向上遍历,有时也向下遍历,DOM会通知遍历路径上所有元素事件发生了。在下面的示例JQuery通过trigger方法传递事件

78530

看不完那种!前端170面试题+答案学习整理(良心制作)

') }) 28.jqueryattr和prop区别 对于html元素本身就带有的固定属性,处理时,使用prop方法;对于html元素自定义dom属性时,处理时,使用attr方法。...33.jquery事件冒泡,怎么执行,如何停止冒泡事件 事件冒泡从里面往外面开始传递。...63.如何jquery将一个html元素添加到dom appendTo()方法,将一个html元素添加到dom使用它可以指定dom元素末尾添加一个现存元素或者一个新html元素。...image 109.说说你对重绘和重排理解,以及如何优化? 浏览器加载网页时会生成DOM和CSSOM ?...继承:对象属性和方法被子对象使用

11.4K50

jQuery 教程

jQuery 代码... }); 这是为了防止文档完全加载(就绪)之前运行 jQuery 代码,即在 DOM 加载完成后才可以对 DOM 进行操作。...event.stopImmediatePropagation() 阻止其他事件处理程序被调用 event.stopPropagation() 阻止事件向上冒泡到 DOM ,阻止任何处理程序被事件通知...该处理程序只能被每个元素触发一次 $.proxy() 接受一个已有的函数,并返回一个带特定上下文函数 ready() 规定当 DOM 完全加载时要执行函数 resize() 添加/触发 resize...下面的例子演示如何获得链接 href 属性值: <!...下图展示了一个家族。通过 jQuery 遍历,您能够从被选(当前)元素开始,轻松地在家族向上移动(祖先),向下移动(子孙),水平移动(同胞)。这种移动被称为对 DOM 进行遍历。

16.9K20

金九银十求职季,前端面试大全送给你

兼容模式,页面以宽松向后兼容方式显示,模拟老式浏览器行为以防止站点无法工作。 2、行内元素有哪些?块元素有哪些?...21、this指向 this指向直接调用者 this指向new出来对象 事件this指向这个事件对象 IEattachEventthis指向全局window this指的当前对象...、文档建立,根据标记请求所需指定MIME类型文件(比如css、js),同时设置了cookie; (10)、页面开始渲染DOM,JS根据DOM API操作DOM,执行事件绑定等,页面显示完成。...- beforeUpdate(更新前) 在数据更新之前调用,发生在虚拟DOM重新渲染和打补丁之前。可以该钩子中进一步地更改状态,不会触发附加重渲染过程。...场景有:单页应用,组件之间状态、音乐播放、登录状态、加入购物车 图片描述 - state Vuex 使用单一状态,即每个应用将仅仅包含一个store 实例,但单一状态和模块化并不冲突。

1.4K20

JQuery高级

jQuery定义变量时候,一般命名用$开头。同事一看就知道是使用jQuery,然后使用jQuery语法。 其实$是jQuery一个函数。...***事件冒泡 现象:父子标签 触发事件,这个事件会逐层向传递。 子集执行了某一事件,会逐层向上触发相同事件,直到被处理或者遇到return。...比如子有单击事件,那么如果有单击事件也会被触发如果有单击事件也会被触发。 任何一个操作,计算机或者浏览器都会去处理。不管你有没有设置对应事件。...把子事件委托给:最近能包含住将来发生事件所有子)------ 事件代理 .delegate(真实发生事件目标,字符串事件属性,匿名函数去写命令function(){}) 工作中有可能会有人用这个词...最终是通过js内置结构化表现手法,将网页所有html节点查找到,然后实现一个倒置树状结构图,这个树状结构图就叫DOM

1.5K50

javascript事件原理

1、两种事件流模型 事件传播顺序对应浏览器两种事件流模型:捕获型事件流和冒泡型事件流。 冒泡型事件流:事件传播是从最特定事件目标到最不特定事件目标。即从DOM叶子到根。...【推荐】 捕获型事件流:事件传播是从最不特定事件目标到最特定事件目标。即从DOM根到叶子。 事件捕获思想就是不太具体节点应该更早接收到事件,而最具体节点最后接收到事件。 <!...2、DOM事件DOM标准采用捕获+冒泡。两种事件流都会触发DOM所有对象,从document对象开始,也document对象结束。...note: 1)、尽管“DOM2事件”标准规范明确规定事件捕获阶段不会涉及事件目标,但是IE9、Safari、Chrome、Firefox和Opera9.5及更高版本都会在捕获阶段触发事件对象上事件...js事件代理则是一种简单有效技巧,通过它可以把事件处理器添加到一个元素上,从而避免把事件处理器添加到多个子元素上。

1K10

19 道高频 vue 面试题解答(下)

会经历以下阶段:生成AST优化codegen首先解析模版,生成AST语法(一种用JavaScript对象形式来描述整个模板)。...$children:访问 / 子实例(3)EventBus ($emit / $on) 适用于 父子、隔代、兄弟组件通信 这种方法通过一个空 Vue 实例作为中央事件总线(事件中心),用它来触发事件和监听事件...Vue提倡单向数据流,即 props 更新会流向子组件,但是反过来则不行。这是为了防止意外改变组件状态,使得应用数据流变得难以理解,导致数据流混乱。...如何从真实DOM到虚拟DOM涉及到Vue模板编译原理,主要过程:将模板转换成ast ,ast 用对象来描述真实JS语法(将真实DOM转换成虚拟DOM)优化将ast 生成代码虚拟 DOM 优缺点...Vue宣称可以更快地计算出Virtual DOM差异,这是由于它在渲染过程,会跟踪每一个组件依赖关系,不需要重新渲染整个组件

1.8K00

前端面经(2)

事件冒泡、捕获(委托)事件冒泡指在在一个对象上触发某类事件,如果此对象绑定了事件,就会触发事件,如果没有,就会向这个对象对象传播,最终对象触发事件。...因为事件冒泡过程中会上传到节点,并且节点可以通过事件对象获取到目标节点,因此可以把子节点监听函数定义节点上,由节点监听函数统一处理多个子元素事件,这种方式称为事件代理。...js,渲染真实DOM开销是非常大, 比如我们修改了某个数据,如果直接渲染到真实DOM, 会引起整个dom重绘和重排。那么有没有可能实现只更新我们修改那一小块dom而不要更新整个dom呢?...解析html构建DOM2. 解析css构建CSS、样式计算3. 生成布局(Layout Tree)浏览器渲染篇:1. 建立图层(Layer Tree)2. 生成绘制列表3....防抖节流函数防抖关注一定时间连续触发,只最后执行一次,而函数节流侧重于一段时间内只执行一次。防抖//定义:触发事件n秒内函数只能执行一次,如果在n秒内又触发事件,则会重新计算函数执行时间。

1.2K60

jQuery 事件(三) 事件绑定和解绑、对象使用、自定义事件

jQuery根据 W3C 标准规范了事件对象,所以jQuery事件回调方法获取到事件对象是经过兼容后处理过一个标准跨浏览器对象 ...为防止事件冒泡到DOM树上,也就是不触发任何前辈元素上事件处理函数 event.which:获取鼠标单击时,单击是鼠标的哪个键 event.which 将 event.keyCode 和 event.charCode...DOM元素; .this和event.target都是dom对象 如果要使用jquey方法可以将他们转换为jquery对象。...() 会影响所有与 jQuery 对象相匹配元素,而 .triggerHandler() 仅影响第一个匹配到元素 使用 .triggerHandler() 触发事件,并不会在 DOM 向上冒泡...}); $("#accident").on("click",function() { alert("trigger触发事件会在 DOM 向上冒泡"); })

4K30

求职 | 史上最全web前端面试题汇总及答案2

onsubmit事件返回false 9、如何动态操作表格?...JS如何操作Cookie? 简述cookie,JS如何操作cookie 15、谈谈javascript数组排序方法sort()使用,重点介绍sort()参数使用及其内部机制。...①事件绑定就是针对dom元素事件,绑定在dom元素上 ②普通事件即为非针对dom元素事件 27、事件委托是什么 利用事件冒泡原理,让自己触发事件,由他元素代替执行!...代码如下: 31、this对象理解 ①this总是指向函数直接调用者(而非间接调用者); ②如果有new关键字,this指向new出来那个对象; ③事件,this指向触发这个事件对象,特殊是...2、Javascript与jQuery有什么区别? jquery 就对javascript一个扩展,封装,就是让javascript更好用,更简单。 3、jQuery如何注册事件

6K20

2023金九银十必看前端面试题!2w字精品!

解释JavaScript事件冒泡(Event Bubbling)和事件捕获(Event Capturing)。 答案:事件冒泡是指事件从最具体元素开始向元素逐级触发,直到触发到根元素。...答案:事件冒泡是指当一个事件DOM触发时,它会从最内层元素开始向外传播至最外层元素。事件捕获是指当一个事件DOM触发时,它会从最外层元素开始向内传播至最内层元素。 12....答案:Vue组件通信方式包括: 父子组件通信:通过props向子组件传递数据,子组件通过事件组件发送消息。 子组件通信:子组件通过$emit触发事件组件通过监听事件并响应。...答案:插槽是一种用于组件扩展内容机制。命名插槽允许组件向子组件插入具有特定名称内容,而作用域插槽允许子组件将数据传递给组件。示例: <!...它允许组件捕获并处理其子组件中发生JavaScript错误,以避免整个应用崩溃。错误边界作用包括: 捕获并处理组件错误,防止错误导致整个应用崩溃。

34842
领券