var $ = function(elmID) { return document.getElementById(elmID); } var getNodeName = function(e) { var e = e || window.event; return e.toElement.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) + '标签,'); }; ul[attachEventName](mouseoverName, ulBubbling); ul[attachEventName](mouseoverName, ulCapturing, true); var lis = ul.getElementsByTagName('li'); lis[0][attachEventName](mouseoverName, firstLiBubbling); lis[0][attachEventName](mouseoverName, firstLiCapturing, true); }
<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>
.jw.log { background: #000; color: #fff; opacity: .8; filter: alpha(opacity=80); width: 320px; position: fixed; right: 5px; top: 5px; /*兼容IE6*/ _position: absolute; _top: 9px; } .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; }