学习
实践
活动
工具
TVP
写文章

JavaScript如何处理事件

#思特沃克好声音# (图片:网络) 想必大家都知道JavaScript一般都是在浏览器中执行,大家也知道可以通过事件调用JavaScript函数,可是大家清楚JavaScript如何处理事件的吗? 理解事件队列 这篇文章的原型来自于JavaScript Tutorial(作者:Ilya Kantor)的其中一小节Events and timing in-depth,不能算是翻译,因为我不会把一整节内容都搬过来 浏览器中的JavaScript引擎一种基于事件驱动的单线程模型,无论在什么时候都只且只有一个JavaScript线程在运行程序,事件可以看作浏览器分发给JavaScript引擎的许多任务,这些任务可以是 浏览器本身允许多个线程异步执行的,除了JavaScript引擎线程以外还有GUI渲染线程(负责界面渲染)、浏览器事件触发线程、定时触发线程、HTTP请求线程、AJAX请求线程、下载线程等等,其中前三个线程属于常驻线程 这就和任务(事件)队列有关系了,前面说过JavaScript引擎会一直等待任务队列中任务的到来,而setTimeout就会使定时触发线程产生 异步定时事件 放在任务队列的最后,等队列中排在它前面的事件执行完了之后才会执行

39060

javaScript事件处理

