定時(shí)器

網(wǎng)頁(yè)中經(jīng)常會(huì)需要：每隔一段時(shí)間需要自動(dòng)執(zhí)行一段代碼，不需要我們手動(dòng)去觸發(fā) -----定時(shí)器函數(shù)

比如：網(wǎng)頁(yè)中得倒計(jì)時(shí)

定時(shí)器函數(shù)有兩種：間隔函數(shù) 和 延遲函數(shù)

間隔函數(shù)

作用:每隔指定的時(shí)間 自動(dòng)重復(fù)執(zhí)行某些代碼

定時(shí)器函數(shù)可以開啟和關(guān)閉定時(shí)器

開啟定時(shí)器

setInterval(函數(shù)名,間隔時(shí)間)   //函數(shù)名不能加括號(hào)

每隔一段時(shí)間調(diào)用這個(gè)函數(shù) ，間隔時(shí)間單位是毫秒

關(guān)閉定時(shí)器

clearInterval(timer)
//timer是定時(shí)器變量名  返回的是一個(gè)唯一的數(shù)字

定時(shí)器案例

<script>
    // 1. 初始數(shù)據(jù)
    const sliderData = [
     		{ src: './img/quality03.png', title: '第1張圖片', color: 'rgba(100, 67, 68,.3)' },
            { src: './img/quality04.png', title: '第2張圖片', color: 'rgba(43, 35, 26,.3)' },
            { src: './img/quality05.png', title: '第3張圖片', color: 'rgba(36, 31, 33,.3)' },
            { src: './img/quality06.png', title: '第4張圖片', color: 'rgba(139, 98, 66,.3)' },
            { src: './img/quality07.png', title: '第5張圖片', color: 'rgba(67, 90, 92,.3)' },
    ]
    // 1. 獲取元素
    const img = document.querySelector('.slider-wrapper img')
    const p = document.querySelector('.slider-footer p')
    const footer = document.querySelector('.slider-footer')
    // 2.開啟定時(shí)器
    let i = 0  // 信號(hào)量 控制圖片張數(shù)
    // console.log(sliderData[i])
    setInterval(function () {
      i++
      // 無(wú)縫銜接位置  一共5張圖片，到了最后一張就是 5，數(shù)組的長(zhǎng)度就是 5
      if (i >= sliderData.length) {
        i = 0
      }
      // console.log(sliderData[i])
      img.src = sliderData[i].url
      p.innerHTML = `${sliderData[i].title}`
      footer.style.backgroundColor = `${sliderData[i].color}`
      //小圓點(diǎn)
      //先刪除以前的 active
      document.querySelector('.slider-indicator .active').classList.remove('active')
      //只讓當(dāng)前 li 添加 active
      document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
    }, 1000)
</script>

事件監(jiān)聽

以前寫的代碼都是自動(dòng)執(zhí)行的，我們希望一段代碼在某個(gè)特定的時(shí)機(jī)才去執(zhí)行

• 點(diǎn)擊按鈕可以彈出提示框
• 鼠標(biāo)經(jīng)過(guò)顯示下拉菜單

事件

事件是程序在運(yùn)行的時(shí)候，發(fā)生的特定動(dòng)作或者特定的事情比如點(diǎn)擊按鈕，鼠標(biāo)經(jīng)過(guò)菜單…

語(yǔ)法

元素對(duì)象.addEventListener('事件類型',事件處理函數(shù))
1.事件發(fā)生后，想要執(zhí)行的代碼寫到事件處理函數(shù)
2.觸發(fā)指定的事件時(shí)，事件處理函數(shù)就會(huì)執(zhí)行
3.事件監(jiān)聽是將事件處理函數(shù)注冊(cè)到元素對(duì)象身上
4.事件監(jiān)聽也稱為：事件注冊(cè)、事件綁定

事件監(jiān)聽三要素：

• 事件源

  誰(shuí)被觸發(fā)了 ，那個(gè)元素上觸發(fā)

