JS事件event讲解

作者 : 开心源码 本文共2621个字,预计阅读时间需要7分钟 发布时间: 2022-05-11 共45人阅读

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(不推荐)

//方式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. 结束。

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » JS事件event讲解

发表回复