javascript 事件

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>事件捕获</title>
</head>
<body>
<!-- 事件捕获与事件冒泡事件流正好相反的顺序，事件捕获的事件流是最外层逐级向内传播，也就是先document，然后逐级div标签 ， span标签 , a标签; -->
    <div id="div">
        <span id="span">
            <a href="" id="aTag">事件测试</a>
        </span>
    </div>
</body>
<script type="text/javascript">
    document.getElementById('aTag').addEventListener('click',aTag,true);
    document.getElementById('span').addEventListener('click',span,true);
    document.getElementById('div').addEventListener('click',div,true);
    function aTag(e){
        alert('点击的是a标签');
    }
    function span(e){
        alert('点击的是span标签');
    }
    function div(e){
        alert('点击的是div标签');
    }
</script>
<!-- 第三个参数设置为true，即为捕获事件，默认为false；否则的话，事件流还是和上面的一样，因为不管是在IE还是标准浏览器下，事件冒泡浏览器都支持的。 -->
</html>

javascript 事件捕获

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>事件冒泡</title>
</head>
<body>
<!-- IE的事件流叫做事件冒泡，即事件开始时由最具体的元素(文档中嵌套最深的那个节点)接收，然后逐级向上（一直到文档）；如下代码： -->
    <div id="div">
        <span id="span">
            <a href="" id="aTag">事件测试</a>
        </span>
    </div>
</body>
<script type="text/javascript">
    document.getElementById('aTag').addEventListener('click',aTag);
    document.getElementById('span').addEventListener('click',span);
    document.getElementById('div').addEventListener('click',div);
    function aTag(e){
        alert('点击的是a标签');
    }
    function span(e){
        alert('点击的是span标签');
    }
    function div(e){
        alert('点击的是div标签');
    }
</script>
<!-- 当单击 “事件测试”文字后，那么click事件会按照如下顺序传播；

　　1)先打印出：点击的是a标签

　　2) 再打印出：点击的是span标签

　　3) 最后打印出：点击的是div标签

　　4)  最后肯定是document文档。


所有现代浏览器都支持事件冒泡 -->
</html>

javascript 事件冒泡

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>跨浏览器事件捕获</title>
</head>
<body>
    
</body>
<script type="text/javascript">
var EventUtil = {
    addHandler: function(element,type,handler) {
        if(element.addEventListener) {
            element.addEventListener(type,handler,false);
        }else if(element.attachEvent) {
            element.attachEvent("on"+type,handler);
        }else {
            element["on" +type] = handler;
        }
    },
    removeHandler: function(element,type,handler){
        if(element.removeEventListener) {
            element.removeEventListener(type,handler,false);
        }else if(element.detachEvent) {
            element.detachEvent("on"+type,handler);
        }else {
            element["on" +type] = null;
        }
    },
    getEvent: function(event) {
        return event ? event : window.event;
    },
    getTarget: function(event) {
        return event.target || event.srcElement;
    },
    preventDefault: function(event){
        if(event.preventDefault) {
            event.preventDefault();
        }else {
            event.returnValue = false;
        }
    },
    stopPropagation: function(event) {
        if(event.stopPropagation) {
            event.stopPropagation();
        }else {
            event.cancelBubble = true;
        }
    }
};
</script>
</html>

跨浏览器事件捕获