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

面试官:什么js中的事件流以及事件模型?

一、事件 在了解什么js中的事件流之前,我们先了解一下什么js事件。...二、事件流 知道了什么事件,那什么事件流呢? 我们先从字面意义上理解,事件我们已经知道了是什么,那流呢?...由外圈到内圈 document-->html-->body-->div 四、事件流模型发展史 事件冒泡由IE提出的,而事件捕获则是由Netscape(网景)提出的事件流概念。...参数 描述 event 必须,字符串,指定事件名 function 必须,指定事件触发时要执行的函数 useCapture 可选值,指定事件是否在捕获或者冒泡阶段执行;1、true:事件句柄在捕获阶段执行...addEventListener()冒泡演示 还是同样的代码,只是这里我们将addEventListener()的最后一个参数改为false,将执行过程设置为冒泡。

1.9K10

js动画事件_JavaScript事件

js之动画事件 首先,动画事件主要包括以下三个animationstart,animationiteration和animationend事件,下面做简单分别介绍。...animationstart 该事件在css动画开始播放时触发 animationiteration 该事件在css动画重新播放时触发 animationend 该事件在css动画结束播放时触发 我们知道...animation:name duration timing-function delay iteration-count direction; 分别是:动画名称 动画持续事件 动画运行速度曲线 动画开始时的运行时间...下面一段代码讲述的采用监听动画开始,动画再次播放和动画结束做出相应的改变,这里用到addEventListener监听动画开始、动画持续播放、动画结束播放。 <!...this.innerHTML="动画重新运行"; x.style.background="greenyellow"; } function myanimationend() //动画运行结束时触发,同样也是通过事件监听事件

18.3K10

Js 事件委托(事件代理)

这里其实还有2层意思: 第一,现在委托前台的同事可以代为签收的,即程序中的现有的dom节点事件的; 第二,新员工也是可以被前台MM代为签收的,即程序中新添加的dom节点也是有事件的。...二、为什么使用事件委托 一般来说,dom需要有事件处理程序,我们都会直接给它设事件处理程序就好了,那如果很多的dom需要添加事件处理呢?...,这就是为什么性能优化的主要思想之一就是减少DOM操作的原因;如果要用事件委托,就会将所有的操作放到js程序里面,与dom的操作就只需要交互一次,这样就能大大的减少与dom的交互次数,提高性能; 每个函数都是一个对象...,对象就会占用内存,对象越多,内存占用率就越大,自然性能就越差了(内存不够用,硬伤,哈哈),比如上面的100个li,就要占用100个内存空间,如果1000个,10000个呢,那只能说呵呵了,如果用事件委托...三、事件委托原理 事件委托利用的事件冒泡原理,将事件绑定到父级元素上,当点击子元素时,通过事件冒泡将事件传递到父级元素。  四、总结: 那什么样的事件可以用事件委托,什么样的事件不可以用呢?

11.4K30

js事件大全

一般事件 事件 浏览器支持 描述 onClick IE3|N2|O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击 onDblClick IE4|N4|O 鼠标双击事件 onMouseDown...onMouseMove IE4|N4|O 鼠标移动时触发的事件 onMouseOut IE4|N3|O3 当鼠标离开某对象范围时触发的事件 onKeyPress IE4|N4|O 当键盘上的某个键被按下并且释放时触发的事件...onStop IE5|N|O 浏览器的停止按钮被按下时触发的事件或者正在下载的文件被中断 onUnload IE3|N2|O3 当前页面将被改变时触发的事件 表单相关事件 事件 浏览器支持 描述...滚动字幕事件 事件 浏览器支持 描述 onBounce IE4|N|O 在Marquee内的内容移动至Marquee显示范围之外时触发的事件 onFinish IE4|N|O 当Marquee...元素完成需要显示的内容后触发的事件 onStart IE4|N|O 当Marquee元素开始显示内容时触发的事件 编辑事件 事件 浏览器支持 描述 onBeforeCopy IE5|N|O 当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发的事件

3.8K10

js --- 事件

1.事件流   事件发生时会在元素节点与根节点之间按照特定的顺序传播,路径所经过的所有节点都会收到该事件,这个传播过程即DOM事件流。...2.两种事件流模型   1.冒泡型事件流:事件的传播从最特定的事件目标到最不特定的事件目标。即从DOM树的叶子到根   2.捕获型事件流:事件的传播从最不特定的事件目标到最特定的事件目标。...即从DOM树的根到叶子 3.绑定事件的方法   1.普通浏览器 绑定事件:addEventListener(type,name,bool);     删除事件:removeEventListener...()   2.ie 低版本 绑定事件:attachEvent()     删除事件:detachEvent() 4.参数说明 type 事件类型 例如:click load   name...事件执行函数   bool true 为事件捕获 && false 为事件冒泡 5.阻止事件冒泡和 事件捕获 1.阻止事件冒泡 不 阻止默认行为     event.stopPropagation

7.5K30

JS 事件循环

,脚本执行,事件处理等 其包含的线程有:GUI 渲染线程(负责渲染页面,解析 HTML,CSS 构成 DOM 树)、JS 引擎线程、事件触发线程、定时器触发线程、http 请求线程等主要线程 关于执行中的线程...工作线程:也称幕后线程,这个线程可能存在于浏览器或js引擎内,与主线程分开的,处理文件读取、网络请求等异步事件。...宏任务主要包含:script( 整体代码)、setTimeout、setInterval、I/O、UI 交互事件、setImmediate(Node.js 环境) 微任务主要包含:Promise、MutaionObserver...、process.nextTick(Node.js 环境) setTimeout/Promise 等API便是任务源,而进入任务队列的由他们指定的具体执行任务。...最后的最后,记住,JavaScript 一门单线程语言,异步操作都是放到事件循环队列里面,等待主执行栈来执行的,并没有专门的异步执行线程。

