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

相关推荐
雪碧聊技术2 分钟前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model
快起来别睡了4 分钟前
手写 Ajax 与 Promise:从底层原理到实际应用
前端
打不着的大喇叭1 小时前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
无我Code1 小时前
2025----前端个人年中总结
前端·年终总结·创业
程序猿阿伟1 小时前
《前端路由重构:解锁多语言交互的底层逻辑》
前端·重构
Sun_light1 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子1 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
莫空00001 小时前
Vue组件通信方式详解
前端·面试
呆呆的心1 小时前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
百锦再1 小时前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down