JS给元素注册事件的代码

时间：2021-03-05 12:43:46|栏目：JavaScript代码|点击：次

<!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需再刷新一下页面才能执行]

上一篇：javascript 单选框，多选框美化代码

栏目：JavaScript代码

下一篇：JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法

本文标题：JS给元素注册事件的代码

本文地址：http://www.codeinn.net/misctech/74860.html

更多JavaScript代码

JavaScript代码

JS给元素注册事件的代码

阅读排行

推荐教程