【Javascript】入門之模擬單選框

阿新 • • 發佈：2020-12-10

技術標籤：程式碼例項 js互動設計 javascript html

描述: 點選每一個li 將li的內容賦值給 div 給當前點選的li加上背景色, 點選空白部分隱藏

在這裡插入圖片描述

技術要點:

1.事件委託

事件委託: 事件代理, 將子節點要做的事情交給父元素來做

原理: 將原來要給子元素新增的事件, 加給父元素, 事件中通過 target || srcElement 找到對應的子節點, 子節點處理具體的操作

優點: 避免使用for 後續加進來的元素也有同樣的事件處理

使用: 如果子節點有統一的事件(每一個li都加點選事件每一個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';
}

// 建立節點
var li = document.createElement('li');
li.innerHTML = '12345';
// 追加進去
ul.appendChild(li);

2.阻止冒泡

由於冒泡產生的問題阻止冒泡解決

依賴於事件物件

標準: ev.stopPropagation();

ie: ev.cancelBubble = true;

一個是方法一個是屬性需要做相容

判斷方法是否存在:

ev.stopPropagation ? ev.stopPropagation() : ev.cancelBubble = true;

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

程式碼實現:

<!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>
        // 點選每一個li  將li的內容賦值給 div  給當前點選的li加上背景色
        // 點選空白部分隱藏
        // 1.當滑鼠移入div時, ul顯示, 反之ul隱藏
        // 獲取div, ul
        var div = document.querySelector('div');
        var ul = document.querySelector('ul');
        var lis = ul.getElementsByTagName('li');
        console.log(div, ul, lis);
        // 滑鼠移入div時, ul顯示, onmouseenter不會觸發父元素事件
        div.onmouseenter = function(){
            ul.style.display = 'block';
          /*   將li的內容賦值給 div  給當前點選的li加上背景色
            獲取點選的li的值 */     
            // 獲取ul點選事件
            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 ? ev.stopPropagation() : ev.cancelBubble = true;
                // console.log(ev.target || ev.srcElement);
                // 獲取事件的觸發源
                var tar = ev.target || ev.srcElement;
                // div的內容更改為相對應觸發源的內容
                div.innerHTML = tar.innerHTML;
                // 給當前點選的li加上背景色
                tar.style.background = '#0000FF';
                tar.style.color = '#fff5bd';
            }
        }
        // 點選空白處隱藏
        document.onclick = function(){
            // ul消失
            ul.style.display = 'none';
            //  div的值設為空
            div.innerHTML = '';
            // 所有li恢復原來樣式 
            for(var i = 0; i < lis.length; i++){
                lis[i].style.background = '#ffffff';
                lis[i].style.color = '#000000';
            }
        }
        // 給每一個li新增劃上屬性
        for(var i = 0; i < lis.length; i++){
            // 為li新增劃上事件
            lis[i].onmouseenter = function(){
                this.style.background = '#fe6601';
                this.style.color = '#fff5bd';
            }
            // 為li新增劃出事件, 恢復為預設樣式
            lis[i].onmouseleave = function(){
                this.style.background = '#ffffff';
                this.style.color = '#000000';
            }
        }
    </script>
</body>
</html>

【Javascript】入門之模擬單選框

技術標籤：程式碼例項js互動設計javascripthtml 描述: 點選每一個li 將li的內容賦值給 div 給當前點選的li加上背景色, 點選空白部分隱藏

【Javascript】入門之右鍵模擬選單

技術標籤：程式碼例項js互動設計javascripthtml 描述：列表項隨著滑鼠右鍵的位置移動, 類似於模擬選單

【Javascript】進階之localStorage在登入註冊中的應用

技術標籤：程式碼例項js互動設計javascript 描述 1. 進入首頁, 判斷本地快取的手機號和密碼是否都存在, 如果都存在顯示已經登入和顯示個人中心; 如果其中有一項不存在則狀態為未登入, 顯示登入註冊按鈕。

【JavaScript】原生js中DOM操作之元素建立、插入和移除

