这里主要记录一下三种事件处理程序
第一种是HTML事件处理程序,在写代码的时候经常会给一个元素添加某种事件,有可能是点击,或者鼠标移入移出,那么我们会这样写
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset=" utf-8"> 5 <style> 6 #biggest { 7 height: 300px; 8 width: 300px; 9 background-color: cadetblue; 10 margin: 200px auto; 11 </style> 12 </head> 13 <body> 14 <div id="biggest" onclick="console.log('我是第外面的div')"></div> 15 </body> 16 </html>
自然,当我们点击它的时候控制台就能够输出信息了,在dom中,元素并不是独立的,比如说虽然我们只点击了这个div,但是我们同时也点击了这个div外层的父元素们,body,html,先不说什么是冒泡和捕获,对于HTML事件处理程序,我们添加多几个点击事件,并且是有层次包围的div
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset=" utf-8"> 5 <style> 6 #biggest { 7 height: 300px; 8 width: 300px; 9 background-color: cadetblue; 10 margin: 200px auto; 11 position: relative; 12 } 13 #middle { 14 height: 200px; 15 width: 200px; 16 position: absolute; 17 background-color: antiquewhite; 18 top: 50px; 19 left: 50px; 20 } 21 #innermost { 22 height: 100px; 23 width: 100px; 24 position: absolute; 25 background-color:#55aaff; 26 top: 50px; 27 left: 50px; 28 } 29 30 </style> 31 </head> 32 <body> 33 <div id="biggest" onclick="console.log('我是第外面的div')"> 34 <div id="middle" onclick="console.log('我是中间的div')"> 35 <div id="innermost" onclick="console.log('我是最里面的的div')"></div> 36 </div> 37 </div> 38 </body> 39 </html>
在浏览器中是这样的
此时当我们点击蓝色也就是最里面的div的时候,控制台会输出:
他会先输出我们点击的div,而且会同时以此按顺序输出所包裹它的div的点击事件,这就是事件的冒泡,从最里面的元素事件开始触发,一直到最外层的事件触发完成,而HTML的默认事件处理方式就是使用冒泡,那么反过来,如果是从最外层开始触发一直到最内层,则就是事件的捕获。
第二种事件处理程序是DOM0级事件处理程序,dom0级是指在script标签中我们用元素.onclick = function () {}来执行的事件,将上面的代码修改一下,再来看点击的结果,
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset=" utf-8"> 5 <style> 6 #biggest { 7 height: 300px; 8 width: 300px; 9 background-color: cadetblue; 10 margin: 200px auto; 11 position: relative; 12 } 13 #middle { 14 height: 200px; 15 width: 200px; 16 position: absolute; 17 background-color: antiquewhite; 18 top: 50px; 19 left: 50px; 20 } 21 #innermost { 22 height: 100px; 23 width: 100px; 24 position: absolute; 25 background-color:#55aaff; 26 top: 50px; 27 left: 50px; 28 } 29 30 </style> 31 </head> 32 <body> 33 <div id="biggest"> 34 <div id="middle"> 35 <div id="innermost"></div> 36 </div> 37 </div> 38 <script> 39 var biggest = document.getElementById("biggest") 40 var middle = document.getElementById("middle") 41 var innermost = document.getElementById("innermost") 42 43 biggest.onclick = function () {console.log('我是第外面的div')} 44 middle.onclick = function () {console.log('我是第中间的div')} 45 innermost.onclick = function () {console.log('我是第里面的div')} 46 47 </script> 48 </body> 49 </html>
此时再点击最里面的div看控制台输出:
依旧是使用事件冒泡,与HTML的处理方式是一样的,其实也很好理解,这边我们用的是匿名函数,若是不用匿名函数的话也就是从html那边定义了事件的名字,然后在script里面执行,接下来是要将DOM2级事件处理程序的方式,在这里并没有所谓的1级DOM事件模型,所以不需要去在意名称,
在2级DOM中,所有的元素都附带了两个DOM事件模型,也就是addEventListener和removeEventListener,这两个方法都有三个参数,第一个是事件的名字,比如说click,第二个是处理它的函数方法,第三个是选择处理的方法是冒泡还是捕获,若是true则是捕获,false也就是默认就是冒泡。addEvenetListener能为元素添加多个事件处理程序,触发的时候按照顺序来执行,而removeEventListen则是移除函数,但是不能够移除匿名函数,也就是说当你定义函数的时候如果没有给它个方法名字,那么你移除的时候就无法做到了,下面是使用捕获
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset=" utf-8"> 5 <style> 6 #biggest { 7 height: 300px; 8 width: 300px; 9 background-color: cadetblue; 10 margin: 200px auto; 11 position: relative; 12 } 13 #middle { 14 height: 200px; 15 width: 200px; 16 position: absolute; 17 background-color: antiquewhite; 18 top: 50px; 19 left: 50px; 20 } 21 #innermost { 22 height: 100px; 23 width: 100px; 24 position: absolute; 25 background-color:#55aaff; 26 top: 50px; 27 left: 50px; 28 } 29 30 </style> 31 </head> 32 <body> 33 <div id="biggest"> 34 <div id="middle"> 35 <div id="innermost"></div> 36 </div> 37 </div> 38 <script> 39 var biggest = document.getElementById("biggest") 40 var middle = document.getElementById("middle") 41 var innermost = document.getElementById("innermost") 42 43 biggest.addEventListener('click',function() { 44 console.log('我是第外面的div') 45 },true) 46 middle.addEventListener('click',function() { 47 console.log('我是中间的div') 48 },true) 49 innermost.addEventListener('click',function() { 50 console.log('我是第里面的div') 51 },true) 52 53 </script> 54 </body> 55 </html>
同样点击最内层代码,此刻
,如果我们将函数中的true改成false,那么将采用的是冒泡。