香港高速VIP云机房火爆上线啦!无需备案,开通即用!配套《巅云自助建站系统3.0》将带给您飞一般的可视化拖拽建站体验,欢迎免费体验。

建站专题

JS事件event讲解

一佰互联网站开发设计(www.yinxi.net) 发布日期 2019-03-30 11:54:54 浏览数: 19

简介:引言今天的直播课老师会通过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。
TAG标签: JS事件event讲解  
一佰互联是全国知名建站品牌服务商,我们有九年网站建设、网站制作、网页设计、php开发和域名注册及虚拟主机服务经验,提供的自助建站服务更是全国有名。近年来还整合团队优势自主开发了可视化多用户”巅云建站系统“3.0平台版,拖拽排版网站制作设计,轻松实现pc站、手机微网站、小程序、APP一体化全网营销网站建设 ,已成功的为全国上百家网络公司提供自助建站平台搭建服务。

相关新闻more

20
04月
HTML5新特性之type=file文件上传

1、语法<input name="myFile" type="file">2、属性(以下... >>详情

27
04月
使用PHP如何实现高效安全的ftp服务器(二

在上篇文章给大家介绍了使用PHP如何实现高效安全的ftp服务器(一),感兴趣的朋友可以点击了解详情。接下来通过本篇文章给大家介绍使用PHP如... >>详情

26
03月
AI产品经理必懂算法:决策树

简介:决策树(Decision Tree)是一种以树形数据结构来展示决策规则和分类结果的模型,它是将看似无序、杂乱的已知实例,通过某种技术手... >>详情

14
04月
电商含恨十大死法,你中枪了吗?

09月08日报道:有相关报道说淘宝目前只有3%的店铺能够盈利,其余97%的店铺基本上都成了炮灰。这是一个非常可怕的数字,都说不赚钱的电商是犯... >>详情

营业执照. cdn加速服务 备案系统认证 网络安全协会 我们的支付方式AAA认证
上海 北京 深圳 广州 天津 杭州 南京 武汉 成都 沈阳 大连 长沙 济南 青岛 苏州 福州 无锡 哈尔滨 宁波 重庆 大庆 厦门 西安 长春 珠海 郑州 海口 昆明 太原 石家庄 温州 合肥 乌鲁木齐 南宁 南通 合肥 兰州 呼和浩特 贵阳 烟台 秦皇岛 包头 唐山 银川 汕头 连云港 威海 西宁 湛江 北海 万州 涪陵 长寿 黔江 永川 丰都 忠县 江津 南川 开县 云阳 万盛 梁平 垫江 巫山 城口 建站宝盒 免费建站 门户网站建设 微信网站 手机网站 门户网站制作

7x24小时服务电话:18581389571 传真:023-85725751 免费建站交流群:236412099 139947842(自助建站交流) E-Mail:post@yinxi.net 网站投诉:
重庆楚捷科技有限公司 一佰互联©版权所有 自助建站(www.yinxi.net,Inc.) 2001-2020 All Rights Reserved 本站程序受法律保护,网站法律顾问:ITLAW-庄毅雄律师
中华人民共和国信息产业部网站备案号:渝ICP备12000592号