【零基础】学JS之APIS(基于黑马)

喝下这碗鸡汤

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

1. 什么是事件

事件是在编程时系统内发生的动作或者发生的事情

比如用户在网页上单击一个按钮

2. 什么是事件监听?

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

javascript 复制代码
元素.addEventListener('事件',要执行的函数)

3. 事件监听三要素:

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

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

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

4. 随机点名案例

业务分析:

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

javascript 复制代码
<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. 小米搜索框

javascript 复制代码
<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. 发布微博案例

javascript 复制代码
<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>

总结

恭喜大家跟着小郑学完【零基础】学JS之APIS的第二篇,这篇笔记学习了什么是DOM,以及DOM的相关知识点,例如获取DOM元素,修改DOM元素的内容等等,最后小郑用两个案例来巩固今天的知识点,大家学废了吗?

相关推荐
天天扭码30 分钟前
深入解析 JavaScript 中的每一类函数:从语法到对比,全面掌握适用场景
前端·javascript·面试
小希爸爸1 小时前
4、中医基础入门和养生
前端·后端
kooboo china.1 小时前
Tailwind CSS 实战:基于 Kooboo 构建企业官网页面(一)
前端·css·编辑器
uhakadotcom1 小时前
Fluid:云原生数据加速与管理的简单入门与实战
前端
鬼面瓷1 小时前
CAPL编程_03
前端·数据库·笔记
帅云毅1 小时前
Web漏洞--XSS之订单系统和Shell箱子
前端·笔记·web安全·php·xss
北上ing1 小时前
同一页面下动态加载内容的两种方式:AJAX与iframe
前端·javascript·ajax
纪元A梦2 小时前
华为OD机试真题——推荐多样性(2025A卷:200分)Java/python/JavaScript/C++/C语言/GO六种最佳实现
java·javascript·c++·python·华为od·go·华为od机试题
小墨宝2 小时前
js 生成pdf 并上传文件
前端·javascript·pdf
HED3 小时前
用扣子快速手撸人生中第一个AI智能应用!
前端·人工智能