前端事件绑定知识点（面试常问）

介绍事件是JavaScript可以检测到的行为。网页中的每个元素都可以生成某些事件，这些事件可以触发JavaScript函数或程序。事件通常与函数结合使用，函数在事件发生时执行。JS事件的执行方式：HTML事件属性可以直接执行JavaScript代码HTML事件属性可以调用JavaScript函数可以为HTML元素指定自己的事件处理器可以防止事件发生。等等...常用的JS事件类型鼠标点击事件onclick鼠标悬停事件onmouseover鼠标移动事件onmouseout焦点事件onfocus失焦事件onblur加载事件onload刷新页面onunload（貌似只对IE有效）关闭页面onbeforeunload（出现只对IE有效）IE)事件流事件流描述了从页面接收事件的顺序。IE的事件流是事件冒泡流，事件由子元素获取并向上传播DOM树。即事件最初由最具体的元素（文档中嵌套层级最深的节点）接收，然后逐步向上中继到最不具体的节点（文档），并以stopPropagation终止冒泡（）方法。Netscape的事件流是事件捕获流，其中事件由根元素拾取并向下分发到DOM树。与事件冒泡流相反，事件捕获的思想是不太具体的节点（文档）应该更早接收事件，而最具体的节点最后。事件对象HTMLDOM事件对象header1header2eventeventeventtargetevent.targetaddeventelement.addEventListener(type,listener,false)removeeventelement.removeEventListener(type,listener,false)防止事件冒泡event.stopPropagation()cancel默认行为event.preventDefault()EventobjectinIEheader1header2eventwindow.eventeventtargetevent.srcElementaddeventelement.attachEvent('on'+type,listener)removeeventelement.detachEvent('on'+type,listener)防止事件冒泡event.cancelBubble=true取消默认行为event.returnValue=false事件处理程序HTML事件处理程序事件直接写在html元素中，缺点：html和js代码紧耦合在一起。测试Level0DOMeventhandler将一个函数赋值给一个eventhandler属性，优点：比较简单，跨浏览器支持。缺点：不能添加多个事件处理器，最后一个事件会覆盖之前的事件只能使用removeEventlistener()删除此事件。它们都接收三个参数：要处理的事件名称event（不带'on'），作为事件处理器的函数function（优点：可以添加多个事件处理器，）和一个布尔值useCapture。boolean参数在现代浏览器最近的版本中只能加或不加，true表示事件在捕获阶段执行，false表示事件在冒泡阶段执行，建议写false，因为有些浏览器只有冒泡阶段。target.addEventListener(type,listener[,useCapture]);target.removeEventListener(type,listener[,useCapture]);IE事件处理器IE8及更早的IE版本不支持addEventListener()方法，Opera7.0及更早版本的Opera也不支持。但是，对于那些不支持此功能的浏览器，您可以使用attachEvent()方法添加事件处理程序。事件通过attachEvent()添加，只能通过detachEvent()删除。这两个方法接收相同的两个参数：事件处理器名称类型和事件处理器函数，不支持第三个参数的原因：IE8--onlysupportsbubbling冒泡流。element.attachEvent(type,function)element.detachEvent(type,function)事件代理和委托当我们需要给很多元素添加事件时，我们可以通过将事件添加到它们的父节点，并将事件委托给父节点来触发事件节点处理函数。这主要是浏览器的事件冒泡机制造成的。

Loremipsumdolorsitamet.

Loremipsumdolorsitamet.

Loremipsumdolorsitamet.