【零基础】学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元素的内容等等,最后小郑用两个案例来巩固今天的知识点,大家学废了吗?

相关推荐
jojo是只猫21 分钟前
前端vue对接海康摄像头流程
前端·javascript·vue.js
10年前端老司机4 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
阿芯爱编程8 小时前
2025前端面试题
前端·面试
前端小趴菜0510 小时前
React - createPortal
前端·vue.js·react.js
晓131310 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo10 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴11 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_78912 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼12 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原12 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序