(一)事件处理模型---事件冒泡、捕获
(1)事件冒泡
24 <body>
25 <div class="warpper">
26 <div class="content">
27 <div class="box">
28
29 </div>
30 </div>
31 </div>
32 <script type="text/javascript">
33 var warpper = document.getElementsByClassName(‘warpper‘)[0];
34 var content = document.getElementsByClassName(‘content‘)[0];
35 var box = document.getElementsByClassName(‘box‘)[0];
36
37 warpper.addEventListener(‘click‘,function(){
38 console.log("warpper-red");
39 },false)
40 content.addEventListener(‘click‘,function(){
41 console.log(‘content-yellow‘);
42 },false)
43 box.addEventListener(‘click‘,function(){
44 console.log(‘box-bule‘);
45 },false)
46
47 </script>
48
49 </body>
如下：点击蓝色区域，三个div都会相应click事件
(2)事件捕获
1 warpper.addEventListener(‘click‘,function(){
2 console.log("warpper-red");
3 },true)
4 content.addEventListener(‘click‘,function(){
5 console.log(‘content-yellow‘);
6 },true)
7 box.addEventListener(‘click‘,function(){
8 console.log(‘box-bule‘);
9 },true)
点击蓝色区域，会先父级元素捕获到，然后在子元素；
(3)触发顺序：先捕获 后冒泡
1 warpper.addEventListener(‘click‘,function(){
2 console.log("warpper-red,Bubble");
3 },false)
4 content.addEventListener(‘click‘,function(){
5 console.log(‘content-yellow,Bubble‘);
6 },false)
7 box.addEventListener(‘click‘,function(){
8 console.log(‘box-bule,Bubble‘);
9 },false)
10
11 warpper.addEventListener(‘click‘,function(){
12 console.log("warpper-red");
13 },true)
14 content.addEventListener(‘click‘,function(){
15 console.log(‘content-yellow‘);
16 },true)
17 box.addEventListener(‘click‘,function(){
18 console.log(‘box-bule‘);
19 },true)
时间： 2024-09-30 08:41:34