Web ApIs第二天（事件的使用）

最新推荐文章于 2024-09-30 15:42:36 发布

前端学习@

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量302

点赞数

分类专栏： JavaScript 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_52504437/article/details/129886047

版权

JavaScript 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

事件的使用

1.事件
2.高阶函数
3.环境对象
4.编程思想
5.综合案例

1.事件

1.1事件监听

什么是事件？
 事件是在编程时系统内发生的动作或者发生的事情
 比如点击按钮 click
什么是事件监听？
 就是让程序检测是否有事件产生，一旦有事件触发，就立即调
用一个函数做出响应，也称为注册事件
事件监听三要素是什么？
 事件源 (谁被触发了)
 事件 (用什么方式触发，点击还是鼠标经过等)
 事件处理程序（要做什么事情）

//1.获取元素
let btn = document.querySelector('button')
//2.事件监听（注册事件）
//事件源.addEventListener('事件', 事件处理函数)
btn.addEventListener('click', function() {
	alert('被点击了')
})

注意：

事件类型要加引号
函数是点击之后再去执行，每次点击都会执行一次

1.1.2点击关闭二维码案例

// 获取元素 事件源 i 关闭的erweima
let close_btn  = document.querySelector('.close_btn')
let erweima = document.querySelector('.erweima')
// 事件的监听
close_btn.addEventListener('click', function () {
    //erweima关闭 他是隐藏的
    erweima.style.display = 'none'
})

1.1.2随机点名案例

<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 = ['一航', '一诺', '飞牛', '妖刀', 'cat', '清清']
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min
        }
        // 1.获取元素 两个按钮 和div
        let start = document.querySelector('.start')
        let end  = document.querySelector('.end')
        let qs = document.querySelector('.qs')
        let timre = 0//全局变量
        let random = 0//全局变量
        // 2.给开始按钮加事件
        start.addEventListener('click', function() {
            //随机抽取数据---快速不断的抽取 间歇函数定时器
            timer = setInterval(function () {
                random = getRandom(0, arr.length - 1)
                qs.innerHTML = arr[random]
            }, 25)
            if (arr.length === 1) {
                start.disabled = true
                end.disabled = true
                //或者start.disabled = end.disabled = true
            }
        })
        // 3.结束按钮加事件
        end.addEventListener('click', function () {
            // 停止计时器
            clearInterval(timer)
            console.log(arr);
            // 抽名抽一个删一个
            arr.splice(random,1)
        })
    </script>
</body>

1.2拓展阅读-事件监听版本

 DOM L0
事件源.on事件 = function() { }
 DOM L2
事件源.addEventListener(事件，事件处理函数)
 发展史：
 DOM L0 ：是 DOM 的发展的第一个版本； L：level
 DOM L1：DOM级别1 于1998年10月1日成为W3C推荐标准
 DOM L2：使用addEventListener注册事件
 DOM L3： DOM3级事件模块在DOM2级事件基础上重新定义了这些事件，也添加了一些新事类型

1.3事件类型

在这里插入图片描述

1.搜索框案例

<body>
    <div class="mi">
        <input type="search" placeholder="笔记本">
        <ul class="result-list">
            <li><a href="#">联想小新</a></li>
            <li><a href="#">联想小新</a></li>
            <li><a href="#">联想小新</a></li>
            <li><a href="#">联想小新</a></li>
            <li><a href="#">联想小新</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'
            search.classList.add('search')
        })
        //3.事件监听 失去光标事件 blur
        search.addEventListener('blur', function () {
            // 显示下拉菜单
            // 文本框颜色
            list.style.display = 'none'
            search.classList.remove('search')
        })
    </script>
</body>

2.微博案例：用户输入文字，可以计算用户输入多少个数

//获取元素 文本域 count
let area = document.querySelector('#area')
let useCount = document.querySelector('.useCount')
//2.事件监听，用户输入事件
area.addEventListener('input', function () {
  useCount.innerHTML = area.value.length//文本域里面值的长度
})