技術標籤：JS例項javascriptjs 建立元素 <body> <input type="text" id="txt1">

【JavaScript】單例模式實現

//單例的職責 var getSingle = function(fn){ var result; return function(){ return result || (result = fn.apply(this,arguments));

【解題報告】洛谷P1297 單選錯位

【解題報告】洛谷P1297 單選錯位題目連結 https://www.luogu.com.cn/problem/P1297 思路這道題目一看是一道期望的題目，但是這個不用 DP ，我們發現，後一個和前一個答案的情況總共有 \\(a_{i-1} \\times a_i\\)

【JavaScript】筆記（5）--- DOM（續）（複選框的全選和取消全選；獲取下拉列表選中項的value；網頁時鐘；內建支援類Array）

JavaScript 中內建的支援類：Date，可以用來獲取時間/日期..... 一、複選框的全選和取消全選：

Selenium3自動化測試【28】單選框、複選框、下拉選擇框

Html頁面中的單選按鈕、複選框、下拉框均可通過WebDriver實現操做。本節結合案例一起來看看WebDriver如何操做這些控制元件。

JS面向物件之單選框實現

本文例項為大家分享了JS面向物件之單選框實現程式碼，供大家參考，具體內容如下

python GUI庫圖形介面開發之PyQt5單選按鈕控制元件QRadioButton詳細使用方法與例項

PyQt5單選按鈕控制元件QRadioButton簡介 QRadioButton 繼承自 QAbstractButton，其主要作用提供使用者一些互斥的按鈕。

【react】實現動態表單中巢狀動態表單

要實現一個功能動態表單中巢狀動態表單如下：仔細看看antd的檔案其實不難具體步驟如下

【Pandas】入門案例

1 # To add a new cell, type \'# %%\' 2 # To add a new markdown cell, type \'# %% [markdown]\' 3 # %%

【JavaScript】條件語句

以下內容為學習記錄，可以參考 MDN 原文。環境 vscode 1.46 Microsoft Edge 83 條件判斷語句

【JavaScript】函式—可重用的程式碼塊

以下內容為學習記錄，可以參考 MDN 原文。環境 vscode 1.46 Microsoft Edge 83 概念在JavaScript中另一個基本概念是函式, 它允許你在一個程式碼塊中儲存一段用於處理單任務的程式碼，

【JavaScript】函式返回值

以下內容為學習記錄，可以參考 MDN 原文。環境 vscode 1.46 Microsoft Edge 83 概念返回值意如其名，是指函式執行完畢後返回的值。

【JavaScript】照片庫

以下內容為學習記錄，可以參考 MDN 原文。環境 vscode 1.46 Microsoft Edge 83 html 模板

【JavaScript】物件基礎

以下內容為學習記錄，可以參考 MDN 原文。環境 vscode 1.46 Microsoft Edge 83 概念物件是一個包含相關資料和方法的集合（通常由一些變數和函式組成，我們稱之為物件裡面的屬性和方法）。

【JavaScript】物件繼承

以下內容為學習記錄，可以參考 MDN 原文。環境 vscode 1.46 Microsoft Edge 83 概念到目前為止我們已經瞭解了一些關於原型鏈的實現方式以及成員變數是如何通過它來實現繼承，

【JavaScript】物件構建實踐

以下內容為學習記錄，可以參考 MDN 原文。環境 vscode 1.46 Microsoft Edge 83 概述本文通過編寫一個彈球 demo 來展示 JavaScript 中物件的重要性。

【JavaScript】猜數字遊戲

以下內容為學習記錄，可以參考 MDN 原文。環境 vscode 1.46 Microsoft Edge 83 示例以下內容為了解和熟悉 JavaScript，不需要理解，能夠複製貼上並正確執行即可。

【Javascript】入門之模擬單選框

描述: 點選每一個li 將li的內容賦值給 div 給當前點選的li加上背景色, 點選空白部分隱藏

技術要點:

1.事件委託

2.阻止冒泡

程式碼實現:

相關推薦