JavaScript学习笔记9

事件简介

1、浏览器事件：事件是某事发生的信号
鼠标事件：
click – 鼠标点击一个元素
contextmenu – 鼠标右键点击一个元素
mouseover/mouseout – 鼠标指针移入、离开一个元素
mousedown/mouseup – 当在元素上按下、释放鼠标按钮时
mousemove – 当鼠标移动时
表单（form）元素事件：
submit – 当访问者提交了一个时
focus – 当访问者聚焦于一个元素时
document事件：
DOMContentLoaded – 当HTML的加载和处理均完成时，DOM被完全构建时。
CSS事件：
transitioned – 当一个CSS动画完成时。

事件处理程序：为了对事件作出响应，我们可以分配一个在事件发生时运行的函数，称为处理程序。有三种分配处理程序的方法：
1、HTML特性（attribute）：onclick = ‘…’，很少使用，因为HTML标签中的JavaScript看起来有些奇怪且陌生，而且也不能在里面写太多代码。
2、DOM属性（property）：element.onclick = function，我们无法为特定事件分配多个处理程序，在许多场景中，这种限制并不严重。
3、方法（method）：element.addEventListener(event,handle[,phase])用于添加，removeEventListener用于移除。这种方式最灵活，但也是写起来最长的，有少数事件只能使用这种方式，例如transtioned和DOMContentLoaded。addEventListener也支持对象作为事件处理程序。在这种情况下，如果发生事件，则会调用handleEvent方法。

冒泡和捕获

冒泡与阿尼：当一个事件发生在一个元素上，它会首先运行在该元素上的处理程序，然后运行其父元素上的处理程序，然后一直向上到其他祖先上的处理程序。事件从内部元素“冒泡”到所有父级，就像水里的气泡一样，这个过程被称为冒泡。
父元素上的处理程序，始终可以获取事件实际发生位置的详细信息，引发事件的那个嵌套层级最深的元素被称为目标元素，可以通过event.target访问。注意与this(=event.currentTarget)之间的区别：
event.target – 是引发事件的目标袁术，它在冒泡过程中并不会发生变化。
this – 是当前元素，其中有一个当前正在运行的处理程序。在form.onclick处理程序中，this是表单元素，因为处理程序在它上面运行，event.target是表单中实际被点击的元素。

停止冒泡：event.stopPropagation()方法，停止冒泡向上移动，但是当前元素上的其他 处理程序都会继续进行。event.stopImmediatePropagation()方法，可以停止冒泡，并阻止当前元素上的处理程序运行。使用该方法后，其他处理程序就不会被执行。
不要再没有真实需求是停止冒泡，除非是显而易见的，并且在架构上经过深思熟虑的。

捕获

DOM事件标准描述了事件传播的3个阶段：
1、捕获阶段（Capturing phase） – 事件从Window向下走近元素
2、目标阶段（Target phase）-- 事件达到目标元素
3、冒泡阶段（Bubbling phase） – 事件从元素上开始冒泡

当一个事件发生时，发生该事件的嵌套最深的元素被标记为“目标元素”（event.target）.
1、然后，事件从文档根节点向下移动到event.target，并在途中调用分配了addEventListener(…,{capture:true})的处理程序。
2、然后在目标元素自身上调用处理程序。
3、然后事件从event.target冒泡到根，调用on、HTML特性和没有第三个参数的，或者第三个参数为false/{capture:false} 的addEventListener分配的处理程序。

事件委托

冒泡和捕获允许我们实现一种被称为事件委托的强大事件处理模式。事件委托常用于为许多相似的元素添加相同的处理，但不仅限于此。
算法为：在容器（container）上放一个处理程序，在处理程序中检查源元素event.target，如果事件发生在我们感兴趣的元素内，那么就处理该事件。
好处：简化初始化并节省内存，无需添加许多处理程序。更少的代码，添加或者移除元素时，无需添加或移除处理程序。DOM修改，我们可以使用innerHTML等，来批量添加或移除元素。
局限性：事件必须冒泡，而有些事件不会冒泡，此外低级别的处理程序不应该使用event.stopPropagation()。同时，委托可能会增加CPU负载，因为容器级别的处理程序会对容器中任意位置的事件做出反应，而不管我们是否对该事件感兴趣。

浏览器默认行为

阻止浏览器默认行为：
1、使用event对象，有一个event.preventDefault()方法。addEventListener的可选项passive:true向浏览器发出信号，表明处理程序不会调用preventDefault()。这对于某些移动端的事件像touchstart/touchmove很有用，用以高尚浏览器在滚动之前不应等待所有处理程序完成。
2、如果处理程序是使用on(而不是addEventListener)分配的，那返回false也生效。

创建自定义事件

自定义事件可用于创建“图形组件”，我们不仅可以生成出于自身目的而创建的全新事件，还可以生成例如click和mousedown等内建事件，这可能有助于自动化测试。

事件构造器：内建事件类形成一个层次结构，类似于DOM元素类，根是内建的event类。我们可以创建event对象
let event = new Event(type,[,options])
type – 事件类型，可以是想“click”这样的字符串，或者是自己的像“my-event”的参数
options – 具有两个可选属性的对象，bubbles:true/false，如果是true，事件会冒泡，cancelable:true/false，如果是true，那么“默认行为”就会被阻止，稍后我们会看到对于自定义事件。默认情况下，两者都为false。
其他像MouseEvent和KeyboardEvent这样的原生事件等的构造器，都接受特定于该事件类型的属性，例如鼠标事件clientX。
对于自定义事件，我们应该使用CustomEvent构造器，它有一个名为detail的附加选项，我们应该将事件特定的数据分配给它，然后所有处理程序可以以event.detail的形式来访问它。
可以生成原生事件：
1、如果第三方程序库不提供其他交互方式，那么这是使第三方程序库工作所需的一种肮脏手段。
2、对于自动化测试，要在脚本中“点击按钮”并查看接口是否正确响应。