//事件延迟//闭包//时间监听

<link rel="stylesheet" href="http://a.tbcdn.cn/apps/dts/th3/css/??public.css" />
<script src="http://a.tbcdn.cn/apps/dts/th3/js/??jquery.js"></script>
<style>
li{cursor:pointer;line-height: 24px; }
.cur{font-size:14pt;font-weight:700;}
</style>
<script>
/*~function fn(){
alert("settimeout")
setTimeout(function(){fn();},1000);
}();

$(document).ready(function() {
$('.nav li').click(function(){
var $this = $(this);
$this.addClass('cur').siblings().removeClass('cur');
})
});
*/
window.onload = function() {
var context = document.getElementById('nav'),
lis = context.getElementsByTagName('li'),
prevElement = null,
len = lis.length;

//alert(1=='1');
//alert(1==='1');
/*
context.onclick = test1;
context.onclick = test2;
*/

//事件延迟
var bindEvent = function(doc,eventType,fn) {
if (document.addEventListener) {
bindEvent = function(){
doc.addEventListener(eventType,fn,false);
};
}
else{
bindEvent = function(){
doc.attachEvent('on' + eventType,function(){return function(){fn.call(doc);}}(doc))
};
}
return bindEvent();
}

bindEvent(context,'click',function(e){
//alert(this.tagName);
var e = e || window.event,
target = e.target || e.srcElement;

if (target.tagName.toLowerCase() === 'li') {
if (prevElement) {
prevElement.className = '';
}
target.className = 'cur';
prevElement = target;
//test1();
}
});



/*
context.addEventListener('click',function(e){
var target = e.target || e.srcElement;
if (target.tagName.toLowerCase() === 'li') {
if (prevElement) {
prevElement.className = '';
}
target.className = 'cur';
prevElement = target;
test1();
}
},false);

context.addEventListener('click',function(e){
var target = e.target || e.srcElement;
if (target.tagName.toLowerCase() === 'li') {
if (prevElement) {
prevElement.className = '';
}
target.className = 'cur';
prevElement = target;
test2();
}
},false);
*/

function test1() {
alert(1);
}

function test2() {
alert(2);
}
}
</script>

<ul class="nav" id="nav">
<li>nav1</li>
<li>nav2</li>
<li>nav3</li>
</ul>
<ul class="content">
<li>content1</li>
<li>content2</li>
<li>content3</li>
</ul>
<style>