一.模拟select下拉菜单的一个动作

    点击显示按钮，显示box，点击document区域，隐藏box

    // var btn = document.querySelector(‘button’);

    // var box = document.querySelector(‘.box’);

    // btn.onclick = function() {

    // box.style.display = ‘block’;

    // };

    // document.onclick = function() {

    // box.style.display = ‘none’;

    // }

    上面的代码是无法实现我们想要的效果的，因为事件冒泡，会把事件逐级向上传递，直到document节点，所以我们的点击事件本来是想让他发生在btn按钮上的，但是因为点击事件向上传递到document节点，所以就和document节点的点击事件合并了，如果两个的点击事件的处理语句有冲突部分，document上的处理语句作为最后加入的处理语句，会将上面与他冲突的处理语句覆盖掉，这也符合JS语句从上至下执行的规定。

    也就是出现冒泡，btn的事件会冒泡到document上面

    二.取消冒泡和捕获：让当前操作的具体元素对象（冒泡元素）的事件不会冒泡到父级（外层）。

    标准取消冒泡和捕获：

    方式一：event.stopPropagation();

    该方式只阻止事件的冒泡，不阻止事件本身。

    方式二：return false;

    该方式不止阻止事件冒泡，还阻止事件本身。

    非标准： event.cancelBubble=true;

    注意：事件冒泡和捕获的前提—事件和事件类型相同 父子元素关系。

    // var btn = document.querySelector(‘button’);

    // var box = document.querySelector(‘.box’);

    // btn.onclick = function(e) {

    // box.style.display = ‘block’;

    // e.stopPropagation(); //取消冒泡

    // };

    // document.onclick = function() {

    // box.style.display = ‘none’;

    // };

    一.普通事件

    普通事件：一个元素对象上面仅能绑定一个事件处理函数，如果绑定多个下面的会覆盖上面的。

    普通事件：也叫DOM 0级事件。

    // var box = document.querySelector(‘.box’);

    // box.onclick = function() {

    // console.log(‘张三同事写的代码’);

    // };

    // box.onclick = function() {

    // console.log(‘李四同事写的代码’);

    // };

    取消普通事件：赋值为null

    // box.onclick = null;

    二.事件绑定(事件侦听)

    事件绑定：也叫DOM 2级事件。DOM 1级事件是个标准或者规范，无需代码实现。

    1.事件绑定：一个元素对象上面可以绑定多个事件处理函数,顺序执行。

    标准浏览器：addEventListener(事件类型,事件处理函数,是否捕获)

    事件类型：不带on,前面不带on字符

    事件处理函数：函数名或者函数体

    是否捕获：默认是冒泡(false)，设为true表示捕获。

    // var box = document.querySelector(‘.box’);

    // function zhangsan() {

    // console.log(‘张三同事写的代码’);

    // }

    // box.addEventListener(‘click’, zhangsan);

    // box.addEventListener(‘click’, function() {

    // console.log(‘李四同事写的代码’);

    // });

    // box.addEventListener(‘click’, function() {

    // console.log(‘王五同事写的代码’);

    // });

    2.取消事件绑定

    弊端：如果是匿名的事件处理函数，无法取消的，匿名函数和匿名函数之间无法匹配

    target.removeEventListener(“事件类型”, 函数, 是否捕获(布尔值))

    注意：移除事件监听的参数和添加事件监听的参数是一致的

    // box.removeEventListener(‘click’, zhangsan);

    三.IE浏览器的事件绑定和取消

    target.attachEvent() —IE浏览器事件监听

    target.detachEvent() —IE浏览器取消监听

    总结：

    事件绑定能够取代普通事件，但是反之不行(DOM 2级事件取代DOM 0级事件,反之不行)

    普通的事件使用return false阻止默认行为，事件绑定下面不能使用，只能使用event.preventDefault() 或者event.returnValue = false