JS事件event讲解
author:一佰互联 2019-03-30   click:202

简介:引言今天的直播课老师会通过js的事件机制来模仿淘宝注册页面表单验证效果,实现效果如下:怎么样,感兴趣的小伙伴抓紧入群了,获取直播通知,观看直播。下面给大家总结了下js中的事件讲解。事件流多个彼此嵌套的元素 ...

JS事件event讲解

引言

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

JS事件event讲解

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

JS事件event讲解

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

事件流

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

JS事件event讲解

注意:在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(不推荐) <body onload=“加载函数()”> //方式2//在js中书写 window.load=加载函数();

javascript事件绑定

事件绑定就是给目标(DOM元素)绑定触发事件(如click)、触发事件产生的结果(fn)以及事件获取方式(useCapture)。事件绑定分为普通事件绑定、事件监听和事件委托; 1.普通事件绑定之html属性绑定

JS事件event讲解

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

JS事件event讲解

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

事件监听

JS事件event讲解

优点: 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

事件委托

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

JS事件event讲解

优点:1)提高JavaScript性能。事件委托可以显著的提高事件的处理速度,减少内存的占用。2)动态的添加DOM元素,不需要因为元素的改动而修改事件绑定。3)兼容到IE6,但是IE7,IE8还是没反应。

js事件循环机制

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

JS事件event讲解

我们来看一下执行的内部过程 1. 执行第一句,放入call stack中,输出 1 2. 第一句出栈,执行第二句,由于是异步执行,交给其他模块。 3. 执行完后,将回调函数放入taskqueue中 。4. 执行下一句,同第一步一样,将语句入栈并执行,输出3 。5. 语句出栈,此时call stack空了。开始执行task queue任务,输出2 。所以,输出结果是 :

JS事件event讲解

进阶如果添加了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,就这样一直循环。

JS事件event讲解

执行过程: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. 结束。本文仅代表作者个人观点,不代表巅云官方发声,对观点有疑义请先联系作者本人进行修改,若内容非法请联系平台管理员,邮箱2522407257@qq.com。更多相关资讯,请到巅云www.yinxi.net学习互联网营销技术请到巅云建站www.yx10011.com。