JavaScript异步编程之事件
DOM0
html标签中的写法
<image id="element" src="hello.png" onclick="alert('Hi')"/>
复制代码
在JS中的绑定方法:
var element = document.getElementById("element");
element.onclick = function(e) {}
复制代码
dom0是节点元素的私有属性。同一个事件只能绑定一个,绑定多个,只有最后一个有效。直接写在html节点上的也会被覆盖。如下面的代码,最后点击触发的时候只会打印3。
var element = document.getElementById("element");
element.onclick = function(e) {console.log(1)};
element.onclick = function(e) {console.log(2)};
element.onclick = function(e) {console.log(3)};
复制代码
所以,在使用如window.onload
之类的事件的时候就需要注意了。
DOM1
有标准,不涉及实践。
DOM2
addEventListener
方法在节点对象的原型链上。绑定实名函数更好,因为可以移除。第三个参数用于选择在什么阶段触发,默认false表示在冒泡阶段触发。
element.addEventListener('change',function(){},false)
复制代码
与DOM0的相比,DOM2事件可以绑定多个,如下,1和2都会被打印:
element.addEventListener('change', function() {console.log(1)}, false);
element.addEventListener('change', function() {console.log(2)}, false);
复制代码
可是,在绑定实名函数的时候,如果事件、函数名和触发阶段完全相同的话,最终也是只有最后一个有效,如下,最终事件触发的时候只会打印出一个1:
function fn() {console.log(1)};
element.addEventListener('change', fn, false);
element.addEventListener('change', fn, false);
复制代码
此外,addEventListener
还可以绑定DOM0中没有的事件,如DOMContentLoaded。
DOM3
与DOM2的区别在于事件的种类,其他的一样。如keyup
、keydown
、keypress
都是DOM3的事件,click
也是DOM3级事件,具体到MDN中搜索DOM L3
。
事件流
简要的说就是事件的三个阶段:捕获阶段--目标阶段--冒泡阶段。详细说就是如下图。
当用户点击浏览器窗口,事件发生,捕获阶段开始:window--document--html--body--父节点--目标节点(目标阶段),然后开始冒泡阶段:目标节点--父节点--body--html--document--window。
几个需要注意的api:
preventDefault的作用是阻止浏览器默认行为,什么是默认行为?除了你自己绑定的操作之外的行为都是浏览器的默认行为,如a标签的跳转,表单的提交,鼠标右键呼出菜单等等。
此外event.returnValue = false;
、return false;
也可以达到跟proventDefault
同样的效果。如果是a标签,阻止跳转,可以href="javascript:;"
或href=javascript:void 0;
stopPropagation的作用是阻止事件的传播。阻止的是其他节点上的事件。
stopImmediatePropagation的作用也是阻止事件的传播。它不但能阻止其他节点上的事件,当前节点上的其他未触发的事件也会一并阻止。如下代码,只打印1:
element.addEventListener('click', function(event) { event.stopImmdiatePropagation();console.log(1);
}, false);
element.addEventListener('click', function() {console.log(2)}, false);
复制代码
currentTarget,当前会执行的回调函数绑定的那个节点。
elementFirst.addEventListener('click', function(event) {console.log(event.currentTarget); // elementFirst
}, false);
elementSecond.addEventListener('click', function(event) {console.log(event.currentTarget); // elementSecond
}, false);
复制代码
target,就是事件流中的目标阶段的那个节点,也就是目标节点。需要注意的是,事件是否发生与是否绑定的操作没有关系,即便没有在一个节点上绑定事件的操作,事件依然会发生。target
可以在事件委托中使用。
自定义事件
var myEvent = new Event('theEvent');
theTarget.addEventlistener('theEvent', function() {doSomething()})
theTarget.dispatchEvent(myEvent); // theTarget是一个节点,或者说是一个可以调用addEventListener方法的对象。
复制代码
此外customEvent
做到跟Event
同样的效果,他们的区别在于,customEvent
可以加一些自己需要的数据进去,不过兼容性没有Event
好。
用Event
创建了实例之后,也可以用myEvent.data = {}
的方式给数据,效果是一样的。
这有什么用?可以用来做全局范围内的广播,使模块间解耦。在vue中有一个用于组件间通讯的EventBus,自定义事件就可以用来实现这一功能。
事件委托和代理
事件委托就是把本来应该由你来做的事情,让别人帮忙做一下。
在实际编程中,可能会出现这样的场景,一个节点下有多个子节点,每个子节点都要有相应的事件绑定,这个时候我们就可以利用事件的冒泡,把事件绑定在父节点上,然后用event.target
来区分到底是哪个子节点触发的事件。当这些子节点需要动态增减的时候,使用事件委托就显得尤为方便了,无论是写代码的效率还是程序运行的效率都会更高。
局限性:focus、blur这样的事件没有在冒泡机制,无法委托。另外一些消耗较高的事件如mousemove和mouseout也不适合委托。如下图
如果我们把B区域的mousemove事件委托到A区域,当事件在A区域发生的时候,对应的操作也会执行,如果是消耗较低的事件,就不会有太大的影响,可如果是消耗较高的事件,就会显得有点浪费了。
观察者模式与发布订阅模式
这两种设计模式与事件非常的类似。与事件的区别在于,事件是异步的,而我们自己实现的这两种模式,虽然使用了回调函数,但大都是同步的。而这两种设计模式之间的区别在于,发布订阅模式的事件池是统一的,观察者模式的事件池分散在各个发布者上面。
JavaScript异步编程之事件相关推荐
- JavaScript异步编程【上】 -- 同步和异步、事件循环(EventLoop)、微任务和宏任务、回调函数
文章内容输出来源:拉勾教育 大前端高薪训练营 前言 在我们学习JavaScript中,我们知道,JavaScript的执行环境是单线程的.所谓单线程是指一次只能完成一个任务,如果有多个任务,就必须排队 ...
- 写给初学者的JavaScript异步编程和背后思想
导读: 对于接触JavaScript这门编程语言没有多久的本菜鸡而言,在相当长的一段时间内,我都完全无法理解这门语言中的异步编程,不明白什么叫异步编程以及为什么需要异步编程.为什么顺序执行程序就不行了 ...
- Javascript异步编程之一异步原理
本系列的例子主要针对node.js环境,但浏览器端的原理应该也是类似的. 本人也是Javascript新手,把自己这段时间学习积累的要点总结下来,希望可以对同样在学习Javascript/node.j ...
- 网页javascript加载不出_写给初学者的JavaScript异步编程和背后思想
导读:对于接触JavaScript这门编程语言没有多久的本菜鸡而言,在相当长的一段时间内,我都完全无法理解这门语言中的异步编程,不明白什么叫异步编程以及为什么需要异步编程.为什么顺序执行程序就不行了呢 ...
- JavaScript异步编程原理
众所周知,JavaScript 的执行环境是单线程的,所谓的单线程就是一次只能完成一个任务,其任务的调度方式就是排队,这就和火车站洗手间门口的等待一样,前面的那个人没有搞定,你就只能站在后面排队等着. ...
- 【学习笔记】Part1·JavaScript·深度剖析-函数式编程与 JS 异步编程、手写 Promise(二、JavaScript 异步编程)
[学习笔记]Part1·JavaScript·深度剖析-函数式编程与 JS 异步编程.手写 Promise(课前准备) [学习笔记]Part1·JavaScript·深度剖析-函数式编程与 JS 异步 ...
- JavaScript异步编程
JavaScript异步编程 一.概述 1.单线程模型 2.同步任务和异步任务 3.任务队列和事件循环 4.异步操作的模式 回调函数 事件监听 发布/订阅 5.异步操作的流程控制 串行执行 并行执行 ...
- 前端JavaScript 异步编程详解
目录 菜鸟教程官网 JavaScript 异步编程 异步的概念 详图 什么时候用异步编程 回调函数 概念 例如: 最后 菜鸟教程官网 地址 JavaScript 异步编程 异步的概念 异步(Async ...
- JavaScript异步编程的原理
1 想说的话 JavaScript异步编程是前端面试中一个重要内容.为了加深我对此部分内容的印象,故写此博客,主要介绍JS异步编程的运行原理. pre 栈队列 2 正文 本文主要是阐述下面这张图的内容 ...
最新文章
- Grounded Theory and Coding Lecture Notes
- java web右键菜单,win7右键菜单管理
- v-on 事件监听器
- 时序轮转的意思_天地是景框时序轮转的风景----(傻女人)
- Java按行分割文件
- 使用static代码块实现线程安全的单例设计模式
- 线段树专辑—— pku 3468 A Simple Problem with Integers
- 解密阿里线上问题诊断工具Arthas和jvm-sandbox
- android,[游戏] 美女擦玻璃游戏源码
- JAVA基础语法:java编程规范和常用数据类型
- C#修改内存制作外挂
- v-charts使用-实例
- 榆熙电商:为什么“砍价免费拿”是拼多多主推的一个营销项目?
- CSDN周刊:Facebook 发币 Libra;谷歌十亿美金为穷人造房;第四代树莓派 Raspberry Pi 4 发布
- Linux各目录的作用
- mysql数据库insert 插入语句示例
- js 色卡 (javascript 色卡 hsv 色卡 hsb 色卡)
- Navicat 8.0 for MySQL的注册码
- Grin带火的MinbleWimble技术,到底是个什么鬼?
- 模拟电磁曲射炮_H题 方案分析【2019年电赛】【刘新宇qq522414928】
热门文章
- C++之try,throw,catch探究
- windows server 2008 安装linux,使用WSL在Windows Server 2019上运行Linux的方法
- java ajax json 乱码_java+ajax加载中文json串后出现乱码问题的解决办法
- html 格式化 vim,代码格式化插件
- 午睡太久为什么浑身无力
- 服务器gsql密码修改,gsql远程登录
- 请求url处理java_【脚本写作】Java: HttpURLConnection请求处理
- endnote无法同步原因_endnote不能同步(endnote retrieving references)的解决方法
- 微型计算机电路基础第四版逻辑门,数字逻辑的电路基础——逻辑门.PDF
- 哥德巴赫猜想用计算机证明,用计算机证明有限数哥德巴赫猜想成立:运行结果...