关于DOM事件的一个例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>event</title>
    <style>
        .target {
            float: left;
            width: 100px;
            height: 100px;
            background: #359;
        }
        .outer-div {
            display: none;
            float: left;
            width: 150px;
            height: 80px;
            border: 1px solid #888;
        }
        .inner-div {
            float: left;
            width: 80px;
            height: 50px;
            background: #194;
        }
    </style>
</head>
<body>
    <!-- single -->
    <div class="target"></div>
    <div class="outer-div">
        <div class="inner-div"></div>
    </div>

    <!-- // mutil -->
    <ul>
        <li>
            <div class="target"></div>
        </li>
    </ul>
<script type="text/javascript">
    /**
     *    知识点，事件捕获、执行、冒泡
     *    #指定捕获过程发生 
     *        addEventListener(event, func, useCapture) 
     *        useCapture：是否在捕获阶段触发？默认false
     *    #阻止继续捕获
     *        (w3c)
     *        window.captureEvents(Event.eventType) 
     *        window.releaseEvents(Event.eventType)
     *        (IE)
     *        object.setCapture()
     *        object.releaseCapture()
     *    #阻止继续冒泡
     *        event.stopPropagation()、
     *        (IE)event.cancelBubble = true;
     *    #不能冒泡的事件
     *    mouseenter、mouseleave、focus、blur
     */
    
    var timer = null;
    var target = document.querySelector('.target');
    var outer = document.querySelector('.outer-div');
    var inner = document.querySelector('.inner-div');

    inner.addEventListener('click', function(event) { console.log('click inner')}, false);

    target.addEventListener('mouseenter', function(event) {
        openOuter();
    });
    target.addEventListener('mouseleave', closeOuter);

    outer.addEventListener('mouseenter', function(event) {
        console.log('enter outer');
        openOuter();
    });
    outer.addEventListener('mouseleave', function(event) {
        console.log('leave outer');
        closeOuter();
    });
    inner.addEventListener('mouseenter', function(event) { console.log('enter inner'); });
    inner.addEventListener('mouseleave', function(event) { console.log('leave inner'); });

    function openOuter() {
        clearTimeout(timer);
        outer.style.display = 'block';
    }

    function closeOuter() {
        timer = setTimeout(function() {
            outer.style.display = 'none'; 
        }, 200);
    }
</script>
</body>
</html>

<!-- single -->
    <div class="target"></div>
    <div class="outer-div">
        <div class="inner-div"></div>
    </div>