15.4K10

js事件循环

首先,我们来解释下事件循环个什么东西: 就我们所知,浏览器的js单线程的,也就是说,在同一时刻,最多也只有一个代码段在执行,可是浏览器又能很好的处理异步请求,那么到底为什么呢?...从上图我们可以看出,js主线程它是有一个执行栈的,所有的js代码都会在执行栈里运行。...其实(正如上图所示),js有两个任务队列的,一个叫做Macrotask Queue(Task Queue),一个叫做Microtask Queue 前者主要是进行一些比较大型的工作,常见的有setTimeout...原因:因为一开始js主线程中跑的任务就是macrotask任务,而根据事件循环的流程,一次事件循环只会执行一个macrotask任务,因此,执行完主线程的代码后,它就去从microtask队列里取队首任务来执行...setTimeout的原因吧哈哈哈哈 以上,只是我个人对事件循环的一些看法, 以及借鉴了其他优秀文章 参考: http://www.zcfy.cc/article/node-js-at-scale-understanding-the-node-js-event-loop-risingstack

18.7K41

js 事件笔记

2、常见的事件 事件某个行为或者触发,比如点击、鼠标移动、提交表单,滚动菜单等等 二、事件流 1、事件流的作用 事件流描述的从页面中接收事件的顺序,比如有两个嵌套的div,点击了内层的div,这时候内层的...比如点击div事件,先是document监听到,然后分发到html/body/div 2.3DOM事件流 DOM2级事件规定事件流包括三个阶段,首先发生的事件捕获,为截取事件提供机会,然后实际目标接收事件...,最后冒泡阶段 事件捕获阶段 处于目标阶段 事件冒泡阶段 ?...DOCTYPE html> JS Bin .box1{ border:...3.2 addEventListener使用 addEventListener有三个参数 事件类型 事件处理方法 布尔参数,如果true表示在捕获阶段调用事件处理程序,如果false,则是在事件冒泡阶段处理

11K21

js鼠标事件

页面加载事件(onload),鼠标双击事件(ondbclick) window.onload=function(){                 //绑定元素,执行对应事件 鼠标双击(ondblclick...(){                     alert('我双击显示的');                 }             } 鼠标摁下(onmousedown)事件(摁下就执行,鼠标无需抬起...)                 document.getElementById('d3').onmousedown=function(){                     alert('我鼠标摁下提示...                    alert('鼠标移出操作');                 }             } PS:鼠标移动(onmousemove)和鼠标移入(onmouseover)区别:移动事件指鼠标只要移动就产生事件...,移入事件需要移入到指定的对象内才执行事件

18.1K40

JS事件

想要知道这些事件在什么时候进行调用的,就需要了解一下“事件流”的概念。 事件事件流描述的就是从页面中接收事件的顺序。...而早期的IE和Netscape提出了完全相反的事件流概念,IE事件事件冒泡,而Netscape的事件流就是事件捕获。...console.log("hello"); } script> 复制代码 动态脚本: 通过在JS中选中某个节点,然后给节点添加onclick属性 "btn">按钮 var btn =...(观察者模式) addEventListener() ---添加事件侦听器 removeEventListener() ---删除事件侦听器 函数均有3个参数, 第一个参数要处理的事件名 第二个参数作为事件处理程序的函数...第三个参数一个boolean值,默认false表示使用冒泡机制,true表示捕获机制。

8.3K20

js事件委托

概念 事件委托也叫事件代理,事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。...动态绑定: 新生dom节点如果用原来的方式无法绑定事件的,用委托的方式这方面可以轻松实现,保证父元素存在即可。...举例:ul下的li元素有绑定事件,我们通过ul绑定委托之后,委托的源码部分会在其执行函数内针对事件源进行筛选判定是否符合筛选条件(是否li),然后针对的获取属性或者内容,进行相关的操作。...,依次捕获阶段、目标阶段、冒泡阶段。...这里导致默认事件事件向上冒泡的。 捕获vs冒泡 捕获阶段:父元素先触发,子元素后触发; 冒泡阶段:子元素先触发,父元素后触发。

3.2K31

js鼠标事件

今天遇到一个非常奇怪而又搞笑的事情:给一个a标签添加一个鼠标移动上时给一个事件,我给其添加的一个onMouseMove事件,结果在IE6 7 8 9和GOOLE中都很正常,结果在Firox中出现问题了...这是我遇到的第一个在firox中的兼容性问题,开始让我很苦恼,不知道什么原因,结果仔细查找,就是onMouseMove事件在日怪。当我给提添加onMouseOver事件时就对了。...鼠标的一些事件如下所示: onMouseOver IE3|N2|O3 当鼠标移动到某对象范围的上方时触发的事件 onMouseMove IE4|N4|O 鼠标移动时触发的事件 onMouseOut IE4...|N3|O3 当鼠标离开某对象范围时触发的事件 onKeyPress IE4|N4|O 当键盘上的某个键被按下并且释放时触发的事件....[注意:页面内必须有被聚焦的对象] onKeyDown IE4|N4|O 当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象] onKeyUp IE4|N4|O 当键盘上某个按键被按放开时触发的事件

13.6K30
领券