阻止事件冒泡、捕获、和默认事件

阻止事件冒泡、捕获的方法：e.stopPropagation();

阻止默认事件发生的方法：e.preventDefault();

默认事件就是就是浏览器自带的，不是我们写的方法，比如，你滑动浏览器滚动条的时候，页面会向下滚动！这是就是默认事件！

------------------------------------------------------------------------------------------------------------------------------------

先看这个事件监听的写法：obj.addEventListener(event,fn,useCapture)

obj     : 触发事件对象

event：事件名

fn       : 执行函数

useCapture:事件类型。 false表示：冒泡。true表示：捕获     默认情况是false

-------------------------------------------------------------------------------------------------------------------------------------

实例：

body中：

<div id="a">
    <div id="b"></div>
</div>

写上js：

<span style="font-family:Microsoft YaHei;font-size:14px;">    <script>
        window.onload=function(){
            a.addEventListener('click',function(e){
                alert("你点击了a");
            }) ;
            b.addEventListener('click',function(e){
                alert("你点击了b");
            }) ;
            document.addEventListener('click',function(e){
                alert("你点击了document")
            }) ;
        }
    </script></span>

上面的DIV结构是(按层次)：document包含a,a包含b。即：document->a->b

此时我们点击最里面的b。页面会弹出  ‘你点击了b’    然后再弹出  ‘你点击了a’  然后还会弹出 ‘你点击了document ’

就是这是事件冒泡。

事件从最里层开始向外触发。

------------------------------------------------------------------------------------------------------------------------------------

阻止方式：e.stopPropagation();

对b事件进行修改：

<span style="font-family:Microsoft YaHei;">b.addEventListener('click',function(e){</span>

<span style="font-family:Microsoft YaHei;">              <span style="color:#ff0000;">  e.stopPropagation();</span>
                alert("你点击了b");
            }) ;</span>

此行，页面就是只弹出一个 ‘你点击b’。阻止了事件向外传播。

-------------------------------------------------------------------------------------------------------------------------------------

现在看事件捕获。

先将例子改造成事件捕获的形式：就是监听事件函数里多放个参数 true

   <span style="font-family:Microsoft YaHei;"> <script>
        window.onload=function(){
            a.addEventListener('click',function(e){
                alert("你点击了a");
            },<span style="color:#ff0000;">true</span>) ;
            b.addEventListener('click',function(e){
                alert("你点击了b");
            },<span style="color:#ff0000;">true</span>) ;
            document.addEventListener('click',function(e){
                alert("你点击了document")
            },<span style="color:#ff0000;">true</span>) ;
        }
    </script></span>

这个时候你再点击b 就会依次出现 ‘你点击了document ’    然后再弹出  ‘你点击了a’最后是‘你点击了b’   

即：事件从外向里传播。

然后阻止事件传播的方法仍是一样的：用e.stopPropagation();

现在我们给a加上e.stopPropagation();

<span style="font-family:Microsoft YaHei;">a.addEventListener('click',function(e){</span>

<span style="font-family:Microsoft YaHei;"><span style="font-size:14px;">                      e.</span><span style="font-size:14px;">stopPropagation</span><span style="font-size:14px;">();</span>
                alert("你点击了a");
            },<span style="color: rgb(255, 0, 0);">true</span>) ;</span>

即行结果：弹出‘你点击了document ’  然后弹出‘你点击了a’   就结束了。

-----------------------------------------------------------------------------------------------------------------------------------

因为最近在学一个效果，弹出层！

1. 就是点击一个按钮

2. 弹出一个DIV弹出层 。

3. 点击DIV弹出层以外的地方，关闭这个DIV。

在第3步这里，当我们在点击DIV以外的地方的时候，body中基本都还有其它的链接等触发事件存在。我们不希望触发这些事件。这个时候就可以将body的点击事件转换为捕获的形式。然后再body    e.stopPropagation();   这样就可以关闭弹出层，又不会触发其它的事件了。

-------------------------------------------------------------------------------------------------------------------------------------

关闭默认事件

在做弹出层的时候，当弹出弹层的时候，我们希望背景body不滚动。

这个时候就会用到  阻止默认事件发生的方法：e.preventDefault();

用法跟e.stopPropagation();一样的。

一时没想到好的例子。下次想到了，再补上！