3.全选案例

//获取元素， 全选 和 ck 小复选框
    let all = document.querySelector('#checkAll')
    let cks = document.querySelectorAll('.ck')
    let span = document.querySelector('span')
    // 2. 事件监听   全选按钮  
    all.addEventListener('click', function () {
      // console.log(all.checked)  // true  false 
      // 我们需要做的就是把 all.checked 给下面三个小按钮
      // 因为三个按钮在伪数组里面，我们需要遍历的方式，挨着取出来，依次给值
      for (let i = 0; i < cks.length; i++) {
        cks[i].checked = all.checked
      }
      // 当我们的全选按钮处于选中状态，则可以改为取消
      if (all.checked) {
        // console.log('要改')
        span.innerHTML = '取消'
      } else {
        span.innerHTML = '全选'
      }
    })
    // 3.小按钮的做法 同时给多个元素绑定相同事件
    for (let i = 0; i < cks.length; i++) {
      //绑定事件
      cks[i].addEventListener('click', function () {
        //只要点击如何一个小按钮，都要遍历所有按钮
        for (let j = 0; j < cks.length; j++) {
          // 都来看看是不是有人没有选中
          if (cks[j].checked === false) {
            all.checked = false
            span.innerHTML = '全选'
            return
          }
        }
        all.checked = true
        span.innerHTML = '取消'
      })
    }

在这里插入图片描述 4.购物车案例

	<input type="text" id="total" value="1" readonly>
    <input type="button" value="+" id="add">
    <input type="button" value="-" id="reduce" disabled>
    <script>
        let total = document.querySelector('#total')
        let add = document.querySelector('#add')
        let reduce = document.querySelector('#reduce')
        //加号事件
        add.addEventListener('click', function () {
            total.value++//隐式转换，因为原来是字符串型string
            reduce.disabled = false
        })
        // 减号事件 事件监听
        reduce.addEventListener('click', function () {
            total.value--//隐式转换，因为原来是字符串型string
            if (total.value <= 1){
                reduce.disabled = true
            }   
        })

2.高阶函数

高阶函数可以被简单理解为函数的高级应用，JavaScript 中函数可以被当成【值】来对待，基于这个特性实现函数的高
级应用。
【值】就是 JavaScript 中的数据，如数值、字符串、布尔、对象等。
学习路径：

函数表达式
回调函数
如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数
简单理解：当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数
 常见的使用场景：

3.环境对象

环境对象指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境
作用：弄清楚this的指向，可以让我们代码更简洁
 函数的调用方式不同，this 指代的对象也不同
 【谁调用， this 就是谁】是判断 this 指向的粗略规则
 直接调用函数，其实相当于是 window.函数，所以 this 指代 window

4.编程思想

当前元素为A状态,其他元素为B状态
使用：

干掉所有人
使用for循环
复活他自己
通过this或者下标找到自己或者对应的元素

//排他思想
let btns = document.querySelectorAll('button')
for (i = 0; i <= btns.length; i ++) {
    //1.先干掉其他人
    //for (let j = 0; j < btns.length; j++) {
    //   btns[j].classList.remove('blue')
    //}
    // 2.复活我自己
    //或者我们只需找出那唯一的blue类，删除，因为用for循环的话会比较麻烦
    doucument.querSelector('.blue').classList.remove('blue')
    this.classList.add('blue')
}

5.综合案例

tab栏切换

// 1.获取元素
let lis = document.querySelectorAll('.tab.tab-item')
let divs = document.querySelectorAll('.products .main')
// 2.头部tab栏切换模块
// 先给四个小li添加点击事件
for (i = 0; i < lis.length; i++) {
    lis[i].addEventListener('click', function() {
        document.querySelector('.tab .active').classlist.remove('active')
        this.classlist.add('active')
        // 3.底部显示隐藏模块 ,要写在事件里面
        document.querySelector('.products .active'),classlist.remove('active')
        divs[i].classList.add('active')
    })
}