JavaScript事件简述

事件简述 技术一般水平有限，有什么错的地方，望大家指正。事件是我们平时经常使用，这次就来了解一下事件。首先我们要明确几个概念，JavaScript是单线程，浏览器是多线程的，并不是所有的事件处理函数都是异步的。前两个我们都知道，这里我们主要介绍第三个。事件处理函数可以在将来执行，只要满足触发条件就会执行事件处理函数。我们经常看到的一个场景，在循环中为一组元素绑定事件，弹出它在这组元素中的索引：<button>button1</button><button>button2</button><button>button3</button>$（function（）{var btns = $（"button"）;for（var i=0,il=btns.length;i<il;i++）{$（btns[i]）.click（function（）{console.log（i）;}）}}）上面的代码我们在点击的时候每一个都是打印3，并不能实现我们预期的目的，这是因为我们点击的时候i的值已经变成3，而事件处理函数的行为是打印i浏览器此时就会去查询i，然后找到i=3所以点击每一个按钮都会打印3，要实现我们预期的目的就需要用到闭包：$（function（）{var btns = $（"button"）;for（var i=0,il=btns.length;i<il;i++）{;（function（i）{$（btns[i]）.click（function（）{console.log（i）;}）}（i））}}）虽然每一个点击事件的处理函数仍然是打印i但是此时浏览器去查找i的时候会优先找到作为参数的i,而此时的i就是当前循环的i的值。普通的事件是同步执行的，看下面的一段代码：$（function（）{var btn = $（"#button"）;btn.on（"click",function（）{var span = $（"<span class="span">这是点击按钮创建的元素</span>"）;$（"body"）.append（span）;$（this）.off（"click"）;}）btn.trigger（"click"）;$（".span"）.css（"color","red"）;}）开始我一直以为$（".span"）.css（"color","red"）会先于点击事件的处理函数之前执行，后来发现自己是错的，trigger（"click"）触发之后就会去执行创建DOM的语句，之后才会执行改变颜色的语句。异步的事件处理函数 什么是异步呢？我们知道JavaScript是单线程的语言，而浏览器是它的执行环境（非Node.js），而浏览器是有多个线程来处理不同的工作的。我们的JS代码在编译完成之后，开始从上往下执行，如果执行到像setTimeout之类的这种异步函数就会把它的处理函数放在浏览器的消息队列中，当JS代码执行完之后，会通知消息队列，查看有没有需要执行的代码，如果有就执行。有一些事件处理函数是异步的包括window.onload或者JQ中的$（function（）{}）都是异步的，AJAX肯定是异步的这个是毋庸置疑的。window.onload = function（）{console.log（"onload"）}function handler（）{console.log（"handler"）;}handler（）;//先打印handler 后打印onload setTimeout和setInterval也是异步的：setTimeout（function（）{console.log（"setTimeout"）;},0）function handler（）{console.log（"handler"）;}handler（）;//先打印handler 后打印setTimeoutJavaScript权威指南（第6版） PDF中文版+英文版+源代码下载地址见 http://www.linuxidc.com/Linux/2013-10/91056.htm本文永久更新链接地址：http://www.linuxidc.com/Linux/2016-10/136291.htm