利用Javascript怎么編寫一個(gè)單選框功能

發(fā)布時(shí)間：2020-12-10 14:21:42 來源：億速云閱讀：340 作者：Leah 欄目：開發(fā)技術(shù)

本篇文章為大家展示了利用Javascript怎么編寫一個(gè)單選框功能，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

1.事件委托

事件委托: 事件代理, 將子節(jié)點(diǎn)要做的事情交給父元素來做

原理: 將原來要給子元素添加的事件, 加給父元素, 事件中通過 target || srcElement 找到對(duì)應(yīng)的子節(jié)點(diǎn), 子節(jié)點(diǎn)處理具體的操作

優(yōu)點(diǎn): 避免使用for 后續(xù)加進(jìn)來的元素也有同樣的事件處理

使用: 如果子節(jié)點(diǎn)有統(tǒng)一的事件(每一個(gè)li都加點(diǎn)擊事件每一個(gè)li都輸出元素)

ul.onclick = function(evs){
 var ev = window.event || evs;
 // console.log(ev.target || ev.srcElement);
 var tar = ev.target || ev.srcElement;
 tar.style.background = 'red';
}

// 創(chuàng)建節(jié)點(diǎn)
var li = document.createElement('li');
li.innerHTML = '12345';
// 追加進(jìn)去
ul.appendChild(li);

2.阻止冒泡

由于冒泡產(chǎn)生的問題阻止冒泡解決

依賴于事件對(duì)象

標(biāo)準(zhǔn): ev.stopPropagation();

 ie: ev.cancelBubble = true;

一個(gè)是方法一個(gè)是屬性需要做兼容

判斷方法是否存在:

ev.stopPropagation &#63; ev.stopPropagation() : ev.cancelBubble = true;

不想讓哪一個(gè)事件冒泡，就在那一個(gè)元素的事件上阻止

代碼實(shí)現(xiàn)：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>模擬單選框</title>
 <style>
  *{
   margin: 0;
   padding: 0;
  }
  div{
   width: 260px;
   height: 30px;
   border: 1px solid #0000ff;
   margin: 40px auto;
   font: 14px/30px "微軟雅黑";
   text-indent: 5px;
  }
  ul{
   width: 260px;
   height: 150px;
   border: 1px solid #0000ff;
   margin: -40px auto;
   display: none;
  }
  ul > li{
   list-style: none;
   width: 100%;
   height: 30px;
   font: 14px/30px "微軟雅黑";
   text-indent: 5px;
  }
  ul > li:hover{
   color:#fff5bd;
   background: #fe6601;
  }
 </style>
</head>
<body>
 <!-- 1.布局: div 和 列表 并且劃上加背景色 -->
 <div id="content"></div>
 <ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>HTML5</li>
  <li>CSS3</li>
 </ul>
 <script>
  // 點(diǎn)擊每一個(gè)li 將li的內(nèi)容賦值給 div 給當(dāng)前點(diǎn)擊的li加上背景色
  // 點(diǎn)擊空白部分隱藏
  // 1.當(dāng)鼠標(biāo)移入div時(shí), ul顯示, 反之ul隱藏
  // 獲取div, ul
  var div = document.querySelector('div');
  var ul = document.querySelector('ul');
  var lis = ul.getElementsByTagName('li');
  console.log(div, ul, lis);
  // 鼠標(biāo)移入div時(shí), ul顯示, onmouseenter不會(huì)觸發(fā)父元素事件
  div.onmouseenter = function(){
   ul.style.display = 'block';
   /* 將li的內(nèi)容賦值給 div 給當(dāng)前點(diǎn)擊的li加上背景色
   獲取點(diǎn)擊的li的值 */  
   // 獲取ul點(diǎn)擊事件
   ul.onclick = function(evs){
    // 增加排他操作
    for(var i = 0; i < lis.length; i++){
     lis[i].style.background = '#ffffff';
     lis[i].style.color = '#000000';
    }
    // 獲取事件
    var ev = window.event || evs;
    // 阻止冒泡
    ev.stopPropagation &#63; ev.stopPropagation() : ev.cancelBubble = true;
    // console.log(ev.target || ev.srcElement);
    // 獲取事件的觸發(fā)源
    var tar = ev.target || ev.srcElement;
    // div的內(nèi)容更改為相對(duì)應(yīng)觸發(fā)源的內(nèi)容
    div.innerHTML = tar.innerHTML;
    // 給當(dāng)前點(diǎn)擊的li加上背景色
    tar.style.background = '#0000FF';
    tar.style.color = '#fff5bd';
   }
  }
  // 點(diǎn)擊空白處隱藏
  document.onclick = function(){
   // ul消失
   ul.style.display = 'none';
   // div的值設(shè)為空
   div.innerHTML = '';
   // 所有l(wèi)i恢復(fù)原來樣式 
   for(var i = 0; i < lis.length; i++){
    lis[i].style.background = '#ffffff';
    lis[i].style.color = '#000000';
   }
  }
  // 給每一個(gè)li添加劃上屬性
  for(var i = 0; i < lis.length; i++){
   // 為li添加劃上事件
   lis[i].onmouseenter = function(){
    this.style.background = '#fe6601';
    this.style.color = '#fff5bd';
   }
   // 為li添加劃出事件, 恢復(fù)為默認(rèn)樣式
   lis[i].onmouseleave = function(){
    this.style.background = '#ffffff';
    this.style.color = '#000000';
   }
  }
 </script>
</body>
</html>

上述內(nèi)容就是利用Javascript怎么編寫一個(gè)單選框功能，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

利用Javascript怎么編寫一個(gè)單選框功能

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