js-mouse-event

by jack zhao

HTML

<ul class="ul" id="eventUl">
    <li>
        第一条,在Ul与第一个Li上添加mouseover事件捕获和冒泡的监听
    </li>
    <li>
        第二条
    </li>
    <li>
        第三条
    </li>
</ul>

<div class="jw log" id="j-jw-log">
    <div class="title">
        <span class="btn j-clear" title="清空控制台">C</span>
        <span class="btn j-fold" title="折叠/展开">F</span>
        <span class="text">页面控制台输出</span>
    </div>
    <div class="content" id="j-jw-log-content">
        
    </div>
</div>

CSS

.jw.log {
    background: #000;
    color: #fff;
    opacity: .8;
    filter: alpha(opacity=80);
    width: 320px;
    position: fixed;
    right: 5px;
    top: 5px;
    /*兼容IE6*/
    _position: absolute;
    _top: expression(eval(document.documentElement.scrollTop + 5));
}
.jw.log .title {
    font-size: 14px;
    background: #333;
    padding: 10px;
}
.jw.log .title .btn {
    display: inline-block;
    float: right;
    margin: 0 5px;
    padding: 0 5px;
}
.jw.log .title .btn:hover {
    background: #007902;
    cursor: pointer;
}
.jw.log .content {
    line-height: 21px;
    font-size: 12px;
    min-height: 20px;
    overflow: auto;
    padding: 5px;
    max-height: 500px;
    _height: 500px;
}

.ul {
    width: 50%;
    background: #ccc;
    padding: 30px;
    margin: 0;
}

.ul li {
    margin: 15px;
    background: #84cf39;
    color: #fff;
    list-style: none;
    padding: 5px;
}

JavaScript

var $ = function(elmID) {
    return document.getElementById(elmID);
}
var getNodeName = function(e) {
    var e = e || window.event;
    return e.target?e.target.nodeName:e.srcElement.nodeName;
}
//页面控制台的初始化
var initLog = function() {
    var logContainer = $('j-jw-log');
    var logContent = $('j-jw-log-content');
    var btns = logContainer.getElementsByTagName('span');
    for (var i = 0, len = btns.length; i < len; i++) {
        if (btns[i].className.indexOf('j-clear') > -1) {
            btns[i].onclick = function() {
                logContent.innerHTML = '';
            }
        } else if (btns[i].className.indexOf('j-fold') > -1) {
            btns[i].onclick = function() {
                if (logContent.offsetHeight > 30) {
                    logContent.style.height = '0px';
                } else {
                    if (logContent.style.removeProperty === undefined) {
                        logContent.style.height = '500px';
                    } else {
                        logContent.style.removeProperty('height');
                    }
                }
                
            }
        }
    }
    return function(str, hasBr) {
        logContent.innerHTML += str + (hasBr === false ? '' : '<br/>');
    }
}
var attachEventName = window.addEventListener ? 'addEventListener' : 'attachEvent';
var mouseoverName = window.addEventListener ? 'mouseover' : 'onmouseover';

window.onload = function() {
    var log = initLog();
    var ul = $('eventUl');
    var ulBubbling = function(e) {
        log(' <br/>绑定在ul上的mouseover（冒泡），事件的触发来自' + getNodeName(e) + '标签，');
    };
    var ulCapturing = function(e) {
        log(' <br/>绑定在ul上的mouseover（捕获），事件的触发来自' + getNodeName(e) + '标签，');
    };
    
    var firstLiBubbling = function(e) {
        log(' <br/>绑定在第一个Li上的mouseover（冒泡），事件的触发来自' + getNodeName(e) + '标签，');
    };
    var firstLiCapturing = function(e) {
        log(' <br/>绑定在第一个Li上的mouseover（捕获），事件的触发来自' + getNodeName(e) + '标签，');
    };
    
   ...