【零基础】学JS之APIS（基于黑马）

news2024/11/17 16:04:03

喝下这碗鸡汤

披盔戴甲,一路勇往直前!

1. 什么是事件

事件是在编程时系统内发生的动作或者发生的事情
比如用户在网页上单击一个按钮

2. 什么是事件监听?

就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为注册事件语法:

元素.addEventListener('事件'，要执行的函数)

3. 事件监听三要素:

事件源: 那个dom元素被事件触发了，要获取dom元素

事件:用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等

事件调用的函数:要做什么事

4. 随机点名案例

业务分析:
点击开始按钮随机抽取数组的一个数据，放到页面中点击结束按钮删除数组当前抽取的一个数据当抽取到最后一个数据的时候，两个按钮同时禁用核心:利用定时器快速展示，停止定时器结束展示

<body>
    <h2>随机点名</h2>
    <div class="box">
        <span>名字是：</span>
        <div class="qs">这里显示姓名</div>
    </div>
    <div class="btns">
        <button class="start">开始</button>
        <button class="end">结束</button>
    </div>

    <script>
        // 数据数组
        let arr = ['马超', '黄忠', '赵云', '关羽', '张飞']
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min
        }


        //1 获取元素
        let start = document.querySelector('.start')
        let end = document.querySelector('.end')
        let qs = document.querySelector('.qs')

        let timer = 0
        let random = 0
        //2 给开始按钮注册事件
        timer = start.addEventListener('click', function () {
            setInterval(function () {
                let random = getRandom(0, arr.length - 1)
                qs.innerHTML = arr[random]
            }, 30)

            //如果到了最后一个就禁用按钮
            if (arr.length === 1) {
                start.disabled = end.disabled = true
            }
        })
        //3 给结束按钮注册事件 本质是停止定时器
        end.addEventListener('click', function () {
            clearInterval(timer)
            //删除数组元素

            arr.splice(random, 1)

        })

    </script>
</body>

5. 小米搜索框

<body>
    <div class="mi">
        <input type="search" placeholder="小米笔记本">
        <ul class="result-list">
            <li><a href="#">全部商品</a></li>
            <li><a href="#">小米11</a></li>
            <li><a href="#">小米10S</a></li>
            <li><a href="#">小米笔记本</a></li>
            <li><a href="#">小米手机</a></li>
            <li><a href="#">黑鲨4</a></li>
            <li><a href="#">空调</a></li>
        </ul>
    </div>
    <script>
        // 1. 获取元素   input 
        let search = document.querySelector('input')
        let list = document.querySelector('.result-list')
        // 2. 事件监听 获得光标事件  focus
        search.addEventListener('focus', function () {
            // 显示下拉菜单
            list.style.display = 'block'
            // 文本框变色
            this.classList.add('search')
        })
        // 3. 事件监听 失去光标事件  blur
        search.addEventListener('blur', function () {
            // 隐藏下拉菜单
            list.style.display = 'none'
            // 文本框去色
            this.classList.remove('search')
        })
    </script>
</body>

6. 发布微博案例

<body>
  <div class="w">
    <div class="controls">
      <img src="images/tip.png" alt=""><br>
      <textarea placeholder="说点什么吧..." id="area" cols="30" rows="10" maxlength="200"></textarea>
      <div>
        <span class="useCount">0</span>
        <span>/</span>
        <span>200</span>
        <button id="send">发布</button>
      </div>

    </div>
    <div class="contentList">
      <ul>

      </ul>
    </div>
  </div>
  <script>
    // 1. 获取元素 文本域  count
    let area = document.querySelector('#area')
    let useCount = document.querySelector('.useCount')
    // 2. 绑定事件  用户输入事件 input
    area.addEventListener('input', function () {
      // console.log('测试中')
      // 不断得到文本域里面的字符长度
      // area.value 可以得到的值
      // console.log(area.value)
      // area.value.length 得到输入字符的长度
      // console.log(area.value.length)
      useCount.innerHTML = area.value.length
    })
  </script>
</body>