前端实训-中级阶段（二）-事件（event）事件冒泡、捕获-（2019-06-20期）

最基础的前端就是HTML+CSS+Javascript。掌握这三项技术算是入门，但也只是入门而已。现在前端开发的定义远不止于此。前端小课堂（HTML/CSS/JS），本着提高技术水平，夯实基础知识的中心思想，开课（每周四）。我们已经基本掌握了常规的语法和语义，以及基本的使用方法。下面我们就深入了解一下里面的原理。我们今天要谈什么？事件机制事件对象（Event）事件循环DOM（与事件的关系，看不看都无所谓）DOM（DocumentObjectModel-文档对象模型）是一种用于渲染和交互任何HTML或XML的API文档。DOM是加载到浏览器中的文档模型，它以节点树的形式表示文档，每个节点代表文档的一个组件（例如：页面元素、字符串或评论等）。DOM是万维网上使用最广泛的API之一，因为它允许在浏览器中运行的代码访问文档中的节点并与之交互。可以创建、移动或修改节点。事件侦听器可以添加到节点并在给定事件发生时触发。DOM本身并没有规范化，它是在浏览器开始实现JavaScript时出现的。这个遗留DOM有时被称为DOM0。目前，WHATWG维护着DOM现有标准。--由于MDN有一个版本的DOM，因此其环境中的事件支持也有一个版本。文档DOM事件（级别0）body.onclick就是这样定义的。不能多次监听事件，因为是赋值方式，下次赋值会覆盖掉。只能定义在addEventListener的方式中，在冒泡阶段触发DOM事件（level2）。可以多次监听，回调按照监听顺序（有序）执行，取消需要同一个引用的监听函数。举个栗子//错误案例，两个方法引用不一样，导致没有清除document.addEventListener('click',function(){})document.removeEventListener('click',function(){})//正确的大小写，相同的引用，可以被清除。functiondocumentClick(){}document.addEventListener('click',documentClick)document.removeEventListener('click',documentClick)可选触发阶段（冒泡&捕获）捕获事件机制标准事件：EMCAScript标准规定事件流包含三个阶段是事件捕获阶段、目标阶段和事件冒泡阶段。先存一段代码，后面的例子中都会用到这个例子。在这里测试看我的DEMO点击事件捕获阶段捕获阶段：从外到内，触发规则为html>body>a。如果想在捕获阶段触发，需要传入参数{capture:true}事件冒泡阶段冒泡阶段：从内到外，触发规则为a>body>html。这个阶段是W3C默认执行的，相当于{capture:false}事件执行序列imagesource-https://www.w3.org/TR/DOM-Lev...事件的捕获阶段>中目标阶段>事件的冒泡阶段>事件的默认行为为什么在这里？强调这个顺序怎么样？由于默认行为是最后的，我们都可以使用e.preventDefault()来阻止它。根据上述文章阻止默认事件。在移动端滑动时，防止默认事件需要手动设置passive为false。passive：布尔值，当设置为true时，表示侦听器永远不会调用preventDefault()。如果侦听器仍然调用此函数，客户端将忽略它并抛出控制台警告。我们实际点击的元素的事件触发器并不是在冒泡和捕获阶段触发的，而是在target阶段触发的。DEMO-bubble&capture阶段触发事件，可以看到，是按照定义的顺序触发的。事件对象（Event）事件对象--mdn事件对象（属性&方法）关键类型描述bubblesboolean是否冒泡cancelableboolean是否可以取消默认动作。currentTargetElement返回事件侦听器触发事件??的元素。（这里的重点）eventPhaseIntenger返回事件传播的当前阶段targetElement返回触发此事件的元素。(事件的目标节点)timeStampDate触发的时间戳类型String事件名。isTrustedboolean事件是否由浏览器产生（true表示是，false表示开发者创建。preventDefaultFunction取消事件。默认行为在cancelable=true时有效。stopPropagationFunction取消事件的捕获或冒泡行为。bubbles=true时有效IE:event.cancelBubble=true;//防止事件冒泡IE:event.returnValue=false;//防止事件默认行为获取事件window.eventeventtype(category,Eventobject,etc.)DOM事件子类，根据不同的事件类型，返回的对象会略有不同，比如Mouse类型，会有点击坐标之类的。KeyboardEvent之类的会有按钮之类的。new一个事件对象CustomEvent()--mdndocument.body.onclick=function(e){console.log(e)}varbtn=document.body;varevent=newCustomEvent("click");btn.dispatchEvent(event);事实上，这里我们可以自定义事件的名称，然后我们就可以实现一个发布订阅功能。document.addEventListener("bus",function(e){console.log(e,e.detail)});varevent=newCustomEvent("bus",{detail:{LN_type:'lilnong.top'}});document.dispatchEvent(event);eventloop（事件循环）首先，我们要牢记一件事js是单线程的EventLoop中文叫事件循环。它是浏览器内部的一种机制，当javaScript在单线程中运行时如何不阻塞UI。Javascript有一个主线程和一个call-stack调用栈（执行栈）。所有的任务都会被放入调用栈（栈采用后进先出的规则）等待主线程执行。任务类别&任务队列（TaskQueue）在JavaScript中，任务分为两种，一种叫做宏任务（MacroTask），也叫Task，另一种叫做微任务（MicroTask）。MacroTask（宏任务）