DOM事件机制

EventHTMLDOM允许JavaScript对HTML事件做出反应。JavaScript可以在事件发生时执行，例如当用户单击HTML元素时。(一)活动的组成a．事件源：事件被触发的对象b．事件类型C.事件处理程序：通过函数赋值。(2)执行事件的步骤a．获取事件源B.绑定事件C.以函数赋值的形式添加事件处理程序1.事件流程(1)事件流程描述了从页面接收事件的顺序。当一个事件发生时，它会按照特定的顺序在元素节点和根节点之间传播，路径经过的所有节点都会收到该事件。这个传播过程就是DOM事件流。1.1事件冒泡（IE事件流）（1）IE事件流之所以称为事件冒泡，这是因为事件被定义为从最具体的元素（文档树中最深的节点）触发，然后向上传播到没有然后是特定元素（文档）。(2)如上图所示，当div元素被点击时，即被点击的元素首先触发click事件。然后点击事件沿着DOM树一路向上，在它经过的每个节点上依次触发，直到它到达文档对象。1.2防止事件冒泡(1)event.stopPropagation()直接在对应的方法中使用event.stopPropagation()注意：点击方法时如果需要同时传递其他参数和事件，直接传onclick这个词即可='test(123,event)'1.3事件捕获（Netscape事件流）（1）事件捕获是指最不具体的节点最先收到事件，最具体的节点最后收到事件。事件捕获实际上是在事件到达最终目的地之前拦截事件。1.3DOM事件流DOM2Events规范规定事件流分为3个阶段：事件捕获、到达目标和事件目标。事件捕获先发生，可以提前拦截事件。然后，实际的目标元素接收事件。最后一个阶段是冒泡，最晚这个阶段应该对应事件。单击div元素会按所示顺序触发事件。在DOM事件流中，实际目标（div元素）在捕获阶段不会接收到事件。这是因为在capture阶段从document到html到body就结束了。下一阶段，即在div元素上触发事件的“目标已达到”阶段，在处理事件时通常被视为冒泡阶段的一部分。然后，冒泡阶段开始，事件传播回文档。注意：所有现代浏览器都支持DOM事件流，只有IE8及更早版本不支持。2.事件处理程序事件是指用户或浏览器执行的某种动作。例如，单机(click)、加载(load)、鼠标悬停(mouseover)。为响应事件而调用的函数称为事件处理程序（或事件侦听器）。2.1HTML事件处理程序特定元素支持的每个事件都可以使用事件处理程序的名称指定为HTML属性。此时属性的值必须能够执行JavaScript代码。例如，要在单击按钮时执行一些JavaScript代码，可以使用以下HTML属性：Clickme单击此按钮后，控制台将输出一条消息。这种交互能力是通过onclick属性指定JavaScript代码值来实现的。注意：因为该属性的取值是JavaScript代码，所以不转义就不能使用和号（&）、双引号（"）、小于号（<）、大于号（>）等HTML语法。这样，是为了避免使用HTML实体，可以使用单引号代替双引号，如果确实需要使用双引号，需要将代码改成如下：点我在HTML中定义的事件处理程序可以包含精确的操作指令或调用页面其他地方定义的方法。//需要添加()点我在下面的事件中，this的值相当于事件的目标元素，如下例：clickme2.2.DOM0事件处理程序在JavaScript中指定事件处理程序的传统方法是将函数分配给事件处理程序（DOM元素的）。点我在这里，首先从文档中获取按钮，然后将一个函数分配给它的onclick事件处理程序。请注意，前面的代码在运行之前不会为事件处理程序赋值。因此，如果页面上出现上述代码中的按钮，可能会出现用户点击按钮没有反应的情况。当像这样使用DOM0方法分配事件处理程序时，分配的函数被视为元素的方法。因此，事件处理程序在元素的范围内运行，即this等于元素。以下示例演示了使用this来引用元素本身。点我varbtn=document.getElementById("btn");btn.addEventListener("click",function(){console.log("Iwasclicked");},false)上面的代码给按钮添加了一个onclick事件处理器，在事件冒泡时会被触发阶段（因为最后一个参数值为false）。与DOM0方法类似，此事件处理程序也在它附加到的元素的范围内运行。使用DOM2方法的主要优点是您可以为同一事件添加多个事件处理程序。请参见以下示例：Clickme在这里，添加了两个按钮的事件处理程序。多个事件处理程序是按添加的顺序触发的，所以前面的代码会先打印'Iwasclicked'，然后显示元素ID(2)removeEventListener()通过addEventListener()添加的事件处理程序只能使用removeEventListener()和传入与添加删除时相同的参数。这意味着无法删除使用addEventListener()添加的匿名函数，如下例所示：clickmevarbtn=document.getElementById(“按钮”）；//添加一个新方法varhandler=function(){console.log(this.id);}btn.addEventListener("点击",handler,false);btn.removeEventListener("click",handler,false);//效果这个例子是有效的，因为在调用addingEventListener()和removeEventListener()的时候传入了同一个函数。在大多数情况下，事件处理程序被添加到事件流的冒泡阶段，主要是为了跨浏览器的兼容性。将事件处理程序注册到捕获阶段通常用于在事件到达指定目的地之前拦截事件。如果不需要拦截，请不要使用事件捕获。3.事件对象3.1阻止默认事件的发生(1)preventDefault()方法用于阻止特定事件的默认动作。例如，链接的默认行为是在单击时导航到href属性指定的URL或修改表单提交的默认事件。如果想阻止这些行为，可以在onclick事件处理函数中取消，如下跳转提交按钮4.事件委托使用事件委托的原因：(1)每个函数都是一个对象，会占用内存空间。对象越多，性能越差(2)需要为指定的事件处理程序提前访问DOM的次数会导致整个页面的交互延迟。事件委托：当事件被触发时，委托父元素（或父元素的子元素）做什么。即利用冒泡的原理向parent添加事件，通过判断事件源的子集来进行相应的操作。使用事件委托技术可以避免将事件侦听器添加到特定的每个节点。去个地方做点什么打个招呼4.1事件委托的优点(1)文档对象随时可用，可以随时向其添加事件处理程序（无需等待DOMContentLoaded或加载事件）。这意味着只要页面呈现可点击元素，它就会立即运行。(2)节省设置页面事件处理程序所花费的时间。仅指定一个事件处理程序可以节省DOM引用和时间。(3)减少整个页面所需的内存，提高整体性能。最适合事件委托的事件包括：click、mousedown、mouseup、keydown和keypress。5.事件类型(1)用户界面事件(UIEvent)：涉及与BOM交互的一般浏览器事件。(2)焦点事件(FocusEvent)：当元素获得和失去焦点时触发。(3)鼠标事件(MouseEvent)：当鼠标在页面上执行某些操作时触发。(4)滚轮事件(WheelEvent)：当使用鼠标滚轮（或类似设备）时触发。(5)键盘事件(KeyboardEvent)：当使用键盘在页面上执行某些操作时触发。(6)输入事件(InputEvent)：当文本被输入到文档中时触发。5.1用户界面事件-UIEvent(1)load在页面加载时在窗口上触发，在所有窗格（）加载时在窗口覆盖物（）上触发，在元素上当imageisloaded完成后触发，加载相应对象时在