《javascript高级程序设计》读书笔记（9）

元素。如下图所示：事件流程——DOM事件流程“DOM2级事件”规定的事件流程包括三个阶段：事件捕获阶段、目标阶段和事件冒泡阶段。首先发生的是事件捕获，它提供了拦截事件的机会。然后实际目标接收事件。最后一个阶段是冒泡阶段，可以响应事件。事件处理程序事件是由用户或浏览器本身执行的某种操作。比如click、load、mouseover都是事件的名称。响应事件的函数称为事件处理程序（或事件侦听器）。事件处理器名称以“on”开头，所以click事件的事件处理器是onclick，load事件的事件处理器是onload。有几种方法可以指定事件的处理程序。事件处理程序-HTML事件处理程序事件处理程序中的代码在执行时可以访问全局范围内的任何代码。以这种方式指定事件处理程序具有一些独特的功能。首先，这将创建一个封装元素属性值的函数。这个函数里面有个局部变量event，就是事件对象//通过事件变量输出“点击”，可以直接访问事件对象，不需要自己定义，也不需要从函数的参数列表中读取。在这个函数内部，这个值等于事件的目标元素，例如：//Output"ClickMe"eventhandler——DOM0级事件处理器每个元素（包括window和document）都有自己的timehandler属性，这些属性通常都是小写的，比如onclick，这个属性的值设置为一个函数，可以指定事件处理程序。varbtn=document.getElementById("myBtn");btn.onclick=function(){警报(this.id);//"myBtn"}btn.onclick=null;//deleteeventhandlereventhandler--DOM2-leveleventhandlers“DOM2-levelevents”定义了两个处理事件处理器赋值和移除的方法：addEventListener()和removeEventListener()。这两个方法包含在所有DOM节点中，它们都接受3个参数：要处理的事件的名称、作为事件处理程序的函数和一个布尔值。如果最后一个布尔参数为真，则表示事件处理程序在捕获阶段被调用；如果为假，则表示在冒泡阶段调用了事件处理程序。varbtn=document.getElmentById("myBtn");btn.addEventListener("click",function(){alert(this.id);},false);//事件会在冒泡阶段触发btn.addEventListener("click",function(){alert("Helloworld!");},false);使用DOM2级别方法添加事件处理程序的主要好处是可以添加多个事件处理程序。上面的示例为按钮添加了两个事件处理程序，它们按添加的顺序触发，因此首先显示元素的ID，然后显示“Helloworld!”。第二个显示消息。通过addEventListener()添加的事件处理程序只能使用removeEventListener()删除；为删除传递的参数与添加处理程序时使用的参数相同。这也意味着无法删除通过addEventListener()添加的匿名函数。就像上面的例子一样。事件处理程序-IE事件处理程序IE实现了两个类似于DOM中的方法：attachEvent()和detachEvent()。两种方法都接受相同的两个参数：事件处理程序名称和事件处理程序函数。要使用attachEvent()将事件处理程序添加到按钮，可以使用以下代码。varbtn=document.getElementById("myBtn");btn.attachEvent("onclick",function(){alert("Clicked");});注意attachEvent()的第一个参数是“onclick”，而在非DOM的addEventListener()方法中是“click”。在IE中使用attachEvent()与使用DOM0级方法之间的主要区别在于事件处理程序的范围。在使用DOM0级方法的情况下，事件处理程序将在其所属元素的范围内运行；在使用attachEvent()方法的情况下，事件处理程序将在全局范围内运行，这等于window.varbtn=document.getElementById("myBtn");btn.attachEvent("onclick",function(){alert(this===window);//true});在编写跨浏览器代码时记住这一点非常重要。与addEventListener()类似，attachEvent()方法也可用于向元素添加多个事件处理程序。与DOM方法不同，这些事件处理程序不是按照它们添加的顺序执行，而是以相反的顺序触发。如果提供相同的参数，则可以使用detachEvent()删除使用attachEvent()添加的事件。与DOM方法一样，这也意味着无法删除添加的匿名函数。事件对象-DOM中的事件对象DOM兼容的浏览器将事件对象传递到事件处理程序中。无论指定事件处理程序（DOM0级别还是DOM2级别）时使用的方法如何，都会传入事件对象。类型）;//“点击”};btn.addEventListener(“点击”,function(event){alert(event.type);//“点击”},false);事件对象包含与创建它的特定事件相关的属性和方法。触发的事件类型不同，可用的属性和方法也不同。所有活动的成员都列在下表中。在事件处理程序中，对象this始终等于currentTarget的值，而target仅包含事件的实际目标。如果事件处理程序直接分配给目标元素，则this、currentTarget和target包含相同的值。varbtn=document.getElementById("myBtn");btn.onclick=function(event){alert(event.currentTarget===this);//真正的警报（event.target===this）;//true}要防止特定事件的默认行为，可以使用preventDefault()方法。例如，链接的默认行为是在单击时导航到其href属性指定的URL。如果您想阻止链接导航的默认行为，您可以通过链接的onclick事件处理程序取消它。varlink=document.getElementById("myLink");link.onclick=function(event){event.preventDefault();}只有cancelable属性设置为true的事件才能使用preventDefault()来取消它的默认行为。另外，stopPropagation()方法用于立即停止事件在DOM层级中的传播，即取消进一步的事件捕获或冒泡。例如，直接添加到按钮的事件处理程序可以调用stopPropagation()，从而避免触发注册在document.body上的事件处理程序。varbtn=document.getElementById("myBtn");btn.onclick=function(event){alert("Clicked");event.stopPropagation();};document.body.onclick=function(event){alert("bodyclicked");}对于上面的例子，如果不调用stopPropagation()，当按钮被调用时会出现两个警告框单击，但由于单击事件根本不会传播到document.body，因此不会触发此元素上的onclick事件处理程序中的注册。事件对象的eventPhase属性可用于确定事件当前处于事件流的哪个阶段。如果在捕获阶段调用事件处理器，则eventPhase等于1；如果事件处理程序在目标对象上，则eventPhase等于2；如果是在冒泡阶段调用的事件处理程序，则eventPhase等于3。这里需要注意的是，即使“ontarget”发生在冒泡阶段，eventPhase始终等于2。varbtn=document.getElementById("myBtn");btn.onclick=function(event){alert(event.eventPhase);//2};document.body.addEventListener("click",function(event){alert(event.eventPhase);//1},true);document.body.onclick=function(event){alert(event.eventPhase);//3};当这个例子中的按钮被点击时，第一个被执行的事件处理程序是在捕获阶段触发的在document.body中添加的处理程序，因此会弹出一个警告框显示eventPhase为1。然后会触发注册在按钮上的事件处理程序，此时的eventPhase值为2。最后触发的事件处理程序，冒泡阶段执行的添加到document.body的事件处理程序显示eventPhase值为3。当eventPhase等于2时，this.target和currentTarget总是相等的。事件对象仅在事件处理程序执行期间存在；一旦事件处理程序完成执行，事件对象就会被销毁。事件类型Web浏览器中可能会发生多种类型的事件。UI事件，当用户与页面上的元素交互时触发；焦点事件，当元素获得或失去焦点时触发；鼠标事件，在使用鼠标滚轮时触发；文本事件，在文档中输入文本时触发；键盘事件，当用户通过键盘对页面进行操作时触发；复合事件，当为IME输入字符时触发；change事件，当底层DOM结构发生变化时触发。UI事件UI事件是指不一定与用户操作相关的事件。load：在页面完全加载时在窗口上触发，在加载所有框架时在框架集上，在加载图像时在元素上，或在加载嵌入内容时在元素上触发。unload：当页面完全卸载时在窗口上触发，当所有框架都卸载时在框架上触发，或者当嵌入内容卸载时在