（本文摘录于阮一峰老师所写文章，https://wangdoc.com/javascript/basic/index.html，作个人学习使用。）
1、EventTarget.addEventListener是推荐的指定监听函数的方法。它有如下优点：
同一个事件可以添加多个监听函数。
能够指定在哪个阶段（捕获阶段还是冒泡阶段）触发监听函数。
除了 DOM 节点，其他对象（比如window、XMLHttpRequest等）也有这个接口，它等于是整个 JavaScript 统一的监听函数接口。
2、事件的传播：
一个事件发生后，会在子元素和父元素之间传播（propagation）。这种传播分成三个阶段。
第一阶段：从window对象传导到目标节点（上层传到底层），称为“捕获阶段”（capture phase）。
第二阶段：在目标节点上触发，称为“目标阶段”（target phase）。
第三阶段：从目标节点传导回window对象（从底层传回上层），称为“冒泡阶段”（bubbling phase）。
这种三阶段的传播模型，使得同一个事件会在多个节点上触发。
注意，浏览器总是假定click事件的目标节点，就是点击位置嵌套最深的那个节点。
事件传播的最上层对象是window，接着依次是document，html（document.documentElement）和body（document.body）。也就是说，上例的事件传播顺序，在捕获阶段依次为window、document、html、body、div、p，在冒泡阶段依次为p、div、body、html、document、window。
4、由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理（delegation）。
5、事件发生以后，会产生一个事件对象，作为参数传给监听函数。浏览器原生提供一个Event对象，所有的事件都是这个对象的实例，或者说继承了Event.prototype对象。
Event对象本身就是一个构造函数，可以用来生成新的实例。
event = new Event(type, options);
第一个参数type是字符串，表示事件的名称；第二个参数options是一个对象，表示事件对象的配置。该对象主要有下面两个属性。
bubbles：布尔值，可选，默认为false，表示事件对象是否冒泡。
cancelable：布尔值，可选，默认为false，表示事件是否可以被取消，即能否用Event.preventDefault()取消这个事件。一旦事件被取消，就好像从来没有发生过，不会触发浏览器对该事件的默认行为。
注意，如果不是显式指定bubbles属性为true，生成的事件就只能在“捕获阶段”触发监听函数。
6、表单事件：
input事件的一个特点，就是会连续触发，比如用户每按下一次按键，就会触发一次input事件。
该事件跟change事件很像，不同之处在于input事件在元素的值发生变化后立即发生，而change在元素失去焦点时发生，而内容此时可能已经变化多次。也就是说，如果有连续变化，input事件会触发多次，而change事件只在失去焦点时触发一次。
change事件：
a、激活单选框（radio）或复选框（checkbox）时触发。
b、用户提交时触发。比如，从下列列表（select）完成选择，在日期或文件输入框完成选择。
c、当文本框或<textarea>元素的值发生改变，并且丧失焦点时触发。
7、scroll事件可能会大量的触发，因此需要控制触发的频率，用到throttle函数。
8、throttle是“节流”，确保一段时间内只执行一次，而debounce是“防抖”，要连续操作结束后再执行。以网页滚动为例，debounce要等到用户停止滚动后才执行，throttle则是如果用户一直在滚动网页，那么在滚动过程中还是会执行。
网友评论