祥云网站建设专业做招聘的网站

js有好多的知识需要不断积累，但是不能浅尝，应该深究其内因，并运用在日常开发过程中。

1. 捕获阶段：

   事件从根节点流向目标节点，途中流经各个DOM节点，在各个节点上触发捕获事件，直到达到目标节点。

   那么捕获阶段有什么用吗？完全可以没有捕获阶段也可以啊？

   捕获阶段的主要任务是建立传播路经，在冒泡阶段根据这个路经回溯到文档根节点

2. 目标阶段
   事件到达目标节点时，就到了目标阶段，事件在目标节点上被触发

3. 冒泡阶段
   事件在目标节点上触发后，不会终止，一层层向上冒，回溯到根节点。

4. 运用举例：

   html代码

     <div class="a"><li class="b"><a href="#" class="c">buhuo</a></li></div>

   js代码

   var div = document.getElementsByClassName('a')[0];    //注意[0]
   var li = document.getElementsByClassName('b')[0];
   var a = document.getElementsByClassName('c')[0];//第三个参数默认是false,
   //是对事件冒泡过程添加函数进行处理
   div.addEventListener('click',function(event){console.log('div');
   });
   li.addEventListener('click',function(event){console.log('li');
   });
   a.addEventListener('click',function(event){console.log('a');
   });//事件捕获过程处理
   //第三个参数设为true
   div.addEventListener('click',function(event){console.log('div');
   },true);
   li.addEventListener('click',function(event){console.log('li');
   },true);
   a.addEventListener('click',function(event){console.log('a');
   },true);

   运行结果
   div
   li
   a
   a
   li
   div

   可知：首先是捕获阶段执行，再是冒泡阶段

5. 运用在事件委托上
   JavaScript事件代理可以把事件处理器添加到一个父元素上，这样就避免了把事件处理器添加到多个子元素上。

6. 阻止事件冒泡

   某个DOM节点绑定了某事件监听器，本来是想当该DOM节点触发事件，才会执行回调函数。结果是该节点的某后代节点触发某事件，由于事件冒泡，该DOM节点事件也会触发，执行了回调函数，这样就违背了最初的本意了。

   html

   <!-- 阻止事件冒泡 --><li class="aa"><a href="#" class="bb">阻止事件冒泡</a><a href="#" class="cc">cc</a></li>

   js

   var li1 = document.getElementsByClassName('aa')[0];
   li1.addEventListener('click',function(event){if(event.target.tagName.toLowerCase() === 'li'){console.log(event.target);}console.log(event.currentTarget);  //监听节点
   })
   for(var i=0;i<li1.children.length;i++){li1.children[i].addEventListener('click',function(event){event.stopPropagation();  //在子元素上阻止冒泡})
   }

   结果
   点击a标签时，没有任何反应，当点击li标签时，会输出对象

   注意：
   无法在捕获阶段阻止事件冒泡
   所以当上述代码加上true后，达不到效果