引言

今天的直播课老师会通过js的事件机制来模仿淘宝注册页面表单验证效果，实现效果如下：

怎样样，感兴趣的小伙伴抓紧入群了，获取直播通知，观看直播。

下面给大家总结了下js中的事件讲解。

事件流

多个彼此嵌套的元素，他们拥有相同的时间，最内部事件被触发后，外边多个元素的同类型时间会被触发，多个元素他们同类型时间同时执行的效果称为”事件流”

注意：在addEventListener或者者removeEventListener中最后一个参数假如为false（冒泡型，从内而外），为true（捕捉型，从外而内）

事件对象

事件对象，每个事件(包括鼠标，键盘事件)触发执行的过程中，都有对应的事件对象，通过事件对象能取得鼠标相对页面的坐标信息，什么键子被触发执行，通过事件对象还能阻止事件流产生，阻止浏览器默认动作。

1.取得事件对象

公告触发方法时参数evt，evt就是事件对象

2.获取鼠标的坐标信息

event.clientX/clientY （相对dom的坐标）

event.pageX/pageY （考虑滚动条）

event.screenX/screenY （相对屏幕坐标）

3.阻止事件流

event.stopPropagetion() //主流浏览器

event.cancelBubble = true //IE浏览器冒泡型、捕捉型都能进行阻止

4.阻止浏览器默认动作

事件对象.preventDefault() //主流浏览器

事件对象.returnValue=false //IE浏览器return false //dom1级事件设置

5.获取被触发键盘键子信息

event.keyCode 取得键盘对应的键值码信息，返回的为ASC码

加载事件 onload

JS代码执行时假如涉及到html或者者css时，需要让html和css执行后，在执行js代码，但通过加载事件能实现JS代码写在html和css代码之前

具体设置：

//方式1（不推荐）

//方式2//在js中书写

window.load=加载函数();

javascript事件绑定

事件绑定就是给目标（DOM元素）绑定触发事件（如click）、触发事件产生的结果（fn）以及事件获取方式（useCapture）。事件绑定分为普通事件绑定、事件监听和事件委托；

1.普通事件绑定之html属性绑定

2.普通事件绑定之javascript绑定

同一个触发事件只会触发最后一个事件，前面的被覆盖掉了，2比1的优点是，实现结构和行为分离，利于代码的管理和维护

事件监听

优点：

1）能绑定多个事件

2）能移出事件;如：oBtn.removeEventListener(“click”,aaa);

3 ) addEventListener(“事件”,fn,useCapture);

这种写法有4个要注意的地方：

1. 事件带on并且加引号（”click”）；

2. fn不加括号，加括号等于调使用了fn；

3. useCapture的意思为捕获，但是默认为冒泡（false），能省略不写

4. 不兼容IE8以下

兼容写法：attachEvent(“on+事件”,fn);

经过测试，attachEvent兼容了IE6，但是事件执行的顺序是相反的，IE7不兼容attachEvent，这里有可可以是这个IE兼容测试器出问题了，否则这个写法不兼容IE7。

IE的绑定事件 attachEvent(“on事件”,listener)

绑定事件 addEventListener(“事件”,listener,useCapture)

两个监听事件的区别：

事件有无on,有无true/false,事件执行顺序相反

this指向的问题:在IE6-9之间都存在一个问题就是this指向的是window

事件委托

利使用冒泡，把事件加到父元素或者祖先元素上

优点：

1）提高JavaScript性可以。事件委托能明显的提高事件的解决速度，减少内存的占使用。

2）动态的增加DOM元素，不需要由于元素的改动而修改事件绑定。

3）兼容到IE6，但是IE7，IE8还是没反应。

js事件循环机制

事件循环机制呢，简单点来说，就是在执行上下文的过程中，对函数的入栈和出栈。执行前函数先入栈，执行完后函数出栈。如若遇到了少量异步操作像回调函数以及ajax、setTimeout等，会先将他们交给浏览器的其余板块去执行，执行完后，会把回调函数放入到taskqueue中。当所有的call stack执行完后再开始执行task queue中的函数。

举一个简单的例子：

我们来看一下执行的内部过程

1. 执行第一句，放入call stack中，输出 1

2. 第一句出栈，执行第二句，因为是异步执行，交给其余板块。

3. 执行完后，将回调函数放入taskqueue中 。

4. 执行下一句，同第一步一样，将语句入栈并执行，输出3 。

5. 语句出栈，此时call stack空了。开始执行task queue任务，输出2 。

所以，输出结果是 ：

进阶

假如增加了Promise又如何工作呢？

我们知道，Promise的回调函数不是传入的，而是用then来调使用的。因而，Promise中定义的函数应该是马上执行的，then才是其回调函数，放入queue队列中。

还提到了一个重要的概念：

macro-task包括：script(整体代码), setTimeout, setInterval, setImmediate, I/O, UI rendering。

micro-task包括：process.nextTick, Promises, Object.observe, MutationObserver

执行顺序：函数调使用栈清空只剩全局执行上下文，而后开始执行所有的micro-task。当所有可执行的micro-task执行完毕之后。循环再次执行macro-task中的一个任务队列，执行完之后再执行所有的micro-task，就这样一直循环。

执行过程：

1. 遇到setTimeout，交给其余板块执行，执行完后回调放入macro-task中

2. 遇到Promise，立即执行里面的function，输出1。

3. 循环开始，遇到resolve()，修改Promise状态为fulfill。继续执行，输出2。

4. 遇到then，将回调放入micro-task中。

5. 继续执行，输出3。

6. call stack执行完毕了。开始执行micro-task中的回调函数，输出5。

7. micro-task执行完毕，开始执行macro-task中的回调函数，输出4。

8. 结束。