javascript事件流与事件委托javascript与HTML的交互是通过事件来实现的。事件是用户或浏览器本身执行的某个动作，例如单击、加载、将鼠标移入和移出等。DOM事件流DOM（文档对象模型）结构是一个树结构。当一个HTML元素产生一个事件时，该事件将按照特定的顺序在元素节点和根节点之间传播，并收集该路径经过的节点。对于事件，这个传播过程可以称为DOM事件流。事件流描述了从页面接收事件的顺序。事件冒泡：IE的事件流称为事件冒泡，即事件一开始由最具体的元素接收，然后逐步向上传播到不太具体的节点。自下而上。事件捕获：不太具体的节点最先接收事件，最具体的节点应该最后接收事件。自顶向下。DOM事件流：包括三个阶段：事件捕获阶段：该阶段的主要功能是捕获和拦截目标阶段的事件：一般来说，该阶段有双重作用域，即捕获阶段的结束和开始冒泡阶段；事件冒泡阶段：主要作用是将目标元素绑定事件的执行结果返回给浏览器，处理不同浏览器的差异。这个阶段主要是完成DOM事件流。当一个事件对象触发DOM上的一个事件时，它会生成一个事件对象event，其中包含与该事件相关的所有信息。varbtn=document.getElementById("juejin")btn.onclick=function(event){console.log(event)}公共属性：target事件的targetcurrentTarget元素绑定到事件，同'this'指向stopPropagation()取消事件的进一步捕获或冒泡。如果bubbles为真，则可以使用此方法stopImmediatePropagation()取消事件的进一步捕获或冒泡，并阻止调用任何事件处理程序（DOM3级事件中的新功能）preventDefault()取消默认行为事件，比如点击链接跳转。如果cancelable为真，则方法类型被触发，事件类型为eventPhase调用事件处理程序的阶段：0表示此时没有事件正在处理，1表示捕获阶段，2表示“在目标上”，3表示冒泡阶段document.body.onclick=function(event){alert(event.currentTarget===document.body);//truealert(this===document.body);//truealert(event.target===document.getElementById("myBtn"));//true};事件类型1.UI（UserInterface）事件，当用户与页面上的元素交互时触发load、unload、error、select、resize、scroll2.Focus事件，在Triggerblur，页面获得或失去焦点时focusout，失去焦点focus，focusin获得焦点顺序如下mousedownmouseupclickmousedownmouseupdbclick4。Wheel事件，使用鼠标滚轮操作时触发mousewheel5.Text事件，当用户在可编辑区域输入字符时触发textInput6。.键盘事件，当用户通过键盘对页面进行操作时触发keydown。当按下键盘上的任意键时触发。如果你不释放它，它会一直触发按键。当您按下键盘上的字符键时触发。如果不松开，会一直触发Keyup当用户松开键盘上的按键时触发7.HTML5事件contextmenu事件：鼠标右键可以调出上下文菜单beforeunload事件：在浏览器卸载之前触发DOMCo页intentLoad事件：形成完整DOM树后触发readystatechange事件：提供文档加载状态相关信息pageshow和pagehide事件：页面显示或隐藏时触发👉MDNPortalhashchange事件：hash变化时触发事件Delegating事件委托是为了解决事件处理器过多导致的内存和性能问题。那么什么是事件委托呢？就是用事件冒泡的方式，通过只指定一个事件处理器来管理某一类型的所有事件。作用是什么？支持为同一个DOM元素注册多个同类型的事件。事件可以分为事件捕获和事件冒泡。使用addEventListener(type,listener,useCapture)实现type:required,Stringtype,eventtypelistener:required,FunctionbodyorJSmethoduseCapture:optional,boolean类型。指定事件是否发生在捕获阶段。默认为false，事件发生在冒泡阶段function(){console.log('Printthefirsttime')})div1.addEventListener('click',function(){console.log('Printthesecondtime')})}事件委托的优点可以节省大量占用内存，减少事件注册可以实现当有新的子对象加入时，不需要重新绑定（动态绑定事件）。使用事件委托的注意事项使用“事件委托”时，并不是说事件委托的元素越近越好。事件冒泡的过程也是比较耗时的。越靠近顶层，事件的“事件传播链”越长，耗时越长。如果DOM嵌套很深，通过大量祖先元素冒泡的事件会导致性能下降。作者：zlevai链接：https://juejin.im/post/5f1fdb8e6fb9a07ec172fc39来源：掘金版权归作者所有。商业转载请联系作者授权，非商业转载请注明出处。
