js事件处理模型——事件冒泡、捕获

事件冒泡：

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

<div class="wrapper">
    wrapper
    <div class="content">
        content
        <div class="box">box</div>
    </div>
</div>

<script>
    var wrapper = document.getElementsByTagName('div')[0];
    var content = document.getElementsByTagName('div')[1];
    var box = document.getElementsByTagName('div')[2];

    wrapper.addEventListener('click', function () {
        console.log('wrapper');
    }, false);
    //wrapper

    content.addEventListener('click', function () {
        console.log('content');
    }, false);
    //content
    //wrapper

    box.addEventListener('click', function () {
        console.log('box');
    }, false);
    //box
    //center
    //wrapper

</script>

---

事件捕获：

addEventListener第三参数为true时，发生事件捕获
只有Google Chrome上可以实现事件捕获;
新版本的火狐也有时间捕获

结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，自父元素捕获至子元素（事件源元素）。（自向上）

注:一对象的一个事件类型只能遵循一种事件模型，不能同时存在

wrapper.addEventListener(click', test, false);
//把这里的false变成true；他的事件处理模型就会变成捕获；

<script>
    var wrapper = document.getElementsByTagName('div')[0];
    var content = document.getElementsByTagName('div')[1];
    var box = document.getElementsByTagName('div')[2];

    wrapper.addEventListener('click', function () {
        console.log('wrapper');
    }, true);
    //wrapper事件执行
    content.addEventListener('click', function () {
        console.log('content');
    }, true);
    //wrapper事件捕获
    //content事件执行

    box.addEventListener('click', function () {
        console.log('box');
    }, true);
    //wrapper事件捕获
    //content事件捕获
    //box事件执行


</script>

同一个对象上面同一个事件处理类型，绑定了两个事件处理函数，一个符合事件冒泡，一个符合事件捕获，他么的触发顺序是先捕获，后冒泡

    var wrapper = document.getElementsByTagName('div')[0];
    var content = document.getElementsByTagName('div')[1];
    var box = document.getElementsByTagName('div')[2];

    wrapper.addEventListener('click', function () {
        console.log('wrapperBubble');
    }, false);
    content.addEventListener('click', function () {
        console.log('contentBubble');
    }, false);
    box.addEventListener('click', function () {
        console.log('boxBubble');
    }, false);


    wrapper.addEventListener('click', function () {
        console.log('wrapper');
    }, true);
    content.addEventListener('click', function () {
        console.log('content');
    }, true);
    box.addEventListener('click', function () {
        console.log('box');
    }, true);

点击wrapper区域	点击content区域	点击box区域
wrapperBubble事件执行	wrapper事件捕获	wrapper 事件捕获
wrapper 事件执行	contentBubble事件执行	content 事件捕获
	content事件执行	boxBubble 事件执行
	wrapperBubble事件冒泡	box 事件执行
		contentBubble 事件冒泡
		wrapperBubble 事件冒泡

注 : focus，blur，change，submit，reset，select 等事件不冒泡

其他形式的捕获

非事件处理模型，而是真实的事件获取的过程；用于解决拖拽鼠标容易超出div范围
仅在IE中能用

div.setCapture();执行这个方法，div会获取，会捕获页面中发生的所有事件，捕获到自己身上来，即使是在div外部的事件，也算是在div上面触发的。

用完这个之后；要用div.releaseCapture();来释放；

取消冒泡

W3C标准 event.stopPropagation();但不支持ie9以下版本

    document.onclick =function () {
        console.log('你闲的呀！')
    }
    var div = document.getElementsByTagName('div')[0];
    div.onclick = function (e) {
        e.stopPropagation();
        this.style.background = 'green';
    } //div变绿，但是不执行docunment上面的事件了，说明冒泡被取消了；

IE上的方法 event.cancelBubble = true;

    document.onclick =function () {
        console.log('你闲的呀！')
    }
    var div = document.getElementsByTagName('div')[0];
    div.onclick = function (e) {
        e.cancelBubble = true;
        this.style.background = 'green';
    }  //div变绿，但是不执行docunment上面的事件了，说明冒泡被取消了；

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

function stopBubble(event) {
    if(event.stopPropagation) {
        event.stopPropagation();
    }else{
        event.cancelBubble = true;
    }
}

---

阻止默认事件:

默认事件 — 表单提交，a标签跳转，右键菜单等
1.return false; 以对象属性的方式注册的事件才生效

document.oncontextmenu = function () {
    console.log('a');
    return false; //取消右键出菜单事件；
                  //如果return false写在上面，console.log('a')就不会执行
}

只有以句柄的方式绑定的事件才能用retur false 取消默认事件

2.event.preventDefault(); W3C标注，IE9以下不兼容

document.oncontextmenu = function (e) {
    console.log('a');
    e.[reventDefault();
}

3.event.returnValue = false; 兼容IE

document.oncontextmenu = function (e) {
    console.log('a');
    e.returnValue = false;
}

给<a>标签取消默认事件

1.  a.onclick = function () { return false }
2.  <a href="javascript:void(false)">demo</a>
3.  <a href="javascript:alert('a')">demo</a> //可以在行间设置js语法

封装阻止默认事件的函数 cancelHandler(event);

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