首页 > 网络编程 > JavaScript > javascript技巧 > JS注册事件

JS给元素注册事件的代码

2008-10-28 13:48:22 作者：

麦鸡的TAB切换功能代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>麦鸡的TAB</title> 
<style> 
body{margin:40px; font-size:12px;} 
p{font-size:200%} 
.macji-tab a{color:#777; text-decoration:none;} 
.macji-tab ul.macji-nav{ 
position:relative; 
height:24px; 
margin:0 0 -1px; 
padding:0; 
list-style:none; 
overflow:hidden; 
} 
.macji-tab ul.macji-nav li a,.macji-tab ul.macji-nav li a span{ 
background:url(http://img.jb51.net/images/mj_bg.gif) no-repeat; 
} 
.macji-tab ul.macji-nav li{ 
float:left; 
margin-right:2px; 
} 
.macji-tab ul.macji-nav li a{ 
float:left; 
height:24px; 
padding:0 0 0 15px; 
line-height:24px; 
background-position:0 100%; 
} 
.macji-tab ul.macji-nav li a span{ 
display:block; 
padding:0 15px 0 0; 
background-position:100% 100%; 
} 
.macji-tab ul.macji-nav li a.current{ 
background-position:0 0; 
} 
.macji-tab ul.macji-nav li a.current span{ 
color:#000; 
background-position:100% 0; 
} 
.macji-tab div.macji-tab-container{ 
border:solid 1px #ccc; 
overflow:hidden; 
} 
.macji-tab div.macji-tab-container span{ 
display:none; 
} 
.macji-tab .macji-frame{ 
width:715px; 
height:47px; 
padding:8px; 
border:medium none; 
} 
</style> 
</head> 
<body> 
<h1>麦鸡的TAB，仿淘宝便民中心</h1> 
<div class="macji-tab"> 
<ul class="macji-nav"> 
<li><a href="http://auction1.taobao.com/auction/expressway/game_card.htm?css=frontpage"><span>游戏快充 
</span></a></li> 
<li><a href="http://auction1.taobao.com/auction/expressway/mobile_card.htm?css=frontpage"><span>手机充值 
</span></a></li> 
<li><a href="http://www.taobao.com/expressway/et-auto.php"><span>机票</span></a></li> 
<li><a href="https://www.jb51.net"><span>脚本之家</span></a></li> 
</ul>

<div class="macji-tab-container"> 
<iframe name="macji-frame" src="http://auction1.taobao.com/auction/expressway/game_card.htm?css=frontpage" class="macji 
-frame" frameborder="0" scrolling="no"></iframe> 
</div> 
<div class="macji-tab-container"><span>这里是用来显手机充值的</span></div> 
<div class="macji-tab-container"><span>这里是用来显示机票的</span></div> 
<div class="macji-tab-container"><span>这里是用来显示麦鸡的博客</span></div> 
</div> 
<p><a href="https://www.jb51.net" title="脚本之家">脚本之家&raquo;</a></p> 
<script type="text/javascript"> 
// <![CDATA[ 
function MacjiTab(config) { 
/* 
config 
container tab容器 
eventType 触发事件类型 
currentClass 选中后的className 
num 表示默认显示第几个tab 
*/ 
config = { 
container: config.container || "macji-tab", 
eventType: config.eventType || "click", 
currentClass: config.currentClass || "current", 
num: config.num || 0 
};

this.c = getElementsByClassName(document, config.container, "div")[0]; 
this.lis = this.c.getElementsByTagName("ul")[0].getElementsByTagName("a"); 
this.divs = this.c.getElementsByTagName("div"); 
var _this = this;

//获取className元素,默认以浏览器原生的方法获取(FF3,Safari) 
function getElementsByClassName(node, name, type) { 
if (node.getElementsByClassName) 
return node.getElementsByClassName(name); 
else { 
var r = [], re = new RegExp("(^|\\s)" + name + "(\\s|$)"), e = (node || document).getElementsByTagName(type || "*"); 
for ( var i = 0; i < e.length; i++ ) { 
if( re.test(e[i].className) ) 
r.push(e[i]); 
} 
return r; 
} 
}

//阻止浏览器默认事件 
function preventDefault(ev) { 
if ( ev && ev.preventDefault ) 
ev.preventDefault(); 
else 
window.event.returnValue = false; 
}

//克隆已有的iframe，改变其src 
this.createElem = function(obj, n) { 
var elem = this.divs[0].getElementsByTagName("iframe")[0]; 
if (n != 0){ 
var newElem = elem.cloneNode(true); 
newElem.src = obj.href; 
this.divs[n].appendChild(newElem); 
} 
obj.href = "#"; 
obj["on" + config.eventType] = function(){ 
return _this.def(n); 
}; 
};

//注册事件 
this.register = function() { 
for ( var i = 0; i < this.lis.length; i++ ) { 
this.lis[i]["on" + config.eventType] = (function(i){ 
return function(e){ 
preventDefault(e); 
if ( i == 3 ){ 
alert("哈哈，即将跳转到我的博客去啦，留下你的PV吧，哈哈。。。"); 
return window.location.href = "https://www.jb51.net"; 
} 
_this.createElem(this, i); 
} 
})(i); 
}

};

//TAB 默认方法 
this.def = function(n, e) { 
n = n || config.num; 
for ( var i = 0; i < this.lis.length; i++ ) { 
this.lis[i].className = ""; 
this.divs[i].style.display = "none"; 
} 
this.lis[n].className = config.currentClass; 
this.divs[n].style.display = ""; 
};

this.init = function() { 
this.def(); 
return this.register(); 
}; 
} 
var test = new MacjiTab({eventType: "mouseover"}); 
test.init(); 
// ]] 
</script> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

JS给元素注册事件的代码

您可能感兴趣的文章: