下载文档原格式
javaScript事件执⾏顺序（学习记录）
javaScript事件执⾏顺序
想要理解事件执⾏顺序，就必须了解以下两件事
1.事件循环（不⽤看内容，知道名字就⾏）
JavaScript 语⾔的⼀⼤特点就是单线程。
所以同⼀时间只能做⼀件事，为了解决这个问题，Event Loop⽅案应运⽽⽣。
2.任务队列
根据规范，事件循环是通过任务队列的机制进⾏协调的的。
宏任务（macrotask）主要包括：script(整体代码)、setTimeout、setInterval、I/O、UI交互事件、postMessage、MessageChannel、setImmediate(Node.js 环境)。
微任务（microtask）主要包括：Promise.then、MutaionObserver、process.nextTick(Node.js 环境)。
执⾏顺序为：优先按顺序执⾏--先执⾏宏任务，同时遇到微任务将其放⼊微任务队列--第⼀圈宏任务执⾏完毕，紧接着执⾏微任务--执⾏完微任务，再紧接着执⾏微任务。
即按顺序循环执⾏：宏任务->微任务->宏任务->微任务
直到所有事件执⾏完毕。
练习题及相关资料。
js事件绑定的⼏种⽅式在JavaScript中，有三种常⽤的绑定事件的⽅法：在DOM元素中直接绑定；在JavaScript代码中绑定；绑定事件监听函数⼀. 在DOM元素中直接绑定这⾥的DOM元素，可以理解为HTML标签。
JavaScript⽀持在标签中直接绑定事件，语法为：onXXX="JavaScript Code"其中：onXXX 为事件名称。
例如，⿏标单击事件 onclick ，⿏标双击事件 ondouble，⿏标移⼊事件 onmouseover，⿏标移出事件 onmouseout 等。
JavaScript Code 为处理事件的JavaScript代码，⼀般是函数。
例如，单击⼀个按钮，弹出警告框的代码有如下两种写法。
1.原⽣函数<input onclick="alert('警告，不要乱点')" type="button" value="点我试试" />2.调⽤⾃定义函数<input onclick="attention()" type="button" value="点我试试22" /><script type="text/javascript">function attention(){alert("提⽰：这是⼀个警告提⽰");}</script>⼆. 在js代码中绑定在JavaScript代码中（即<script>标签内）绑定事件可以使JavaScript代码与HTML标签分离，⽂档结构清晰，便于管理和开发。
在JavaScript代码中绑定事件的语法为：elementObject.onXXX=function(){// 事件处理代码}其中：elementObject 为DOM对象，即DOM元素。
浅谈Javascript执⾏顺序Javascript是执⾏顺序是⾄上⽽下的，除⾮你特别说明, Javascript代码不会等到页⾯加载完毕后才执⾏。
⽐如⼀个⽹页⾥含有以下HTML代码：复制代码代码如下:<div id="ele">welcome to </div>如果你在这⾏HTML代码前，加⼊如下Javascript代码：复制代码代码如下:<script type="text/javascript">document.getElementById('ele').innerHTML= 'welcome to my blog';</script>运⾏该页⾯，你会得到这样的错误信息：“document.getElementById(‘ele') is null。
”原因是，当上⾯的javascript运⾏时，页⾯上还没有ID为‘ele'的DOM元素。
解决办法有两种：1. 把javascript代码放在HTML代码之后：复制代码代码如下:<div id="ele">welcome to </div><script type="text/javascript">document.getElementById('ele').innerHTML='welcome to my blog';</script>2. 等到在⽹页加载完毕后，运⾏该javascript代码。
你可以使⽤传统的解决办法（load）：⾸先加HTML的body加⼊“<body load="load()”>,”然后在load()函数⾥调⽤上述javascript代码。
这⾥要着重介绍的是⽤jQuery来实现：复制代码代码如下:<script>$(document).ready(function(){document.getElementById('ele').innerHTML= 'welcome to my blog';});</script>//当然,既然⽤到了jQuery,更简单的写法是：<script>$(document).ready(function(){$('#ele').html('welcome to my blog'); //这⾥也可⽤.text()⽅法});</script>你可以把上述jQuery代码放在页⾯的任何位置，它总是等到页⾯加载完毕后才执⾏。
JavaScript元素事件的绑定与解绑文章目录••oooo••oooo••oo绑定多个事件1. 对象.addEventListener(“事件类型”,事件处理函数,false)——谷歌和火狐支持,IE8不支持•参数1:事件的类型—事件的名字,没有on•参数2:事件处理函数—函数(命名函数,匿名函数)•参数3:布尔类型,指定事件处理函数的时期或阶段-------先写false•（第三个参数后文事件冒泡时候再说，链接：https:///weixin_45525272/article/details/10814202 9）为同一个元素绑定多个相同的事件--my$("btn").addEventListener("click",function () {console.log("你好啊");},false);my$("btn").addEventListener("click",function () {console.log("你好牛啊");},false);my$("btn").addEventListener("click",function () {console.log("你好牛逼啊");},false);my$("btn").addEventListener("click",function () {console.log("你是好牛逼啊");},false);2. 对象.attachEvent(“有on的事件类型”,事件处理函数)——谷歌不支持,火狐不支持,IE8支持•参数1:事件类型—事件名字，有on•参数2:事件处理函数—函数(命名函数,匿名函数)my$("btn").attachEvent("onclick",function () {console.log("小杨好帅哦1");});my$("btn").attachEvent("onclick",function () {console.log("小杨好帅哦2");});my$("btn").attachEvent("onclick",function () {console.log("小杨好帅哦3");// });3. 绑定事件兼容代码//为任意元素.绑定任意的事件, 任意的元素,事件的类型,事件处理函数function addEventListener(element,type,fn) {//判断浏览器是否支持这个方法if(element.addEventListener){element.addEventListener(type,fn,false);}else if(element.attachEvent){element.attachEvent("on"+type,fn);}else{element["on"+type]=fn;}}addEventListener(my$("btn"),"click",function () {console.log("你好啊");});addEventListener(my$("btn"),"click",function () {console.log("你好二啊");});addEventListener(my$("btn"),"click",function () {console.log("你好二虎啊");});4.两种方法的区别相同点: 都可以为元素绑定事件不同点:1.方法名不一样2.参数个数不一样3.addEventListener三个参数,4.attachEvent两个参数5.addEventListener 谷歌,火狐,IE11支持,IE8不支持6.attachEvent 谷歌火狐不支持,IE11不支持,IE8支持7.this不同,8.addEventListener 中的this是当前绑定事件的对象9.attachEvent中的this是window10.addEventListener中事件的类型(事件的名字)没有on11.attachEvent中的事件的类型(事件的名字)有on事件解绑注意:用什么方式绑定事件,就应该用对应的方式解绑事件1.对象.on事件名字=null// 1.绑定事件my$("btn").onclick=function () {console.log("我很好");};my$("btn2").onclick=function () {// 2.解绑事件my$("btn").onclick=null;};2. removeEventListener解绑事件对象.addEventListener(“没有on的事件类型”,命名函数,false);—绑定事件对象.removeEventListener(“没有on的事件类型”,函数名字,false);function f1() {console.log("第一个事件");}function f2() {console.log("第二个事件");}my$("btn").addEventListener("click",f1,false);my$("btn").addEventListener("click",f2,false);//点击第二个按钮把第一个按钮的第一个点击事件解绑my$("btn2").onclick=function () {//解绑事件的时候,需要在绑定事件的时候,使用命名函数my$("btn").removeEventListener("click",f1,false);};3. detachEvent解绑事件对象.attachEvent(“on事件类型”,命名函数);—绑定事件对象.detachEvent(“on事件类型”,函数名字);function f1() {console.log("第一个事件");}function f2() {console.log("第二个事件");}my$("btn").attachEvent("onclick",f1);my$("btn").attachEvent("onclick",f2);my$("btn2").onclick=function () {my$("btn").detachEvent("onclick",f1);};4. 解绑兼容性代码//绑定事件的兼容function addEventListener(element,type,fn) {if(element.addEventListener){element.addEventListener(type,fn,false);}else if(element.attachEvent){element.attachEvent("on"+type,fn);}else{element["on"+type]=fn;}}//解绑事件的兼容//为任意的一个元素,解绑对应的事件function removeEventListener(element,type,fnName) { if(element.removeEventListener){element.removeEventListener(type,fnName,false);}else if(element.detachEvent){element.detachEvent("on"+type,fnName);}else{element["on"+type]=null;}}案例：function f1() {console.log("第一个事件");}function f2() {console.log("第二个事件");}addEventListener(my$("btn1"),"click",f1);addEventListener(my$("btn1"),"click",f2);my$("btn2").onclick=function () {removeEventListener(my$("btn1"),"click",f1);};JavaScript switch加载多个事件common.jsfunction my$(id) {return document.getElementById(id);}//设置任意的标签中间的任意文本内容function setInnerT ext(element,text) {//判断浏览器是否支持这个属性if(typeof element.textContent =="undefined"){//不支持element.innerT ext=text;}else{//支持这个属性element.textContent=text;}}//获取任意标签中间的文本内容function getInnerT ext(element) {if(typeof element.textContent=="undefined"){return element.innerText;}else{return element.textContent;}}index.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>title</title></head><body><input type="button" value="小红帽" id="btn"/><script src="common.js"></script><script>//为同一个元素绑定多个不同的事件,指向相同的事件处理函数my$("btn").onclick = f1;my$("btn").onmouseover = f1;my$("btn").onmouseout = f1;function f1(e) {switch (e.type) {case "click":alert("好帅哦");break;case "mouseover":this.style.backgroundColor = "red";break;case "mouseout":this.style.backgroundColor = "green";break;}}// my$("btn").οnmοuseοver=function (e) {// console.log(e);// };</script></body></html>。
js事件on动态绑定数据,绑定多个事件的⽅法⼀.on('clcik')与$('').clcik()⽅法的区别：on('clcik')：事件委托机制// 在body元素上绑定click事件处理函数handler，如果这个click事件是由其后代的P元素触发的，就执⾏handler $(document.body).on("click", "p", handler);事件委托机制就是，我们不为每个P元素直接绑定click事件处理函数，⽽是委托给其某个公共的祖辈元素(此处⽰例中为document.body)，"告诉"他：如果接收到了click事件触发通知，并且这个click事件是由我们这些P元素其中之⼀触发的，就执⾏祖辈元素上委托绑定的事件处理函数。
注意："focus"、"blur"等部分事件不⽀持冒泡，使⽤事件委托机制将⽆效。
不过，他们⼀般也有对应的⽀持冒泡的事件。
例如与"focus"对应的"focusin"，与"blur"对应的"focusout"。
此外，我们也可以使⽤event.stopPropagation()⽅法，让当前触发的事件停⽌冒泡。
1.绑定多个事件，⽤空格隔开事件和命名空间如：“click”或“keydown.myPlugin”。
或者格式为on({"clcik": function(){},mouseover: function(){}})命名空间: namespace 名字{ 定义的数据；定义的函数；也可以是定义的类...}2.可以给动态元素和属性绑定事件clcik()不能为页⾯动态加载元素添加事件，事件只能为clcik⼆：on()的参数$().on(events,[seletor],[data],fn)或events-map,[seletor],[data]events:⼀个或多个⽤空格分隔的事件类型和可选的命名空间events-map:个⽤字符串表⽰的，⼀个或多个空格分隔的事件类型和可选的命名空间，值表⽰事件绑定的处理函数。
javaScript事件绑定、事件冒泡、事件捕获和事件执⾏顺序整理总结抽空学习了下javascript和jquery的事件设计，收获颇⼤，总结此贴，和⼤家分享。
(⼀)事件绑定的⼏种⽅式javascript给DOM绑定事件处理函数总的来说有2种⽅式：在html⽂档中绑定、在js代码中绑定。
下⾯的⽅式1、⽅式2属于在html中绑定事件，⽅式3、⽅式4和⽅式5属于在js代码中绑定事件，其中⽅法5是最推荐的做法。
⽅式1：HTML的DOM元素⽀持onclick、onblur等以on开头属性，我们可以直接在这些属性值中编写javascript代码。
当点击div的时候，下⾯的代码会弹出div的ID：<div id="outestA" onclick="var id = this.id;alert(id);return false;"></div>这种做法很显然不好，因为代码都是放在字符串⾥的，不能格式化和排版，当代码很多的时候很难看懂。
这⾥有⼀点值得说明：onclick属性中的this代表的是当前被点击的DOM对象，所以我们可以通过this.id获取DOM元素的id属性值。
⽅式2：当代码⽐较多的时候，我们可以在onclick等属性中指定函数名。
<script>function buttonHandler(thisDom){alert(this.id);//undefinedalert(thisDom.id);//outestAreturn false;}</script><div id="outestA" onclick="return buttonHandler(this);"></div>跟上⾯的做法相⽐，这种做法略好⼀些。
值得⼀提的是：事件处理函数中的this代表的是window对象，所以我们在onclick属性值中，通过this将dom对象作为参数传递。
事件绑定的执行次序在W3C的标准下，事件绑定使用的是addEventLisenter。
但微软这家伙经常不按常理出牌。
它提供的事件绑定方法是attachEvent。
关于attachEvent的种种不足，先不一一列举。
或许我们已经忍受着用attachEvent来绑定事件。
//object.attachEvent(event, function);el.attachEvent('onclick', method);但当在同一元素上绑定多次，你就会知道，微软的这个私人的方法又是多么“不可理喻”。
el.attachEvent("onclick", method1);el.attachEvent("onclick", method2);el.attachEvent("onclick", method3);el.attachEvent("onclick", method4);在各个IE下运行，点击el后，各个方法的执行次序是：IE6/IE7: method2 -> method4 -> method3 -> method1IE8: method4 -> method3 -> method2 -> method1IE9: method1 -> method2 -> method3 -> method4IE6/7是一种看不出规律的随机执行，IE8是逆序执行，IE9是顺序执行。
无论常识还是W3C标准，这种同一个事件绑定了多个方法的情况，方法的执行次序都应该是先绑定先执行。
从IE6－IE9的演变，可以看得出微软还是有在不断改进的。
但毕竟各个版本的IE存在，使得我们不得不注意绑定在同一事件上的多个方法之间不要有顺序依赖。
YUI2的事件绑定并没有对执行次序做兼容，如果有些场景的确需要绑定多个方法且方法间需要顺序执行。
js事件的绑定的三种⽅法/* 事件的绑定：三种⽅式* 1.对象.on事件名字=事件处理函数（如果是多个相同事件注册⽤这种⽅式，只执⾏最后⼀个）* my$("btn").onclick=function(){};* 2.对象.addEventListener("没有on的事件名字"，事件处理函数，false)* （如果是多个相同事件注册⽤这种⽅式，都会执⾏）⾕歌，⽕狐，IE11⽀持，IE8不⽀持* this是当前绑定事件的对象* 3.对象.attachEvent("有on的事件名字"，事件处理函数) IE8⽀持，但⾕歌⽕狐IE11不⽀持 this是window* *//*⽤什么⽅式绑定事件，就应该⽤对应的⽅式解绑事件* 1.对象.on事件名字=事件处理函数---->对象.on事件名字=null；* 2.对象.addEventListener("没有on的事件类型"，命名函数，false)--->对象.removeEventListener("没有on的事件类型"，命名函数，false) * 3.对象.attachEvent("有on的事件类型"，命名函数)--->对象.detachEvent(有on的事件类型"，命名函数)** *///为同⼀元素绑定多个事件：addEventListener("参数1",参数2,参数3) IE8不⽀持//参数1：事件的类型---事件的名字，没有on//参数2：事件处理函数---函数（命名函数，匿名函数）//参数3：布尔类型，默认是false（冒泡阶段执⾏）true(捕获阶段产⽣)//绑定事件的兼容代码function myaddEventListener(element,type,myfunction) { //传进来的参数type是不带on的//判断浏览器是否⽀持这个⽅法if(element.addEventListener){element.addEventListener(type,myfunction,false);}else if(element.attachEvent){element.attachEvent("on"+type,myfunction);}else {element["on"+type]=myfunction;}}//解绑事件的兼容代码function myremoveEventListener(element,type,functionName) {if(element.removeEventListener){element.removeEventListener(type,functionName,false);}else if(element.detachEvent){element.detachEvent("on"+type,functionName);}else {element["on"+type]=null;}}。
JavaScript事件处理机制JavaScript是一种强大的编程语言，具有广泛的应用领域。
在Web 开发中，JavaScript常常用于处理用户交互和页面事件。
本文将介绍JavaScript的事件处理机制，包括事件绑定、事件触发和事件传播。
一、事件绑定事件绑定是将特定的JavaScript代码与某个特定的事件相关联，当该事件发生时，绑定的代码将被执行。
常见的事件包括点击事件、鼠标移动事件和键盘按键事件等。
在JavaScript中，可以使用addEventListener()方法来绑定事件。
该方法接受三个参数：事件类型、事件处理函数和一个布尔值，用于指定事件的传播方式。
例如，以下代码绑定了一个点击事件：```document.getElementById("myButton").addEventListener("click", function(){// 处理点击事件的代码});```二、事件触发事件触发是指当特定事件发生时，相关的绑定代码将被执行。
JavaScript提供了多种方式来触发事件，常见的包括用户交互触发和程序触发。
1. 用户交互触发事件用户交互触发的事件是指由用户在页面上进行的操作所引发的事件。
例如，用户点击按钮、鼠标移动到某个元素上或键盘按键等。
当用户进行这些操作时，相关的绑定代码将被执行。
2. 程序触发事件除了用户交互触发事件，JavaScript还可以通过编程方式触发事件。
可以使用dispatchEvent()方法来实现程序触发事件。
例如，以下代码触发了一个自定义事件：```var myEvent = new Event("customEvent");document.getElementById("myElement").dispatchEvent(myEvent);```三、事件传播事件传播是指事件在DOM树中传递的过程。
Javascript事件触发顺序html标签是有⼦和⽗的，这个时候就出现了事件触发顺序的问题，⽐如：<!DOCTYPE html><html><head><style>.first{border:solid #FF0000}.second{border:solid #00FF00}.third{border:solid #0000FF}</style><script src="/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){$(".first").click(function(){alert(0);});$(".second").click(function(){alert(1);});$(".third").click(function(){alert(2);});});</script></head><body><div class="first">testFirst<div class="second">testSecond<div class="third">testThird</div></div></div></body></html>默认情况下，点third，三个事件都会触发，触发顺序为3,2,1.这种⽅式叫做冒泡触发。
⼀、使⽤javascript设置触发⽅式可以使⽤javascript:DOM.addEventListener()⽅法添加时设置element.addEventListener(event, function, useCapture);第三个参数为boolean，false的时候冒泡触发(默认值，从最下级的事件开始触发)，true的时候为捕获触发（从最上级元素的时间开始触发）。
