前言
事件在前端扮演了非常重要的角色，在浏览器端，它承担了用户交互的很大一部分工作，在服务器端，它充当了一个任务调度者的角色，使得js在单线程的环境下毫不逊色其他语言。
类型
- 浏览器事件
1.浏览器事件是如何发生的？
答：有两种主要方式发生：冒泡和捕获。
1.1 若事件是从根节点开始，逐级派送到子节点，自上而下的过程，这个阶段称为“捕获阶段(Capture)”；
1.2 若事件是由子节点往根节点派送，自下而上的过程，这个阶段称为“冒泡阶段(Bubble)”。
1.3 一般浏览器是先捕获再处理再冒泡。
1.4 可以手动设置一个事件的发生方式是冒泡还是捕获模式，IE不支持设置捕获模式。
2.事件委托是怎么回事？
答：考虑性能的情况下，父元素代理子元素的所有事件,根据不同子元素触发不同的逻辑。
举个例子：一个ui元素下有一万个li元素，总不能每个li元素都绑定一个事件吧，把触发逻辑的控制权交给ui元素，那就轻松多了。
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
const ul = document.querySelector("ul")
ul.addEventListener("click", delegate)
function delegate(event) {
console.dir(event.target)
switch(event.target.textContent){
case "1":
alert("第一个li元素")
break
case "2":
alert("第二个li元素")
break
case "3":
alert("第三个li元素")
break
default:
alert("其他li元素")
}
}
</script>
</body>
- node事件
1.为什么说Node是事件驱动的？
答：因为Node的API大部分都建立在回调基础上，而这个回调函数就是Node事件驱动的具体表现。举个例子：fs.readFile函数的参数中必须有一个是回调函数,这个函数在读文件的时候，操作系统会类似浏览器中监听到了一个“读文件”事件，然后调用相应的回调。
2.事件循环是怎么回事？
答：Node官网提供了一副图来解释：
┌───────────────────────┐
┌─>│ timers │
│ └──────────┬────────────┘
│ ┌──────────┴────────────┐
│ │ I/O callbacks │
│ └──────────┬────────────┘
│ ┌──────────┴────────────┐
│ │ idle, prepare │
│ └──────────┬────────────┘ ┌───────────────┐
│ ┌──────────┴────────────┐ │ incoming: │
│ │ poll │<─────┤ connections, │
│ └──────────┬────────────┘ │ data, etc. │
│ ┌──────────┴────────────┐ └───────────────
│ │ check │
│ └──────────┬────────────
│ ┌──────────┴────────────┐
└──┤ close callbacks │
└───────────────────────┘
由于JS是单线程的，Node巧妙地把原本多线程的任务转移给操作系统去做了，简而言之就是Node将适当的回调添加到轮询队列中去，然后经过定时器、I/O回调、poll(调查)、check(检查)、关闭回调循环执行任务，故这个过程又叫事件循环。它是永远不会阻塞的。
详情可以参考阮一峰先生的JavaScript 运行机制详解：再谈Event Loop
- 自定义事件
1.浏览器自定义事件
使用Event()构造
var event = new Event('build');
// 监听事件
elem.addEventListener('build', function (e) { ... }, false);
// 触发事件
elem.dispatchEvent(event);
2.Node端自定义事件
使用EventEmiter模块
const EventEmitter = require('events');
class MyEmitter extends EventEmitter {}
const myEmitter = new MyEmitter();
myEmitter.on('event', () => {
console.log('an event occurred!');
});
myEmitter.emit('event');
使用
1.监听和取消监听事件
// js文件中
elem.addEventListener('click', function(){...});
// HTML文件中
<button onclick="func()">
//老式js写法
elem.onclick = function(event){}};
2.阻止事件
写在事件触发的回调函数里
//取消事件但不阻止传播
event.preventDefault();
//阻止事件传播
event.stopPropagation();
3.常见事件种类
3.1 键鼠事件
key-mouse
keydown：按下任意按键
keypress：除 Shift, Fn, CapsLock 外任意键被按住. (连续触发)
keyup：释放任意按键
mousedown：在元素上按下任意鼠标按钮
mouseup：在元素上释放任意鼠标按键
click：在元素上按下并释放任意鼠标按键
dblclick：在元素上双击鼠标按钮
contextmenu：右键点击 (右键菜单显示前).
wheel：滚轮向任意方向滚动
mouseenter：指针移到有事件监听的元素内
mouseover：指针移到有事件监听的元素或者它的子元素内
mousemove：指针在元素内移动时持续触发
mouseleave：指针移出元素范围外（不冒泡）
mouseout：指针移出元素，或者移到它的子元素上
3.2 拖拽事件
drag
dragenter：被拖动的元素或文本选区移入有效释放目标区
dragstart：用户开始拖动HTML元素或选中的文本
dragend：拖放操作结束 （松开鼠标按钮或按下Esc键）
dragover：被拖动的元素或文本选区正在有效释放目标上被拖动 （在此过程中持续触发，每350ms触发一次）
dragleave：被拖动的元素或文本选区移出有效释放目标区
drag：正在拖动元素或文本选区（在此过程中持续触发，每350ms触发一次）
drop：元素在有效释放目标区上释放
3.3 node事件
文件模块的读写相关事件、HTTP模块相关事件等等
3.4 其他事件
如资源事件(load/error等)、网络事件(online)、焦点事件(focus)、会话历史事件(pageshow/popstate)、
CSS 动画事件（animationstart）、表单事件（submit）、视图事件（resize/scroll）、媒体事件（play/pause）、进度事件（load）、值变化事件（input/ValueChange）等等
事件的未来
当多个事件出现在代码里的时候，逻辑变得不是那么清晰，这个时候把事件转化成流来处理就非常方便了，具体可以参考RXJS对事件的处理。
总结
编写前端代码，离不开处理事件，原生js提供了我们监听事件并执行回调函数的功能(包括node),主流框架也都封装了事件的相关API，用来实现更强大的功能，比如vue和NG用事件来传递子->父组件的数据，总之，对事件的理解以及如何去利用事件完成需求，我认为，是一个前端工程师的核心技能之一。
网友评论