• 事件類型

  鼠標(biāo)點(diǎn)擊click,鼠標(biāo)經(jīng)過(guò)mouseenter等

• 事件處理函數(shù)

  要做什么事情，把要做的事情放到事件處理函數(shù)里面

回調(diào)函數(shù)

一個(gè)函數(shù)作為參數(shù)傳遞給另外一個(gè)函數(shù)的時(shí)候，這個(gè)函數(shù)就是回調(diào)函數(shù)

回調(diào)函數(shù)本質(zhì)還是函數(shù)，只不過(guò)把它作為參數(shù)使用

作用:完成某些特定的任務(wù)

使用場(chǎng)景

//使用匿名函數(shù)作為回調(diào)函數(shù)
setInterVal(function(){
  //執(zhí)行特定的任務(wù) 切換輪播圖圖片
},1000)
addEventListener('click',function(){
  //執(zhí)行特定的任務(wù) 彈出提示框
})

事件監(jiān)聽版本

L： level 標(biāo)準(zhǔn) 層次

// DOM L0
事件源.on事件類型= function(){}
btn.onclick=function(){
  alert("我是彈框")
}

//DOM L2
事件源.addEventListener(事件類型,事件處理函數(shù))
btn.addEventListener('click',function(){
 alert('我是彈框')
})

// 事件監(jiān)聽版本
        const btn = document.querySelector('button');

        // DOM L0   注冊(cè)同名事件，會(huì)出現(xiàn)覆蓋情況
        // btn.onclick = function(){
        //     alert("我是彈窗");
        // }

        // btn.onclick = function(){
        //     alert("我是彈窗2");
        // }

        // DOM L2  注冊(cè)同名click事件  不會(huì)出現(xiàn)覆蓋情況
        btn.addEventListener('click',function(){
            alert("我是彈窗")
        })
        btn.addEventListener('click',function(){
            alert("我是彈窗2");
        })

事件類型

事件類型統(tǒng)一用小寫字母

鼠標(biāo)事件

click鼠標(biāo)點(diǎn)擊

mouseenter 鼠標(biāo)經(jīng)過(guò)

mouseleave 鼠標(biāo)離開

// 鼠標(biāo)事件類型
        const box = document.querySelector('.box');

        // 鼠標(biāo)點(diǎn)擊
        // box.addEventListener('click',function(){
        //     alert("我點(diǎn)擊了盒子");
        // })
        // 2.鼠標(biāo)經(jīng)過(guò)
        // box.addEventListener('mouseenter',function(){
        //     console.log("我鼠標(biāo)經(jīng)過(guò)了盒子");
        // })
        // 3.鼠標(biāo)離開
        box.addEventListener('mouseleave',function(){
            console.log("我鼠標(biāo)離開了盒子");
        })

