JavaScript之事件的处理模型---事件冒泡，捕获及取消冒泡，阻止默认事件

        在时间处理机制上分为两种：一种是事件冒泡，一种是事件捕获。而这两种中机制，一个事件对象只能触发一种事件处理模型，要么冒泡，要么捕获。

        所谓事件对象：在事件处理函数里面写一个形参，系统会自动的传进来一个事件对象。

        事件冒泡

            结构上（非视觉上）嵌套父子关系的元素，会存在事件冒泡的功能。即。同一时间，由子元素冒泡向父元素（自下而上）。

        

var wrapper = document.getElementsByClassName('wrapper')[0],
                        content = document.getElementsByClassName('content')[0],
                        box = document.getElementsByClassName('box')[0];
                    wrapper.addEventListener('click', function () {
                        console.log('wrapper1')
                    }, false);
                    content.addEventListener('click', function () {
                        console.log('content1')
                    }, false);
                    box.addEventListener('click', function () {
                        console.log('box1')
                    }, false);

            在上述代码中   元素的嵌套关系是 wrapper>content>box,所以当我们点击wrapper所在的区域的时候只会出现wrapper1，当我们点击content所在区域的时候，会出现content1 wrapper1 ，当我们点击box所在的区域的时候会出现 box1 content1 wrapper1。这就是事件的冒泡机制。

            注：focus，blur，change，submit，reset，select等事件不能冒泡。

         事件捕获

            在结构上（非视觉上）存在嵌套关系的袁旭，存在事件捕获的机制。即，同一时间自父元素捕获至子元素（事件源元素），（自顶向下）。IE没有捕获机制。触发事件捕获只要把addEventListener（事件类型，处理函数，false）第三个参数的false改成true就可以。

var wrapper = document.getElementsByClassName('wrapper')[0],
                        content = document.getElementsByClassName('content')[0],
                        box = document.getElementsByClassName('box')[0];
                    wrapper.addEventListener('click', function () {
                        console.log('wrapper2')
                    }, true);
                    content.addEventListener('click', function () {
                        console.log('content2')
                    }, true);
                    box.addEventListener('click', function () {
                        console.log('box2')
                    }, true);

        当我们点击wrapper区域的时候 ，会出现 wrapper2。当我们点击content区域的时候会出现wrapper2 content2。当我们点击box区域的时候，会出现wrapper2 content2 box2 。

            触发顺序： 

            当我们用两个相同的事件同时触发冒泡和捕获的时候，例如上面两个代码，当我们点击box区域  会出现   wrapper2 content2 box1 box2 content1  wrapper1。

            所以我们会发现:触发顺序是先捕获再冒泡。因为我们点击的box区域所以box算事件执行box1先定义、box2后定义，即事件执行先定义先触发。

        取消冒泡

        在我们编程过程中有时候我们不想让这个机制出现，不想冒泡，所以就出现了取消冒泡。

        上面我们说：所谓事件对象：在事件处理函数里面写一个形参，系统会自动的传进来一个事件对象。而在IE浏览器中，这个对象不会这样传过来，而是传到window下的一个event属性里面。所以我们做兼容性处理的时候必须运用到这一点。

        1.W3C标准 e.stopPastopPropagation（）；不支持IE9以下版本。

document.onclick = function(){
console.log("b");
}
var div = document.getElementsByTagName('div')[0];
div.onclick = function(e){
e.stopPropagation();
console.log("a");
}

        2.IE独有，e.canclelBubble = true   Chrome 也能实现

document.onclick = function(){
console.log("b");
}
var div = document.getElementsByTagName('div')[0];
div.onclick = function(e){
var e = e || window.event;
e.cancleBubble = true;
console.log('a');
}

        封装兼容性方法取消冒泡

function stopBubble(e){
      var e = e || window,event;
      if(e.stopPropagation){
           e.stopPropagation();
      }else{
          e.cancleBubble = true;
      }
}

        阻止默认事件

            在我们变成过程中会有些系统默认的事件，比如说：表单提交，a标签跳转，右键点击出现菜单等等。当我们编程实现功能时候我们不想要这些东西，所以我们要组织这些默认事件。

            oncontextmenu 事件是右键点击显示菜单事件。

            1.return false  这种阻止以对象的属性注册的事件才会生效            

document.oncontextmenu = fucntion(){
return false;
}

            2.e.preventDefault();W3C标准，IE9比兼容

document.oncontextmenu = function(e){
e.preventDefault();
}

            3.returnValue = false 兼容IE

document.oncontextmenu = fucntion(e){
 e.retrunValue = false;
}

        封装兼容性阻止默认事件

function cancleHandler(e){
var e = || window.event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
}

JavaScript语言我个人感觉是最有意思的了，我也是一个初学者，遇到问题，喜欢在博客上分享，也希望能帮到大家。

一个初学者，有什么不足或者纰漏的话，希望在下面评论出来，相互学习，共同进步。

--主页传送门--