window.onload=function(){ var mydiv = document.getElementById("mydiv"); alert("页面加载完成,mydiv的内容: "+mydiv.innerText); } </script> </head> <body>

  • 广告
    关闭

    2022腾讯全球数字生态大会

    11月30-12月1日,邀您一起“数实创新,产业共进”!

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

    JavaScript事件处理程序

    我们常用的点击,滚动视口,鼠标滑动都是事件,为响应事件而调用的函数被称为事件处理程序,在js中事件处理程序的名字以 on 开头。 html事件处理 我们都知道js代码也可以写在html元素标签内部。 DOM事件处理 DOM2规范为事件处理程序定义了俩个方法,一个赋值addEvenTListener()一个移除removeEventListener()。 这俩个方法接受三个参数,事件名、事件处理函数、布尔值。 布尔值true表示在捕获阶段执行,false(默认)表示冒泡阶段执行。 不了解捕获和冒泡的可以先看一下JavaScript事件流 (juejin.cn) 我们再改造一下刚刚的例子。 ie事件处理 ie浏览器也弄了一个类似我们刚刚DOM2规范的方法,attachEvent()和detachEvent(),注意这俩个方法接收俩个参数,它不支持捕获操作,所以只接收事件处理名称和函数。

    8710

    JavaScript事件对象与事件处理程序

    一、事件对象 事件对象:在DOM触发事件时,会产生一个事件对象event,这个事件对象包含着所有与事件相关的信息。 既然event事件对象,那么它必然存在属性   ①DOM中的事件对象event属性   (1)、type属性用于获取事件类型   (2)、target、srcElement<兼容IE事件> 属性用于获取事件目标   (3)、stopPropagation()方法 用于阻止事件冒泡   (4)、preventDefault() 方法 阻止事件的默认行为 二、DOM2级事件处理程序   (1)、addEventListener() 用于处理指定事件处理程序操作  (2)、removeEventListener() 用于处理删除事件处理程序操作 三、IE事件处理程序   (1 )、attachEvent() 用于处理指定事件处理程序操作  (2)、detachEvent() 用于处理移除事件处理程序操作

    23230

    浅谈JavaScript事件事件处理程序)

    事件处理程序的名字以“on”开头,比如click事件事件处理程序onclick。为事件指定事件处理程序的方式有多种方式。 HTML事件处理程序 元素支持的事件,都可以使用与相应事件处理程序同名的HTML特性来指定。这个特性的值能支持一定的JavaScript代码。 另一个缺点,这样的事件处理程序的作用域链在不同的浏览器中会导致不同结果。不同JavaScript引擎遵循的标识符解析规则略有差异,很可能在访问非限定对象时出错。    通过HTML指定事件处理程序的最后一个缺点HTML与JavaScript代码的紧密耦合。如果要更换事件处理程序就需要改动两个地方:JavaScript和HTML。 DOM级事件处理程序   通过JavaScript指定事件处理程序的传统方式将一个函数赋值给事件处理程序属性。通过JavaScript指定事件处理程序有两个优势:简单和浏览器兼容性好。

    41150

    详解JavaScript事件处理程序

    一、事件是什么? 事件用户与浏览器进行交互的方式。譬如用户点击按钮就会产生click事件,浏览器会找到相应js代码并执行,我们要做的就是按照规则编写js代码放在指定位置即可。 当元素发生了某个事件,不仅会执行本元素的事件处理程序,还会一直向上寻找所有父元素对应的事件处理程序并执行。 2、事件委托 让父元素监听执行子元素的某个事件,原理:子元素没有注册事件处理程序,事件会冒泡向上寻找相应执行程序。 el.addEventListener("click", clickTest); 2、EventTarget.removeEventListener 删除用 EventTarget.addEventListener 注册的事件处理程序 alert("not cancelled"); } } 六、查看所有可用事件 所有可用事件这里 查看>>> 七、参考文档 详解JavaScript事件处理程序

    12300

    第9章 JavaScript事件处理

    事件处理程序在JavaScript中的调用 <input id="save" name="bt_save" type="button" value="保存"> <script language="<em>javascript</em> 注意:在<em>JavaScript</em>中指定<em>事件</em><em>处理</em>程序时,<em>事件</em>名称必须小写,才能正确响应<em>事件</em>。 2.<em>事件</em><em>处理</em>程序在HTML中的调用 在HTML中调用<em>事件</em><em>处理</em>程序,只需要在HTML标签中添加相应的<em>事件</em>,并在其中指定要执行的代码或是函数名即可。 9-5 <em>如何</em>移除<em>事件</em>监听器 IE: element.attachEvent ('onclick', observer); // 注册<em>事件</em>监听器 element.detachEvent('onclick ', observer); // 移除<em>事件</em>监听器 DOM标准: // 第一个参数<em>是</em><em>事件</em>名称,第二个参数 observer <em>是</em>回调<em>处理</em>函数,第三个参数注明该回调<em>处理</em>函数<em>是</em>在<em>事件</em>传递过程中的捕获阶段被调用还是冒泡阶段被调用

    14720

    JavaScript事件处理的例子:事件捕捉和冒泡 - event capture and bubble

    事件捕获和事件冒泡事件流中的两个阶段,任何事件产生时,如点击一个按钮,将从最顶端的容器开始(一般html的根节点)。 浏览器会向下遍历DOM树直到找到触发事件的元素 点击button 1: target: button 至此target node处理完了,继续处理hierarchy树的下一个节点 此时event.target 还是button: 然后继续处理body下面的div 节点: 找到目的节点了: 一旦浏览器找到该元素,事件流就进入事件目标阶段,该阶段完成后,浏览器会沿 大多数现代库使用冒泡监听,而在捕获阶段处理。浏览器包含一个方法来管理事件冒泡。 事件处理程序可以调用stopPropagation告诉DOM事件停止冒泡 第二个方式调用 stopImmediatePropagation ,它不仅停止冒泡,也会阻止这个元素上其它监听当前事件处理程序触发

    15950

    React如何处理事件

    今天我们主要说一下React如何处理事件的。事件处理前端开发过程中非常重要的一部分,通过事件处理,我们可以响应用户的各种操作,从而实现一个富交互的应用。 React事件处理VS原生Dom事件处理 两者在事件处理方面极其类似,只是在一些语法上稍有不同: React 事件绑定属性的命名采用驼峰式写法(如:onClick,onKeyUp),而不全是小写字母。 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数,而不是一个字符串(DOM 元素的写法)。 this问题 在以类继承的方法定义的组件中,事件处理函数的this指向的并不是当前组件。 传递参数有两种方法: 1、通过箭头函数 其实也就是在箭头函数内,调用事件处理函数。

    29620

    JavaScript异常如何处理

    window.addEventLinstener 当一项资源(如图片或脚本)加载失败,加载资源的元素会触发一个 Event 接口的 error 事件,并执行该元素上的onerror() 处理函数。 由于网络请求异常不会事件冒泡,因此必须在捕获阶段将其捕捉到才行,但是这种方式虽然可以捕捉到网络请求的异常,但是无法判断 HTTP 的状态 404 还是其他比如 500 等等,所以还需要配合服务端日志才进行排查分析才可以 补充一点:如果去掉控制台的异常显示,需要加上: event.preventDefault(); 用来阻止默认事件 VUE errorHandler 对于前端的错误处理,Vue 提供了 Vue.config.errorHandler await = async function(action) { try { await action(); } catch (err) { // 这里处理错误的逻辑 1.事件处理器 2.异步代码 3.服务端的渲染代码 4.在 error boundaries 区域内的错误 我们来举一个小例子,在下面这个 componentDIdCatch(error,info) 里的类会变成一个

    42330

    事件如何到达activity的?

    这将有助于我们对事件分发的本质理解。 那么触摸信息如何一步步到达viewRootImpl?为什么说viewRootImpl事件分发的起点?viewRootImpl如何对触摸信息进行分发处理的? 触摸信息如何到达viewRootImpl的? 我们都知道的,在我们手指触摸屏幕时,即产生了触摸信息。 当viewRootImpl接收到触摸信息时,也正是应用程序进程事件分发的开始。 viewRootImpl如何分发事件的? view树的根view可能一个view,也可能一个viewGroup,view会直接处理事件,而viewGroup则会进行分发。 那么,这些callBack如何处理触摸事件的?触摸事件又是如何再一次回到控件树进行分发的呢? 了解具体的分发之前,需要先来了解一个类:PhoneWindow。

    32710

    JavaScript 如何工作的🔥 🤖

    JavaScript 世界上最受欢迎和最讨厌的语言之一。它被爱,因为它是有效的。您只需学习 JavaScript 即可制作全栈应用程序。 这篇博客将解释 JavaScript 如何在浏览器中执行代码,我们将通过动画 gif 来学习它。 让我们看看 JavaScript如何在浏览器中执行代码 浏览器创建一个具有两个组件的全局执行上下文,即内存和代码组件。 如何在执行上下文中调用函数? JavaScript 中的函数与其他编程语言相比,工作方式有所不同。 我知道代码很笨,没有做任何事情,但它会帮助我们理解 JavaScript 如何处理回调函数。 JavaScript 将创建一个全局执行上下文。

    13410

    JavaScript 如何运行的?

    原文:JavaScript 如何运行的? 作者:hengg Fundebug经授权转载,版权归原作者所有。 什么JavaScript? 比如我们熟悉的I/O多路复用(事件驱动的灵魂),在Windows上的实现方案IOCP方案,在Linux上epoll。 编译过程 现在我们确认了,即使解释执行的语言,也是需要编译的。那么代码如何编译的呢?我们来简单了解一下。 词法分析 词法分析会把语句分解成词法单元,即Token。 JavaScript中最常见的十个错误: 下图某错误处理平台收集统计的JavaScript Top10 错误,其中7个TypeError,1个 ReferenceError: [2019-09-26- 结语 现在我们已经了解JavaScript如何运行的。但是了解这些能够帮我们写出更好的代码吗? 答案肯定的。

    57910

    JavaScript如何工作的?

    所以浏览器无法直接理解 javascript。 那我们该如何要求浏览器做些什么呢? 让我们从浏览器理解的语言开始。 浏览器仅理解 0 和 1,即二进制/位格式的语句。 那么什么 JavaScript 引擎? 那么,一次只允许一项任务时,该如何工作? 这是Web API的和回调队列。 回调队列 回调队列或消息队列遵循先进先出原则的队列数据结构(首先插入队列的项目将首先从队列中删除)。它存储所有从事件表移至事件队列的消息。每个消息都有一个关联的功能。 事件循环 事件循环不断检查执行上下文堆栈是否为空以及事件队列中是否有任何消息。仅当执行上下文堆栈为空时,才会将方法从回调队列移至 ECS。 回调队列 “嘿,事件循环请检查 ECS 是否为空。

    18731

    什么全局事件总线?vue全局事件总线如何安装?

    不管对于应用程序还是对于组件来说适当的沟通都是非常重要的,假如组件之间不能够进行正常沟通的话,那么将会导致运用程序难以正常运转。 一般来说,组件之间的沟通都是通过全局事件总线来实现的,那么vue全局事件总线如何安装?下面为大家简单介绍vue全局事件总线如何安装。 什么全局事件总线 全局事件总线一种可以沟通各个组件的方式,通过这种方式,不仅能够防止组件之间的粘稠度过高,还能够加快沟通的效率。 有些组件专门用来接收数据的这些组件通过绑定相应的事件,可以达到沟通的效果,而且能够大大提升沟通的效率。 vue全局事件总线如何安装 如果想要在vue中使用全局事件总线的话,必须要提前进行安装才可以。 上面为大家简单介绍了vue全局事件总线如何安装,全局事件总线这个概念在目前比较热门,使用全局事件总线可以对组件进行沟通的操作。如果能够保持组件之间的正常沟通的话,那么就能大大提升应用程序运行的质量。

    25130

    JavaScript 如何工作的:JavaScript 的内存模型

    JavaScript 如何工作的:深入 V8 引擎&编写优化代码的 5 个技巧! JavaScript 如何工作的:内存管理+如何处理 4 个常见的内存泄漏! JavaScript 如何工作的:事件循环和异步编程的崛起+ 5 种使用 async/await 更好地编码方式! JavaScript 如何工作的:深入网络层 + 如何优化性能和安全! JavaScript 如何工作的:CSS 和 JS 动画底层原理及如何优化它们的性能! JavaScript 如何在内部处理这些基本功能? 更重要的,作为程序员,理解 JavaScript 的底层细节对我们有什么好处。 自从2016年双十一正式上线,Fundebug累计处理了10亿+错误事件,付费客户有Google、360、金山软件、百姓网等众多品牌企业。欢迎大家免费试用!

    28950

    Nginx 究竟如何处理事件

    在了解了网络事件以及事件分发收集器以后,让我们来了解 Nginx 怎么样处理事件的? Nginx 事件循环 ? 取出以后就会进行循环处理事件,如上就是处理事件的一个循环:当发现队列中不为空,就把事件取出来开始处理事件;在处理事件的过程中,可能又生成新的事件,比如说发现一个连接新建立了,可能要添加一个超时时间,比如默认的 ,就是循环处理事件部分指向的事件队列部分,等待下一次来处理。 如果所有的事件处理完成以后呢,又会返回到等待事件部分。 总结 本篇文章主要讲解了 Nginx 如何处理事件的以及 Nginx 事件循环的流程怎么样的,为下一步讲解 Nginx 事件循环流程中如何从操作系统中获取等待处理事件做铺垫,并且通过事件循环了解到为什么

    27320

    javascript如何监听页面刷新和页面关闭事件

    这里就给大家讲讲javascript的onbeforeunload()和onunload()两个事件。 相同点: 两者都是在对页面的关闭或刷新事件作个操作。 不同点: unbeforeunload()事件执行的顺序在onunload()事件之前发生。 (因为,unbeforeunload()在页面刷新之前触发的事件,而onubload()在页面关闭之后才会触发的)。 unbeforeunload()事件可以禁止onunload()事件的触发。 onunload()事件无法阻止页面关闭的。

    5.3K30

    Nginx 究竟如何处理事件

    在了解了网络事件以及事件分发收集器以后,让我们来了解 Nginx 怎么样处理事件的? Nginx处理事件的一个循环 取出以后就会进行循环处理事件,如上就是处理事件的一个循环:当发现队列中不为空,就把事件取出来开始处理事件;在处理事件的过程中,可能又生成新的事件,比如说发现一个连接新建立了 ,就是循环处理事件部分指向的事件队列部分,等待下一次来处理。 如果所有的事件处理完成以后呢,又会返回到等待事件部分。 本篇文章主要讲解了 Nginx 如何处理事件的以及 Nginx 事件循环的流程怎么样的,为下一步讲解 Nginx 事件循环流程中如何从操作系统中获取等待处理事件做铺垫,并且通过事件循环了解到为什么

    8910

    如何JavaScript处理大量数据

    在几年之前,开发人员不会去考虑在服务端之外处理大量的数据。现在这种观念已经改变了,很多Ajax程序需要在客户端和服务器端传输大量的数据。此外,更新DOM节点的处理在浏览器端来看也是一个很耗时的工作。 而且,需要对这些信息进行分析处理的时候也很可能导致程序无响应,浏览器抛出错误。 将需要大量处理数据的过程分割成很多小段,然后通过JavaScript的计时器来分别执行,就可以防止浏览器假死。 先看看怎么开始: function ProcessArray(data,handler,callback){ ProcessArray()方法支持三个参数: data:需要处理的数据 handler:处理每条数据的函数 queue源数据的复制,虽然不是在所有情景下都必要,但是我们通过传递引用修改的,所以最好还是备份一下。 首先,先计算endtime,这是程序处理的最大时间。do.while循环用来处理每一个小块的数据,直到循环全部完成或者超时。 JavaScript支持while和do…while循环。

    42990

    扫码关注腾讯云开发者

    领取腾讯云代金券