网页设计与制作教程Web前端开发（第7版）课件：JavaScript事件处理-事件捕捉与事件冒泡.pptx

本章介绍JavaScrip的BOM对象和操作，DOM对象和操作。JavaScript事件处理事件捕捉与事件冒泡

目录JavaScript事件处理10.1事件概述10.2window事件10.3mouse事件10.4keyboard事件10.5form事件10.6事件捕捉与事件冒泡习题10

10.6事件捕捉与事件冒泡10.6.1事件捕捉与事件冒泡的执行顺序当使用事件捕获时，父级元素先触发，子级元素后触发发生，click事件捕捉的顺序为：document→html→body→div→p。当使用事件冒泡时，子级元素先触发，父级元素后触发发生，click事件冒泡的顺序为：p→div→body→html→document。并不是所有的事件都能冒泡，以下事件不冒泡：blur、focus、load、unload。绑定事件时通过addEventListener()方法，格式为：元素的对象名.addEventListener(事件名,函数名,事件流方式);

【例10-21】中有3个嵌套的div元素，从外层到内层依次为d1（绿色）、d2（黄色）、d3（蓝色）。当事件流方式的布尔值为true时，单击蓝色div区域，事件会一层层地向上传递，事件流顺序为d1→d2→d3。当事件流方式的布尔值为false时，事件流顺序为d3→d2→d1。你可以自己修改该参数为false，然后运行代码。10.6事件捕捉与事件冒泡

!DOCTYPEhtmlhtmlheadmetacharset=utf-8title事件捕捉与事件冒泡/title/headstyletype=text/css#div1{width:200px;height:200px;background-color:#008080;/*绿色*/}#div2{width:100px;height:100px;background-color:#ffff00;/*黄色*/}#div3{width:50px;height:50px;background-color:aqua;/*蓝色*/}/style10.6事件捕捉与事件冒泡

scripttype=text/javascriptwindow.onload=function(){vard1=document.getElementById(div1);vard2=document.getElementById(div2);vard3=document.getElementById(div3);d1.addEventListener(click,D1,true);d2.addEventListener(click,D2,true);d3.addEventListener(click,D3,true);functionD1(){alert(执行D1函数);};functionD2(){alert(执行D2函数);};functionD3(){alert(执行D3函数);};}/script10.6事件捕捉与事件冒泡

bodydivid=div1divid=div2divid=div3/div/div/div/body/html10.6事件捕捉与事件冒泡

10.6.2阻止事件冒泡和捕捉例如，阻止div3之后的事件冒泡，把div3的绑定事件改为：functionD3(){ if(eventevent.stopPropagation){//W3C标准阻止冒泡机制 event.stopPropagation(); } alert(执行D3函数);};10.6事件捕捉与事件冒泡

10.6.3取消默认事件例如，如果存在一个链接，写在body中：ahref=/id=test百度/a可以使用以下代码来阻止该链接的默认行为：vara=document.getElementById(test);a.onclick=function(e){if(e