javascript事件学习（2）

2、事件流

事件流描述的是从页面接受事件的顺序，DOM2事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。

事件流

第一阶段：事件捕获阶段，从window对象传导到目标节点。

第二阶段：处于目标阶段，在目标节点上触发

第三阶段：事件冒泡阶段，从目标节点传回window对象

用户在点击网页时，浏览器总是默认事件的目标节点是点击位置最深层的元素。

事件各个阶段的触发测试：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件的三个阶段</title>
</head>
<body>
    <div>
        <input type="button" value="按钮1">
        <input type="button" value="按钮2">
    </div>    
</body>
<script>
    var oBtn = document.getElementsByTagName('input');
    var oDiv = document.getElementsByTagName('div');
    oBtn[0].addEventListener('click', function() {
        alert(event.eventPhase);
    }, false);
    oDiv[0].addEventListener('click', function() {
        alert(event.eventPhase);
    }, false);
    oBtn[1].addEventListener('click', function() {
        alert(event.eventPhase);
    }, true);
    oDiv[0].addEventListener('click', function() {
        alert(event.eventPhase);
    }, true);
</script>
</html>

常常利用事件冒泡的特性，把子节点的监听函数定义在父节点上，由父节点统一处理多个子节点的事件。这就是事件代理。

var ul = document.querySelector('ul');
ul.addEventListener('click', function() {
        if(event.target.tagName.toLowerCase() === li) {
            //some code
         }
    })

如果希望事件不再向上传播，可以使用stopPropagation()方法

p.addEventListener('click', function(event) {
    event.stopPropagation();
})

事件将不会再向p元素的父元素冒泡。但stopPropagation不会阻止p元素上其他的click事件的监听函数，可以使用stopImmediatePropagation方法。

posted @ 2015-12-17 15:52  yannanyan  阅读(138)  评论(0)  编辑  收藏  举报