一言以蔽之，曰：“先捕获，后冒泡！”
该代码只适合于有addEventListener方法的浏览器，没有做判断和容错，使用方法为：拷贝代码并保存为xxx.html，用浏览器运行，点击中间的click me，于是有了一个动画效果，很粗糙，只为了庆祝程序员节。
该代码只适合于有addEventListener方法的浏览器，没有做判断和容错，使用方法为：拷贝代码并保存为xxx.html，用浏览器运行，点击中间的click me，于是有了一个动画效果，很粗糙，只为了庆祝程序员节。
<!DOCTYPE html>
<html>
<head>
<title>Capture & Bubble</title>
<style type="text/css">
div { float: left;border: 1px solid #CCC;padding: 30px;background-color: #FFF; text-align: center; vertical-align: middle;}
</style>
</head>
<body>
<div>
<div>
<div>
<div>
<div style="width:100px; height:100px; line-height: 100px; cursor:pointer;">Click Me</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var divList = document.getElementsByTagName('div');
var timer = 0;
for (var i = 0, len = divList.length; i < len; i ++) {
(function(j) {
var divNode = divList[j];
var changeBg = function(type) {
if (!divNode.getAttribute('hasClicked')) {
divNode.setAttribute('hasClicked', 0);
}
var hasClicked = divNode.getAttribute('hasClicked') - 0;
if (hasClicked <= 2) {
hasClicked ++;
divNode.setAttribute('hasClicked', hasClicked);
timer ++;
if (hasClicked == 1) {
window.setTimeout(function() {
divNode.style.backgroundColor = '#444';
console.log(type);
}, timer * 1000);
} else {
window.setTimeout(function() {
divNode.style.backgroundColor = '#FFF';
divNode.setAttribute('hasClicked', 0);
console.log(type);
}, timer * 1000);
}
}
};
divNode.addEventListener('click', function(e) {
// capture
changeBg('capture');
}, true);
divNode.addEventListener('click', function(e) {
// bubble
changeBg('bubble');
}, false);
})(i);
}
</script>
</body>
</html>
284
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
