Web API——事件监听续、高阶函数、环境变量、时间对象、事件对象、网页特效(scorll家族、offset家族)

本文详细介绍了JavaScript中的事件监听,包括focus、blur、mouseenter、mouseleave等,以及高阶函数、环境对象的概念。讲解了如何操作DOM节点,如添加、删除和查找,以及时间对象的使用。此外,还探讨了事件对象、事件流、阻止事件冒泡和默认行为。最后,文章展示了网页特效中的滚动事件和元素定位方法。
摘要由CSDN通过智能技术生成

​​​​​​​事件监听扩展

失去焦点和获得焦点是一个鼠标行为,获得焦点是指当鼠标点击此输入框使其处于编辑状态,这就是获得焦点。失去焦点是指当鼠标点击其他输入框或其他区域时刚开始的那个输入框就属于失去焦点状态。和点击事件和鼠标移动事件有所区别。

input输入框的search可以用来表示搜索框的类型

        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')

        })

focus得到焦点,blur失去焦点

mouseenter鼠标经过,mouseleave鼠标离开

id选择器前面是#号

input相当于对文本框输入事件的监听类型

<textarea placeholder="说点什么吧..." id="area" cols="30" rows="10" maxlength="200">

文本域相关类型。

      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 = '取消'

                }

            })

        }

当小按钮被全部选中的时候,大按钮发生改变可以采用逆向思维,至少有一个没有被选中!,同时可以通过循环的方式给多个对象添加监听!这种方法是最快的!

小于等于也有隐式转换!!

高阶函数

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

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

益智竹

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值