JS给元素注册事件的办法

最新推荐文章于 2023-03-16 15:57:10 发布

veiny

最新推荐文章于 2023-03-16 15:57:10 发布

阅读量981

点赞数

分类专栏： .NET 文章标签： function class iframe div xhtml safari

本文链接：https://blog.csdn.net/veiny/article/details/3165117

版权

.NET 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

<body>
<div id="good" style="height:100px; width:100px;background:#323923"></div>
<script>
document.getElementById("good").attachEvent("onclick", function() {alert("haha");});
</script>
</body>
<!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=utf-8" />
<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://www.macji.com/img/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="http://www.macji.com/blog/"><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="http://www.macji.com" title="回到麦鸡的博客">回到麦鸡的博客»</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 = "http://www.macji.com";
     }
     _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>

veiny

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS给元素注册事件的办法

body>div id="good" style="height:100px; width:100px;background:#323923">div>script>document.getElementById("good").attachEvent("onclick", function() {alert("haha");});script>body>htt
复制链接

扫一扫