輪播圖完整版案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .slider .slider-wraper {
            position: relative;
            width: 228px;
            height: 156px;
            margin: 0 auto;
        }

        .slider .slider-wraper .img-wraper {
            height: 156px;
            overflow: hidden;
        }

        .slider-wraper img {
            border-radius: 5px;
        }

        .footer {
            width: 228px;
            height: 50px;
            position: relative;
            bottom: 50px;
            border-radius: 0 0 5px 5px;
            background-color: rgba(100, 67, 68, .3);
        }

        .slider-wraper .footer p {
            font-size: 12px;
            color: #fff;
            margin-bottom: 10px;
            margin-left: 15px;
        }

        .slider-wraper .left,
        .slider-wraper .right {
            position: absolute;
            border: none;
            background-color: rgba(233, 233, 233, .2);
        }

        .slider-wraper .left,
        .slider-wraper .right:hover {
            cursor: pointer;
        }

        .slider-wraper .left {
            left: 0;
            bottom: 50%;
            transform: translateY(50%);
        }

        .slider-wraper .right {
            right: 0;
            bottom: 50%;
            transform: translateY(50%);
        }

        ul {
            display: flex;
            align-items: center;
            margin-left: 15px;
        }

        li {
            list-style: none;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background-color: #ccc;
            margin-right: 5px;
        }

        li:hover {
            cursor: pointer;
        }

        .active {
            width: 7px;
            height: 7px;
            background-color: #fff;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <div class="slider">
        <div class="slider-wraper">
            <div class="img-wraper">
                <img src="./img/quality03.png" alt="">
            </div>
            <div class="footer">
                <p>第1張圖片</p>
                <ul>
                    <li class="active"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            <button class="left">&lt;</button>
            <button class="right">&gt;</button>
        </div>
    </div>
    <script>
        const imgdata = [
            { src: './img/quality03.png', title: '第1張圖片', color: 'rgba(100, 67, 68,.3)' },
            { src: './img/quality04.png', title: '第2張圖片', color: 'rgba(43, 35, 26,.3)' },
            { src: './img/quality05.png', title: '第3張圖片', color: 'rgba(36, 31, 33,.3)' },
            { src: './img/quality06.png', title: '第4張圖片', color: 'rgba(139, 98, 66,.3)' },
            { src: './img/quality07.png', title: '第5張圖片', color: 'rgba(67, 90, 92,.3)' },
        ]
        const img = document.querySelector('.slider-wraper img')
        const sliderWraper = document.querySelector('.slider-wraper')
        const lis = document.querySelectorAll('.footer ul li')
        const p = document.querySelector('.footer p')
        const footer = document.querySelector('.footer')
        const btnl = document.querySelector('.slider-wraper .left')
        const btnr = document.querySelector('.slider-wraper .right')

        let i = 0  // 信號(hào)量 控制播放圖片張數(shù)

        // 封裝切換輪播圖的函數(shù)
        function toggle() {
            img.src = imgdata[i].src
            p.innerHTML = imgdata[i].title
            footer.style.backgroundColor = imgdata[i].color
            document.querySelector('.slider-wraper .footer ul .active').classList.toggle('active')
            lis[i].classList.add('active')
        }
        // 開啟定時(shí)器
        let timer = setInterval(function () {
            i++
            // if (i >= imgdata.length) {
            //     i = 0
            // }

            // i = i >= imgdata.length ? 0 : i

            i = i % imgdata.length
            toggle()
        }, 1000)

        // 鼠標(biāo)經(jīng)過(guò)時(shí)，停止計(jì)時(shí)器
        sliderWraper.addEventListener('mouseenter', function () {
            clearInterval(timer)
        })

        // 鼠標(biāo)離開時(shí)，開啟計(jì)時(shí)器
        sliderWraper.addEventListener('mouseleave', function () {
            clearInterval(timer)
            timer = setInterval(function () {
                // 每隔一秒，自動(dòng)點(diǎn)擊一次右側(cè)按鈕
                btnr.click()
            }, 1000)
        })

        // 點(diǎn)擊小圓點(diǎn)跳轉(zhuǎn)模塊
        for (let j = 0; j < lis.length; j++) {
            lis[j].addEventListener('click', function () {
                i = j
                toggle()
            })
        }

        // 左右按鈕點(diǎn)擊跳轉(zhuǎn)模塊
        btnl.addEventListener('click', function () {
            console.log('點(diǎn)擊左按鈕');
            i--
            // if (i < 0) {
            //     i = imgdata.length - 1
            // }
            i = (i + imgdata.length) % imgdata.length
            toggle()
        })

        btnr.addEventListener('click', function () {
            console.log('點(diǎn)擊右按鈕');
            i++
            // if (i > imgdata.length - 1) {
            //     i = 0
            // }
            i = i % imgdata.length

            toggle()
        })

    </script>
</body>

</html>

焦點(diǎn)事件

focus獲得焦點(diǎn)

blur 失去焦點(diǎn)

<body>
    <input type="text" class="search-text">
    <input type="text" class="search">

    <script>
        // 焦點(diǎn)事件 (手動(dòng)觸發(fā))
        const search_text = document.querySelector(".search-text");

        // 獲取焦點(diǎn)
        search_text.addEventListener('focus',function(){
            console.log("獲得了焦點(diǎn)");
        })
        // 失去焦點(diǎn)
        search_text.addEventListener('blur',function(){
            console.log("失去焦點(diǎn)");
        })

        // 自動(dòng)獲得焦點(diǎn) focus() 自動(dòng)失去焦點(diǎn)  blur()
        // 元素.focus() 
        const search= document.querySelector('.search')
        search.focus()
    </script>
</body>

小米搜索框顯示隱藏案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .mi {
            position: relative;
            width: 230px;
            margin: 100px auto;
        }

        .mi .search-text {
            width: 230px;
            height: 48px;
            padding: 0 10px;
            font-size: 14px;
            line-height: 48px;
            border: 1px solid #ccc;
            outline: none;
        }

        .result-list {
            display: none;
            position: absolute;
            left: 0;
            top: 48px;
            width: 228px;
            border: 1px solid red;
            border-top: 0;
            background-color: #fff;
        }

        .result-list a {
            display: block;
            padding: 6px 15px;
            font-size: 12px;
            color: #333;
            text-decoration: none;
        }

        .result-list a:hover {
            background-color: #eee;
        }

        .mi .search {
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div class="mi">
        <input type="search" placeholder="小米筆記本" class="search-text">
        <ul class="result-list">
            <li><a href="#">全部商品</a></li>
            <li><a href="#">小米1</a></li>
            <li><a href="#">小米2</a></li>
            <li><a href="#">小米收集</a></li>
            <li><a href="#">小米空調(diào)</a></li>
        </ul>
    </div>
    <script>
        // 1.先隱藏下拉菜單

        // 2.獲取元素 
        const search_text = document.querySelector('.search-text');
        const result_list = document.querySelector('.result-list');

        search_text.addEventListener('focus', function () {
            result_list.style.display = 'block';
            // 搜索框添加邊框顏色
            search_text.classList.add('search');
        })

        search_text.addEventListener('blur', function () {
            result_list.style.display = 'none';

            search_text.classList.remove('search');
        })

    </script>
</body>

</html>

鍵盤事件

keydown 鍵盤按下

keyup 鍵盤抬起

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        textarea {
            width: 300px;
            height: 30px;
            padding: 10px;
            border-color: transparent;
            outline: none;
            background: #f5f5f5;
            border-radius: 5px;
        }
    </style>
</head>

<body>
    <textarea id="tx" placeholder="發(fā)一條評(píng)論"></textarea>
    <script>
        // 獲取元素
        const tx = document.querySelector("#tx");
        // 鍵盤事件
        // 鍵盤按下事件  keydown 當(dāng)我們按下鍵盤時(shí)觸發(fā)
        tx.addEventListener('keydown', function () {
            console.log("我是keydown事件", tx.value)
        })

        // 鍵盤彈起事件 keyup 當(dāng)我們鍵盤彈起的時(shí)候觸發(fā)
        tx.addEventListener('keyup', function () {
            console.log('keyup事件', tx.value)
        })
        // 用戶輸入事件input 表單value值發(fā)生變化的時(shí)候觸發(fā)
        tx.addEventListener('input', function () {
            console.log("我是input事件", tx.value)
        })
        //  注意事項(xiàng)
        // 執(zhí)行順序  keydown-->input--->keyup
        // keydown  獲取值的時(shí)候得不到最后一次按鍵的值  keyup和input可以得到用戶輸入的內(nèi)容
    </script>
</body>

</html>

文本事件

input 表單value被修改時(shí)觸發(fā)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrapper {
            width: 400px;
            display: flex;
            justify-content: flex-end;
        }

        .wrapper textarea {
            flex: 1;
            height: 30px;
            padding: 10px;
            border-color: transparent;
            outline: none;
            background-color: #f5f5f5;
            border-radius: 5px;
            transition: all 0.5s;
        }

        .wrapper textarea:focus {
            height: 50px;
            border-color: #e4e4e4;
            background-color: #fff;
        }

        .wrapper button {
            width: 70px;
            margin-left: 10px;
            border: none;
            color: #fff;
            background-color: #f00;
            border-radius: 5px;
        }

        .wrapper .total {
            margin-right: 80px;
            margin-top: 5px;
            color: #888;
            opacity: 0;
            transition: all 0.5s;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <textarea id="tx" placeholder="發(fā)一條評(píng)論" maxlength="200"></textarea>
        <button>發(fā)布</button>
    </div>
    <div class="wrapper">
        <span class="total">0/200字</span>
    </div>
    <script>
        // 文本域獲取焦點(diǎn) 讓total透明度改為1  失去焦點(diǎn)改為0
        const tx = document.querySelector("#tx");
        const total = document.querySelector(".total");

        // 獲取焦點(diǎn)
        tx.addEventListener('focus', function () {
            total.style.opacity = 1
        })

        tx.addEventListener('blur', function () {
            total.style.opacity = 0
        })

        // 得到用戶輸入的字符長(zhǎng)度，寫到total的盒子里面
        // 根據(jù)input事件，得到用戶的字符長(zhǎng)度
        tx.addEventListener('input', function () {
            console.log(tx.value.length)
            // 把字符長(zhǎng)度寫到total盒子里面
            total.innerText = `${tx.value.length}/200字`
        })
    </script>
</body>

</html>

事件對(duì)象

事件對(duì)象

是什么

也是個(gè)對(duì)象，這個(gè)對(duì)象里有事件觸發(fā)時(shí)的相關(guān)信息，包含屬性和方法

鼠標(biāo)點(diǎn)擊事件中，事件對(duì)象就存了鼠標(biāo)點(diǎn)擊在哪個(gè)位置等信息

使用場(chǎng)景

可以判斷用戶按下哪個(gè)鍵，比如按下回車鍵-可以發(fā)表評(píng)論

可以判斷鼠標(biāo)點(diǎn)擊了哪個(gè)元素，從而做相應(yīng)的操作

語(yǔ)法

• 注冊(cè)事件中，回調(diào)函數(shù)的第一個(gè)參數(shù)就是事件對(duì)象
• 一般命名為event，ev，e

元素.addEventListener('click',function(e){   //e事件對(duì)象

})

常見屬性

offsetX 事件發(fā)生時(shí)，鼠標(biāo)相對(duì)于事件源的X坐標(biāo)

offsetY 事件發(fā)生時(shí)，鼠標(biāo)相對(duì)于事件源的Y坐標(biāo)

target 事件源對(duì)象

key 如果是鍵盤相關(guān)的事件，則事件對(duì)象中包含該屬性，表示鍵盤事件發(fā)生時(shí)，按下的是什么鍵，Enter 回車鍵

pageX 事件發(fā)生時(shí)，鼠標(biāo)相對(duì)于網(wǎng)頁(yè)的X坐標(biāo)

pageY 事件發(fā)生時(shí)，鼠標(biāo)相對(duì)于網(wǎng)頁(yè)的Y坐標(biāo)

clientX 事件發(fā)生時(shí)，鼠標(biāo)相對(duì)于視口的X坐標(biāo)

clientY 事件發(fā)生時(shí)，鼠標(biāo)相對(duì)于視口的Y坐標(biāo)

環(huán)境對(duì)象-this

環(huán)境對(duì)象–指的是函數(shù)內(nèi)部特殊的this，它指向一個(gè)對(duì)象，并且受當(dāng)前環(huán)境的影響

作用: 很清晰this的指向

• 函數(shù)調(diào)用方式不同，this指的對(duì)象也不同
• 【誰(shuí)調(diào)用，this就是誰(shuí)】是判斷this指向的粗略規(guī)則
• 直接調(diào)用函數(shù)，其實(shí)相當(dāng)于window.函數(shù)()， this指的是window

<button>按鈕</button>
    <script>
        // 環(huán)境對(duì)象   【誰(shuí)調(diào)用函數(shù)，this就指向誰(shuí)】
        // 1.全局環(huán)境
        console.log(this);// this指向window全局對(duì)象

        // 2.普通函數(shù)
        function fn() {
            console.log(this);  //this指向window全局對(duì)象
        }
        window.fn();

        // 3.對(duì)象方法
        const obj = {
            uname: "佩奇",
            sing: function () {
                console.log(this);  //this指向obj對(duì)象
            }
        }
        obj.sing();

        // 4.事件
        const btn = document.querySelector('button');
        btn.addEventListener('click', function () {
            console.log(this)  //this指向btn這個(gè)對(duì)象
            //  btn.style.backgroundColor = 'pink';
            this.style.backgroundColor = 'pink';
        })

    </script>

排他思想

是一種思想，目的是突出顯示某個(gè)元素(排除其他人，保留我自己)

比如：有多個(gè)元素，鼠標(biāo)經(jīng)過(guò)時(shí)，只有當(dāng)前元素添加高亮樣式，其余元素移除樣式

事件流

為什么? 幫我們解決問(wèn)題—點(diǎn)擊盒子會(huì)彈出2次的問(wèn)題

是什么？ 事件完整執(zhí)行過(guò)程中的流動(dòng)路徑

觸發(fā)事件 會(huì)經(jīng)歷兩個(gè)階段 捕獲階段 冒泡階段

事件捕獲

事件捕獲：一個(gè)元素的事件被觸發(fā)時(shí)，會(huì)從DOM的根元素開始依次調(diào)用同名事件(從外到內(nèi))

DOM.addEventListener(事件類型，事件處理函數(shù),是否使用捕獲機(jī)制)
第三個(gè)參數(shù)傳入true 代表的是捕獲階段觸發(fā)(很少使用)
         傳入false，代表的是冒泡階段觸發(fā) --默認(rèn)是false

事件冒泡

事件冒泡：一個(gè)元素的事件被觸發(fā)時(shí)，同樣的事件將會(huì)在該元素的所有祖先元素中依次被觸發(fā)（從內(nèi)到外）

? 一個(gè)元素觸發(fā)事件后，會(huì)依次向上調(diào)用所有父級(jí)元素的同名事件

? 傳入false，代表的是冒泡階段觸發(fā) --默認(rèn)是false

? 事件冒泡是默認(rèn)存在的。實(shí)際工作中使用冒泡居多

阻止冒泡

冒泡是默認(rèn)存在的，所以容易導(dǎo)致事件影響到父級(jí)元素（問(wèn)題）

想要把事件限制在當(dāng)前元素內(nèi)，就需要阻止事件冒泡

事件對(duì)象.stopPropagation()

//該方法可以阻斷事件流動(dòng)傳播，不光在冒泡階段有效，捕獲階段也有效

鼠標(biāo)經(jīng)過(guò)/離開事件的區(qū)別

• mouseover和mouseout 會(huì)有冒泡
• mouseenter 和mouseleave 沒(méi)有冒泡(常用)

事件委托

是JavaScript中注冊(cè)事件的常用技巧，也稱為事件委派，事件代理

原本需要注冊(cè)在子元素的事件委托給父元素，讓父元素?fù)?dān)當(dāng)事件監(jiān)聽的職務(wù)

為什么？ 同時(shí)給多個(gè)元素注冊(cè)事件，需要利用循環(huán)多次注冊(cè)事件

事件委托是利用事件流的特征解決一些開發(fā)需求

優(yōu)點(diǎn)：減少注冊(cè)次數(shù)，提高程序性能

原理：事件委托其實(shí)就是利用事件冒泡的特點(diǎn)

給父元素注冊(cè)事件，當(dāng)我們觸發(fā)子元素的時(shí)候，會(huì)冒泡到父元素身上，從而觸發(fā)父元素的事件文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-515652.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>第1個(gè)孩子</li>
        <li>第2個(gè)孩子</li>
        <li>第3個(gè)孩子</li>
        <li>第4個(gè)孩子</li>
        <li>第5個(gè)孩子</li>
    </ul>
    <script>
        // 點(diǎn)擊每個(gè)li都會(huì)有彈窗效果
        // 獲取父元素ul
        const ul=document.querySelector('ul');
        // 給ul注冊(cè)事件
        ul.addEventListener('click',function(e){
            // console.log("彈窗")
            // 事件對(duì)象.target 得到目標(biāo)元素
            // 獲取到當(dāng)前點(diǎn)擊的元素  事件對(duì)象.target.tagName 可以獲得真正觸發(fā)事件的元素
           console.log(e.target);
        //    點(diǎn)擊哪個(gè)li 對(duì)應(yīng)的li變色
        //    e.target.style.color ='pink'
        //    console.dir(e.target)
        if(e.target.tagName =='LI'){
            e.target.style.color= 'pink'
        }
        })
    </script>
</body>
</html>

Tab欄切換案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        .tab{
            width: 600px;
            height: 350px;
            margin:20px auto;
            border: 1px solid #e4e4e4;
        }
        .tab .tab-nav{
           height: 50px;
           background-color: pink;
        }
        .tab .tab-nav ul{
            display: flex;
            align-items: center;
        }
        .tab .tab-nav ul li{
            width: 100px;
            height: 50px;
            line-height: 50px;
            text-align: center;
        }
        .tab .tab-nav ul li.active{
            background-color: red;
            color: #fff;
        }
        .tab .tab-content .item{
            display: none;
        }
        .tab .tab-content .show{
            display: block;
        }
    </style>
</head>
<body>
    <div class="tab">
        <div class="tab-nav">
            <ul>
                <li class="active" data-id="0">
                    <a href="#">潮流</a>
                </li>
                <li  data-id="1">
                    <a href="#">時(shí)尚</a>
                </li>
                <li  data-id="2">
                    <a href="#">收藏</a>
                </li>
            </ul>
        </div>
        <div class="tab-content">
            <div class="item hidden">潮流</div>
            <div class="item">時(shí)尚</div>
            <div class="item">收藏</div>
        </div>
    </div>
    <script>
        // 鼠標(biāo)經(jīng)過(guò)不同的選項(xiàng)卡，底部顯示不同的內(nèi)容
        /* 
         1.給父級(jí)ul注冊(cè)鼠標(biāo)經(jīng)過(guò)事件，采用事件委托方式
         2.注意mouseenter沒(méi)有冒泡，所以此處使用mouseover
         3.排他思想，刪除添加類
         4.e.target.tagName  來(lái)進(jìn)行判斷
        */

        // 1.給父級(jí)ul注冊(cè)鼠標(biāo)經(jīng)過(guò)事件，采用事件委托方式  mouseover
        const ul =document.querySelector('.tab-nav ul');
        const items = document.querySelectorAll(".tab-content .item")
        ul.addEventListener('mouseover',function(e){
            // 只有鼠標(biāo)經(jīng)過(guò)li才會(huì)高亮
            if(e.target.tagName==='LI'){
                document.querySelector('.tab-nav .active').classList.remove('active')

                // 當(dāng)前元素添加active
                e.target.classList.add('active')
                // 底部跟隨
                // 因?yàn)闆](méi)有索引號(hào)  所以我們要自定義屬性  給3個(gè)li添加序號(hào)

                // e.target.dataset.id
                // console.log(e.target.dataset.id)
                document.querySelector('.tab-content .show').classList.remove('show')
                items[e.target.dataset.id].classList.add('show')
            }
        })
    </script>
</body>
</html>

到了這里，關(guān)于定時(shí)器/事件的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！