11讲_JavaScript事件分析
JavaScript的事件循环知识点
JavaScript的事件循环知识点JavaScript事件循环（Event Loop）是理解JavaScript异步编程的关键概念之一。
了解事件循环的工作原理，对于深入理解JavaScript的运行机制至关重要。
本文将介绍JavaScript事件循环的基本概念以及相关知识点。
1. 单线程模型JavaScript是一种单线程的脚本语言，意味着它在同一时刻只能执行一个任务。
这与其他多线程语言有很大的不同，因为多线程语言可以同时处理多个任务，提高程序的并发性和性能。
2. 任务队列JavaScript将任务分为两种类型：同步任务和异步任务。
同步任务按照顺序依次执行，而异步任务则会被放入任务队列中等待执行。
3. 事件循环机制JavaScript的事件循环机制基于任务队列。
当执行一个脚本时，会创建一个主线程来执行其中的同步任务。
同时，主线程会检查任务队列是否有可执行的异步任务。
如果存在异步任务，主线程会将这些任务推入执行栈中，以供执行。
4. 宏任务与微任务在任务队列中，有两种类型的任务：宏任务（macro task）和微任务（micro task）。
宏任务包括整体代码块、setTimeout、setInterval等，而微任务则包括Promise、MutationObserver等。
5. Event Loop的执行顺序当主线程执行完当前的宏任务后，会检查微任务队列中是否有任务。
如果有，会将微任务队列中的所有任务依次执行完毕。
然后再继续执行下一个宏任务。
这种执行顺序被称为"先微任务，后宏任务"。
6. 定时器setTimeout和setInterval是常用的定时器函数。
它们被放入宏任务队列，并在指定的时间后被推入执行栈中执行。
7. 异常处理在事件循环中，如果一个任务发生异常，异常信息会被推到任务队列的末尾，等待下一次事件循环执行时被捕获和处理。
8. 阻塞问题由于JavaScript是单线程的，如果某个任务执行时间过长，会导致后续的任务无法及时执行。
JavaScript事件分析
18.2.8 鼠标事件onMouseOver
• 网页效果
18.2.9 鼠标移开事件onMouseOut
• 实例代码
18.2.9 鼠标移开事件onMouseOut
• 网页效果
18.3 其他常用事件
• 表18-2 其他常用事件
第18章 JavaScript事件分析
18.1 事件概述
18.2 主要事件分析 18.3 其他常用事件
18.4 习题
18.1 事件概述
JavaScript是一门脚本语言，也是一门基于面向 对象的编程语言，虽然没有专业面向对象编程 语言那样规范的类的继承、封装等，但有面向
对象的编程必须要有事件的驱动，才能执行程
序。
18.2 主要事件分析
• 表18-1 主要事件
18.2.1 鼠标单击事件onClick
易用性：
• JavaScript是一种脚本的编程语言，没有严格 的数据类型，同时是采用小段程序的编写方式 来实现编程的。
18.2.1 鼠标单击事件onClick
• 基本语法
• <input name="button" type="button" onclick="rec(this.form)" value="面积">
• 实例代码
18.2.5 装载事件onLoad
• 网页效果
18.2.6 卸载事件onUnload
• 实例代码
18.2.6 卸载事件onUnload
• 网页效果
18.2.7 失焦事件onBlur
• 实例代码
18.2.7 失焦事件onBlur
• 网页效果
18.2.8 鼠标事件onMouseOver
js事件循环机制的理解
js事件循环机制的理解
JavaScript事件循环机制是一种用于管理和调度事件处理的机制。
它基于单线程的特性，确保所有的任务都按照顺序执行，避免了线程竞争和数据同步的问题。
事件循环机制的核心是事件循环队列和任务队列。
事件循环队列用于存储待处理的事件，例如用户点击、鼠标移动等。
任务队列则用于存储需要异步执行的任务，例如定时器、网络请求等。
当代码执行时，会先执行同步任务，然后将异步任务添加到任务队列中。
当所有的同步任务执行完毕后，事件循环会检查任务队列，如果任务队列不为空，则会取出第一个任务并执行。
执行完毕后，事件循环会再次检查任务队列，以此类推，直到任务队列为空。
需要注意的是，事件循环机制采用了非阻塞的方式进行任务处理，这意味着当一个任务在执行时，不会阻塞后续任务的执行。
同时，任务队列的任务执行是基于优先级的，优先级高的任务会先执行。
另外，JavaScript事件循环机制还提供了微任务队列，用于存
储一些需要在下一个事件循环中执行的任务。
微任务队列的优先级比任务队列要高，在每个任务执行完毕后，事件循环会先处理微任务队列中的任务，然后再处理任务队列中的任务。
总结起来，JavaScript事件循环机制通过事件循环队列和任务
队列来管理和调度事件处理。
它的特点是单线程、非阻塞和基于优先级的任务处理方式。
对于开发者来说，理解事件循环机制可以帮助他们编写高效、响应迅速的JavaScript代码。
详述JS中的事件
JS事件的理解什么是事件？事件(Event)是JavaScript应用跳动的心脏，也是把所有东西粘在一起的胶水。
当我们与浏览器中Web 页面进行某些类型的交互时，事件就发生了。
事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键。
事件还可能是Web 浏览器中发生的事情，比如说某个Web 页面加载完成，或者是用户滚动窗口或改变窗口大小。
通过使用JavaScript ，你可以监听特定事件的发生，并规定让某些事件发生以对这些事件做出响应。
今天的事件在漫长的演变史，我们已经告别了内嵌式的事件处理方式（直接将事件处理器放在HTML 元素之内来使用）。
今天的事件，它已是DOM的重要组成部分，遗憾的是，IE继续保留它最早在IE4.0中实现的事件模型，以后的IE版本中也没有做太大的改变，这也就是说IE还是使用的是一种专有的事件模型（冒泡型）,而其它的主流浏览器直到DOM 级别3 规定定案后，才陆陆续续支持DOM标准的事件处理模型—捕获型与冒泡型。
历史原因是：W3C 规范在DOM 级别1中并没有定义任何的事件，直到发布于2000 年11 月的DOM 级别2 才定义了一小部分子集，DOM 级别2中已经提供了提供了一种更详细的更细致的方式以控制Web 页面中的事件，最后，完整的事件是在2004年DOM 级别3的规定中才最终定案。
因为IE4是1995推出的并已实现了自己的事件模型（冒泡型），当时根本就没有DOM标准，不过在以后的DOM标准规范过程中已经把IE的事件模型吸收到了其中。
目前除IE浏览器外，其它主流的Firefox, Opera,Safari都支持标准的DOM事件处理模型。
IE仍然使用自己专有的事件模型，即冒泡型，它事件模型的一部份被DOM标准采用，这点对于开发者来说也是有好处的，只有使用DOM标准，IE都共有的事件处理方式才能有效的跨浏览器。
DOM事件流DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素结点与根节点之间按特定的顺序传播，路径所经过的节点都会收到该事件，这个传播过程可称为DOM事件流。
浅谈JavaScript的事件（事件处理程序）
浅谈JavaScript的事件（事件处理程序） 事件就是⽤户或者浏览器⾃⾝执⾏的某种动作。
诸如click、load和mouseover，都是事件的名字。
⽽响应某个事件的函数就叫事件处理程序。
事件处理程序的名字以“on”开头，⽐如click事件的事件处理程序是onclick。
为事件指定事件处理程序的⽅式有多种⽅式。
HTML事件处理程序 元素⽀持的事件，都可以使⽤与相应事件处理程序同名的HTML特性来指定。
这个特性的值能⽀持⼀定的JavaScript代码。
例如，在单击按钮的时候执⾏⼀些JavaScript代码。
<div id="aa" onclick="console.log('div')" style="width: 100px;">2222</div> ，当单击这个div的时候，会在浏览器的控制台中输出div。
这个特性是通过JavaScript来实现的，不能在其中使⽤未经转义的HTML语法字符，例如和号（&）、双引号（""）、单引号（''）、⼩于号（<）或者⼤于号（>）。
在HTML中定义的事件处理程序可以包含要执⾏的具体动作，也可以调⽤定义在其他页⾯的脚本。
1function divClick(e){2var target=e.target;3 console.log("div");4//stopBubble(e);5 }<div id="aa" onclick="divClick(event);" style="width: 100px;">2222</div> 上⾯的代码中，点击div之后就会调⽤divClick函数。
这个函数是单独定义的script脚本中的，当然也可以定义在⼀个外部⽂件中。
JavaScript事件
JavaScript事件
事件是基于对象或面向对象语言中，执行程序的一种机制。
在一个事件中会存在事件源、事件处理者和事件触发者三个对象。
事件触发者触发了事件源，事件源就会给事件处理者发送一个执行信息，事件处理者获取信息后执行并将执行结果返回。
如单击一个按钮，显示一个对话框，其中鼠标为事件触发者，按钮为事件源，弹出对话框的程序为事件处理者。
在JavaScript事件机制中，通常以HTML标记作为事件源，如按钮、段落标记p等。
事件触发者可以是鼠标或键盘，事件处理者就是学习的JavaScript程序。
这也是前面提到的使用JavaScript的第三中方式。
JavaScript中常用的事件如表8-15所示：
上述表中，常用的事件有onClick、onChange和onLoad事件。
现在创建一个案例，演示JavaScript事件执行过程和原理。
打开记事本，输入下列代码：
</script>
<input type="button" onClick="winopen()" value="惠通科技公司" name="button">
将上述代码保存，名称为Event.html。
直接单击该网页，并在显示窗口中单击惠通科技公司，会显示如图8-6所示窗口：
图8-6 全屏显示窗口
在上述代码中，鼠标充当了事件触发者，按钮为事件源，JavaScript函数为事件处理者，在该函数中，主要使用Windows对象的open方法显示全屏窗口，其中方法moveTo用来设置显示窗口的坐标位置，resizeTo方法表示窗口的大小。
深入理解javaScript中事件驱动
深入理解javaScript中事件驱动
深入理解javaScript中事件驱动
javascript中的事件驱动是通过鼠标或热键的动作引发的. 主要事件如下：
1、鼠标单击事件 onclick
通常用于如下控件：
button 按钮对象
checkbox 复选框或检查列表 --配合onclick单击事件，通常用于全选效果
radio 单选按纽
reset 重置按钮
submit提交按钮
2、内容改变事件 onchange
通常用于
text 文本输入框 --配合onchange，可以达到注册检测的效果
textarea 文本域
3、选中事件 onselect --当text或textarea的内容被高亮显示后触发该事件
4、获得焦点事件 onFocus --当对象获得焦点时发生
5、失去焦点事件 onBlur --和获得焦点事件相对应！
6、文档载入事件onload --当文档被载入是触发事件。
通常也叫加载事件(加载运行) 一般用来设置cookie
7、卸载文档事件onunload --和加载文档事件对应。
当web页面退出时发生，通常更新cookie的值
8、鼠标右键菜单功能事件 oncontextmenu --可以屏蔽鼠标右键时使用。
JavaScript 事件流详解
JavaScript 事件流详解JavaScript 是一种非常强大的编程语言，在 Web 开发中扮演着不可或缺的角色。
其强大之处之一就是其拥有的丰富的事件模型，可以方便地进行各种交互操作。
本文将主要介绍 JavaScript 中的事件流，帮助读者更好地理解事件的传递机制和处理方式。
一、什么是事件流事件流就是描述事件在页面中传递的方式，从被触发的元素开始，经过父元素和所有祖先元素，直到 window 对象为止。
在这个传递的过程中，可以通过事件捕获和事件冒泡两种方式来进行处理。
事件捕获是从最顶层的元素开始，逐级向下传递，直到达到目标元素。
在这个过程中，可以通过指定捕获的阶段来处理相应事件。
事件冒泡是相反的过程，事件从目标元素开始，逐级向上传递，直到达到最顶层元素。
在这个过程中，可以通过指定冒泡的阶段来处理相应事件。
二、事件流的三个阶段事件流的传递过程可以分为三个阶段：捕获阶段、目标阶段和冒泡阶段。
1. 捕获阶段在捕获阶段，事件从最顶层的元素开始向下传递，直到达到目标元素。
在这个阶段中，可以通过指定捕获的阶段来处理事件。
例如，可以在此阶段中对事件进行预处理、拦截等操作。
2. 目标阶段在目标阶段，事件到达了目标元素。
在这个阶段中，可以通过处理事件来达到预期的效果。
3. 冒泡阶段在冒泡阶段，事件从目标元素开始向上传递，直到达到最顶层的元素。
在这个阶段中，可以通过指定冒泡的阶段来处理事件，例如可以对事件进行绑定、解绑等操作。
三、事件流的应用在实际开发中，事件流的应用非常广泛。
例如，在表单提交操作中，可以使用事件绑定来捕获用户提交表单的过程，以便进行数据校验、提交前确认等处理。
在页面的交互操作中，也可以使用事件冒泡机制来简化代码操作，比如使用事件代理来处理一组或一类元素上的事件。
另外，在事件处理过程中，需要注意一些细节问题。
如在事件处理程序中使用 this 关键字，this 的值会随着当前事件所发生的位置而发生变化。
通过代码实例跟我学JavaScript ——JavaScript事件编程(第1部分)
1.1通过代码实例跟我学JavaScript ——JavaScript事件编程（第1部分）1.1.1JavaScript事件编程1、HTML标签中的事件（1）什么是事件？事件可能是用户在页面中某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键，事件也还可能是Web 浏览器中发生的事情，比如说某个Web 页面加载完成，或者是用户滚动窗口或改变窗口大小、点击一个超链接等。
因此，用户对网页中的标签的一些特定“操作”（这些操作通常直接对应鼠标的动作）和系统的行为统称为事件。
（2）不同的标签有不同类型的事件在Macromedia Dreamweaver 工具中可以利用动态帮助获得某个HTML标签的事件定义，如下图所示。
（3）事件编程可以为不同的标签添加相关的事件响应的程序代码，称为事件编程从而可以监听特定事件的发生，并对相关的事件做出响应。
2、事件处理程序的引入——为某个标签绑定事件响应函数如何使一段JavaScript程序和事件发生联系？一般采用“on事件名”的方式对事件处理程序进行引入，同时它也是JavaScript规定的对应事件处理程序的句柄（Event Handler）的名字。
例如onClick、onFocus、onSubmit等等。
可以采用下面的方式来引入事件：（1）第一种引入方式事件处理程序的句柄名以属性名的形式在HTML文本中某些适当的标记中出现，而对应的属性值是由网页编写者提供的JavaScript程序段（或事件处理函数名），从而实现将HTML 标签与JavaScript语言相对应起来。
该方式适用于对事件处理程序的静态设置。
<input type="text" name="userAge" onChange="isNumberInput(this)">；（2）第二种引入方式将事件处理函数名赋给浏览器为网页创建的相应对象的对应属性，该方式适用于对事件处理程序的动态设置。
JavaScript事件处理常见问题解决知识点
JavaScript事件处理常见问题解决知识点JavaScript是一种广泛应用于Web开发的脚本语言，而事件处理是JavaScript中非常重要的一部分。
在使用JavaScript处理事件的过程中，我们可能会遇到一些常见的问题。
本文将介绍这些问题并提供解决知识点。
一、事件绑定问题1. 问题描述：如何将事件绑定到HTML元素上？解决知识点：可以使用addEventListener方法进行事件的绑定。
该方法接受三个参数：要绑定事件的元素、要绑定的事件类型和事件处理函数。
示例代码：```javascriptconst element = document.getElementById("myElement");element.addEventListener("click", function() {// 事件处理代码});```2. 问题描述：如何移除已绑定的事件？解决知识点：可以使用removeEventListener方法来移除已绑定的事件。
该方法的参数与addEventListener方法相同。
示例代码：```javascriptconst element = document.getElementById("myElement");const handleClick = function() {// 事件处理代码};element.addEventListener("click", handleClick);// 移除事件处理函数element.removeEventListener("click", handleClick);```二、事件对象问题1. 问题描述：如何获取触发事件的目标元素？解决知识点：事件处理函数的第一个参数即为事件对象，可以通过该对象的target属性获取触发事件的目标元素。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Company name WEB 前端开发技术HTML JavaScriptCSS WEB 前端开发技术第11章JavaScript 事件分析计算机科学与技术系Web前端开发技术主要内容计算机科学与技术系•掌握事件、事件类型的概念•掌握事件处理的机制•掌握事件名称与句柄的关系•学会编写各类的事件响应程序计算机科学与技术系Web前端开发技术11.1 事件编程事件编程:让用户不仅能够浏览页面中的内容，而且还可以和页面元素进行交互。
事件-事件是可以被JavaScript侦测到的行为(ACTION)。
事件源Window Form Mousekey事件单击事件双击事件事件句柄Onclickondblclick编写事件处理代码Web 前端开发技术事件驱动案例导入计算机科学与技术系<!--程序edu_11-1_js_event_1.html --><html><title>事件处理</title><head><script src="test.js"></script></head><body onload="show()"onunload="javascript:alert('关闭窗口');"> <p>你好！这是一个简单事件处理程序！</p> </body></html>计算机科学与技术系Web 前端开发技术11.1 事件编程（续）1.网页访问中常见的事件鼠标单击：例如单击button 、选中checkbo x 和radio 等元素；鼠标进入、悬浮或退出页面的某个热点：例如鼠标停在一个图片上方或者进入table 的范围；键盘按键：当按下按键或释放按键时；页面或图像载入：例如页面body 被加载时；在表单中选取输入框或改变输入框中文本的内容：例如选中或修改了文本框中的内容；确认表单：例如当准备提交表单的内容。
事件类型：1.鼠标事件2.键盘事件3.浏览器事件计算机科学与技术系2.主要事件句柄（event handler）<body>的开始标记中有一个属性叫做onload，对onload所赋的值就是show()函数。
onload属性就是我们所说的事件句柄。
格式：onload=“show();”事件句柄事件处理函数事件句柄：onabort、onblur 、onchange 、onclick 、ondblcl ick 、onabort、onerror、onkeydown、onkeypress、onkeyu p、onload、onmousedown、onmousemove、onmouseou计算机科学与技术系3. 指定事件处理程序的方法：3.1 直接在HTML标记中指定<标记... 事件="事件处理程序" [事件="事件处理程序" ...]语法说明：一个元素可以同时指定多个事件处理程序，事件处理程序既可以是<script>标记中的自定义函数，还可以直接将事件处理代码写在此位置。
<input type="button" onclick="createOrder()" v alue="发送教材选购单"><body onload="alert('网页读取完成！')" onunl oad="alert('再见！')">计算机科学与技术系3.2 编写特定对象的特定事件的中指定<script type=“text/javascript”for=“对象”event=“事件”> //事件处理程序代码</script><scripttype=“text/javascript”for=“window”event=“onload”>alert(“网页读取完成，欢迎光临！”);</script>计算机科学与技术系3.3 事件处理程序也在JavaScript中动态指定。
格式：<事件主角-对象>.<事件>=<事件处理程序>;“事件处理程序”是真正的代码，而不是字符串形式的代码。
<body><form name="myform" method="post" action="" ><input id="input" type="submit" name="mysubmit" value="提交" onclick="retur n clickHandler()"> </form><script type="text/javascript">function clickHandler(){ alert("即将提交表单！");return true; }myform.mysubmit.onclick();</script>人为代码触计算机科学与技术系事件处理程序的返回值在JavaScript中通常事件处理程序不需要有返回值，这时浏览器会按默认方式进行处理；很多情况下需要使用返回值，来判断事件处理程序是否正确进行处理。
返回值类型：boolean布尔型值浏览器下一步操作：返回值为true，进行默认操作；返回值为false，阻止浏览器的下一步操作。
使用方式：事件名="return 函数名（参数）"onclick="return clickHandler()"计算机科学与技术系Web 前端开发技术11. 2 表单事件Form 表单是网页设计是一种重要的和用户进行交互的工具，它用于采集用户输入各类信息。
表11-1 事件句柄和事件的对照事件分类事件句柄事件表单元素事件onchange 当元素改变时执行脚本onsubmit当表单被提交时执行脚本onreset 当表单被重置时执行脚本onselect 当元素被选取时执行脚本onblur 当元素失去焦点时执行脚本onfocus当元素获得焦点时执行脚本edu_11-4_js_form_event.html计算机科学与技术系Web 前端开发技术<body><form name="loginform" method="post" action="loginindex.html" onsubmit="return checklogin()"><fieldset><legend>用户登录</legend><br><br><label>用户名</label><input type="text" name="" id="myname"><br><br><label>密 码</label><input type="password" name="" id="mypwd"maxlength="8"><br><br><br><input type="submit" value="提交"><input type="reset"></fieldset></form></body>计算机科学与技术系<script type="text/javascript">function checklogin(){var username=document.getElementById("myname").value;var pwd=document.getElementById("mypwd").value;var checkright=true;if (username=="" || pwd=="")//两者中有一个为空{alert("请确认用户名和密码输入是否正确！！");checkright=false;}else{if (pwd.length<6){alert("请确认密码长度太短，至少5个字符！！");checkright=false; }}return checkright;}</script>计算机科学与技术系表11-2 事件句柄和事件的对照事件分类事件句柄事件鼠标事件onclick当鼠标被单击时执行脚本ondblclick当鼠标被双击时执行脚本onmousedown当鼠标按钮被按下时执行脚本onmousemove当鼠标指针移动时执行脚本onmouseout当鼠标指针移出某元素时执行脚本onmouseover当鼠标指针悬停于某元素之上时执行脚本onmouseup当鼠标按钮被松开时执行脚本edu_11-5_js_form_event.html计算机科学与技术系<script type="text/javascript">var obj= document.getElementById("mybody");function mover(){var obj= document.getElementById("mybody");obj.style.background="#99cc66";}function mout(){var obj= document.getElementById("mybody");obj.style.background="#ff33ff";}function mmove(){var obj= document.getElementById("mybody");obj.style.background="#0033ff";}function mdown(){form1.mtext.value="按下鼠标";}function mclick(){form1.mtext.value="单击鼠标";}function mdclick(){form1.mtext.value="双击鼠标";}计算机科学与技术系<body ><div id="mybody" onmouseOver="mover()"onMouseOut="mout()" onMouseMove="mmove()"onclick="mclick();" onmousedown="mdown()"ondblclick="mdclick();" ><h3 align="center">鼠标事件处理</h3><hr color="red" size="3"><form name="form1" method="post" action=""><input type="text" name="" id="mtext"></form></div></body>Web前端开发技术11.4 键盘事件计算机科学与技术系表11-11 事件句柄和事件的对照事件分类事件句柄事件键盘事件onkeydown当键盘被按下时执行脚本onkeypress当键盘被按下后又松开时执行脚本onkeyup当键盘被松开时执行脚本通过window的event对象的keyCode属性情来获取按键代码的值，其中：回车：13，0~9：48~57;Aa~Zz:65~90;使用方法：window.event.keyCode或event.keyCode。