addEventListener(),封装取消冒泡的函数stopBubble(event)

1冒泡事件是结构上的向外冒泡

捕获事件是结构上向里捕获

那么冒泡事件和捕获事件谁先执行啊

 var wrapper =document.getElementsByClassName('wrapper')[0];
 var content =document.getElementsByClassName('content')[0];
 var box =document.getElementsByClassName('box')[0];          		  		     					
 wrapper.addEventListener('click',function(){
               console.log('wrapperBubble')//1
           },true)
           content.addEventListener('click',function(){
               console.log('content')//5
           },false)
           content.addEventListener('click',function(){
               console.log('contentBubble')//2
           },true)
           wrapper.addEventListener('click',function(){
               console.log('wrapper')//7
           },false)
           box.addEventListener('click',function(){
               console.log('boxBubble')//3
           },true)

           wrapper.addEventListener('click',function(){
               console.log('wrapper')//8
           },false)
           content.addEventListener('click',function(){
               console.log('content')//6
           },false)
           box.addEventListener('click',function(){
               console.log('box')//4
           },false)

先捕获后冒泡,而且冒泡的执行顺序是先里后外,与代码行数无关

阻止冒泡事件,w3c标准规则 event.stopPropagation()

  <div class="wrapper">
        </div>
       <script>
            document.onclick=function(){
                console.log('你闲的呀')
            }
           var wrapper =document.getElementsByClassName('wrapper')[0];
           wrapper.onclick=function(){
               this.style.background="green"
           }
       </script>

如果你打印e 的话,会得出一个mouseEvent的对象,在这个对象里会有一个stopPropagation,以及cancelBubble ,然而其实我没有找到前者

e.stopPropagation(); e.cancelBubble='true'
ie独有的event.cancelBubble = true;但是谷歌也已经实现了

封装取消冒泡的函数stopBubble(event)

          function stopBubble(event){
               if(event.stopPropagation){
                   event.stopPropagation();
               }else{
                   event.cancelBubble=true;
               }
           }
//然后在需要的地方放入stopBubble()

阻止默认事件

document.oncontextmenu=function(event){
      1         return false;//阻止了右键单击默认出菜单事件
         2        event.preventDefault();//ie9一下不兼容
       3        event.returnValue=false;//兼容IE
           }

封装一个默认阻止的函数

			function cancelHandler(event){
               if(event.preventDefault){
                 	  event.preventDefault()
               }else if(event.returnValue){
               		 event.returnValue=false;
               }
           }

a标签的阻止默认事件

<a href="http://www.baidu.com">www.baidu.com</a>
a标签被点击一下会回顶或者刷新页面
这个跳转功能是a标签的 默认事件，我们时常得把a标签的默认事件取消

var a= document.getElementsByTagName('a')[0];
            a.onclick=function(){
                return flase;
            }

也可以这样

   ` <a href="javascript:viod(flase)">demo</a>`

1,viod操作符指定要计算一个表达式但是不返回值 链接这样可以在点击这个链接的时候不触发跳转效果！
另外直接不写href也可以达到不跳转效果！但是因为用到链接a标签一般都需要悬浮小手效果，不写href的时候在一些浏览器里面并不承认a的cursor效果！

href="#"与href="javascript:void(0)"的区别

#包含了一个位置信息，默认的锚是#top 也就是网页的上端。

而javascript:void(0), 仅仅表示一个死链接。

在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id。

如果你要定义一个死链接请使用 javascript:void(0) 。

void()仅仅是代表不返回任何值，但是括号内的表达式还是要运行，

例如viod(alter (“aba”))