JavaScript 批量註冊事件處理函式

admin發表於2018-11-13
JavaScript事件函式

本文分享一段程式碼例項，實現了點選按鈕實現元素展開與收縮效果。

此程式碼並沒有手動挨個為元素註冊事件處理函式，而是通過批量自動完成。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
*{
  margin:0;
  padding:0;
}
h1{
  font:125% Arial, Helvetica, sans-serif;
  text-align:left;
  font-weight:bolder;
  background:#333;
  padding:3px;
  display:block;
  color:#99CC00
}
.box{
  width:40%;
  background:#CCC;
  position:relative;
  margin:0 auto;
  padding:5px;
}
span{
  position:absolute;
  right:10px;
  top:8px;
  cursor:pointer;
  color:yellow;
}
p{
  text-align:left;
  line-height:20px;
  height:300px;
  overflow:hidden;
  background:#333;
  padding:3px;
  margin-top:5px;
  color:#99CC00
}
</style>
<script>
function $(element){
  return element = document.getElementById(element);
}

function zhankai(p){
  var h=p.offsetHeight;
  var maxh=300;
  function dmove(){
    h+=50; //設定層展開的速度
    if(h>=maxh){
      p.style.height='300px';
      clearInterval(iIntervalId);
    }
    else{
      p.style.display='block';
      p.style.height=h+'px';
    }
  }
  iIntervalId=setInterval(dmove,2);
}

function shousuo(p){
  var h=p.offsetHeight;
  var maxh=300;
  function dmove(){
    h-=50;//設定層收縮的速度
    if(h<=0){
      p.style.display='none';
      clearInterval(iIntervalId);
    }else{
      p.style.height=h+'px';
    }
  }
  iIntervalId=setInterval(dmove,2);
}

function $use(p,span){
  if(p.style.display=='none'){
    zhankai(p);
    span.innerHTML='收縮';
  }else{
    shousuo(p);
    span.innerHTML='展開';
  }
}

window.onload=function(){
  let boxs=document.querySelectorAll(".box");
  for(let index=0;index<boxs.length;index++){
    let ospan=boxs[index].querySelector("span");
    let op=boxs[index].querySelector("p");
    ospan.onclick=function(){
      $use(op,ospan)
    }
  }
}
</script>
</head>
<body>
<div class="box">
  <h1>DIV層的展開隱藏效果</h1>
  <span>展開</span>
  <p></p>
</div>

<div class="box">
  <h1>DIV層的展開隱藏效果</h1>
  <span>展開</span>
  <p></p>
</div>
</body>
</html>

程式碼為span元素批量註冊click事件處理函式。

實現點選span元素，對應p元素展開和收縮效果。

相關文章