WebAPIs 第三天

这篇具有很好参考价值的文章主要介绍了WebAPIs 第三天。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

DOM 事件进阶

  • 事件流
  • 事件委托
  • 其他事件
  • 元素尺寸与位置

一.事件流

  • 事件流与两个阶段说明
  • 事件捕获
  • 事件冒泡
  • 阻止冒泡
  • 解绑事件

1.1 事件流与两个阶段说明

① 事件流:指的是事件完整执行过程中的流动路径

② 事件流分为捕获阶段和冒泡阶段

WebAPIs 第三天,javascript,前端,开发语言

 1.2 事件捕获

  • 从DOM根元素开始去执行对应的事件(从外到里)
  • 代码: DOM.addEventListener(事件类型,事件处理函数,是否使用捕获机制)
  • 说明:addEventListener第三个参数传入true代表是捕获阶段触发(很少使用),如果不屑,默认就是false,false代表冒泡阶段触发
  • 如果用L0事件监听,只有冒泡阶段,没有捕获

1.3 事件冒泡

  • 当一个元素的事件被触发时,同样的事件将会在该元素的所有祖先元素中依次被触发,这一过程被称为事件冒泡
  • 简单理解:当一个元素触发事件后,会依次向上调用所有父级元素的同名事件
  • 事件冒泡是默认存在的
  • L2事件监听第三个参数是false,或者默认都是冒泡

1.4 阻止冒泡

① 问题:如果默认就有冒泡模式的存在,所以容易导致事件影响到父级元素,如果想把事情就限制在当前元素内,就需要阻止事件冒泡

② 阻止冒泡需要拿到事件对象

③ 语法:对象.e.stopPropagation()

④ 此方法可以阻断事件流动传播,不光在冒泡阶段有效,在捕获阶段也有效

1.5 解绑事件

 ① on事件方式:直接使用null覆盖就可以实现事件的解绑

WebAPIs 第三天,javascript,前端,开发语言

② addEventListener方式,必须使用 removeEventListener(事件类型,事件处理函数,[获取捕获或者冒泡])

const btn = document.querySelector('button')
function fn() {
   alert('点击了')
}
btn.addEventListener('click', fn)
// 匿名函数不能解绑
btn.removeEventListener('click', fn)

 1.6 鼠标经过事件的区别

  • mouseover 和 mouseout 有冒泡效果
  • mouseenter 和 mouseleave 没有冒泡效果(推荐)

1.7 两种注册事件的区别

① 传统on注册(L0)

  • 同一个对象,后面注册的事件会覆盖前面注册(同一个事件)
  • 直接使用null覆盖就可以实现事件的解绑
  • 都是冒泡阶段执行的

② 事件监听注册(L2)

  • 语法:addEventListener(事件类型,事件处理函数,是否使用捕获机制)
  • 后面注册的事件不会覆盖前面注册的事件(同一个事件)
  • 可以通过第三个参数去确定在冒泡或捕获阶段执行
  • 必须使用 removeEventListener(事件类型,事件处理函数,[获取捕获或者冒泡])
  • 匿名函数无法被解绑

二.事件委托 

① 事件委托是利用事件流的特征解决一些开发需求的知识技巧

② 优点

  • 减少注册次数,提高程序性能

③ 事件委托:利用事件冒泡的特点,给父元素注册事件,当我们触发子元素的时候,会冒泡到父元素身上,从而触发父元素的事件

  <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <p>无需变色<p>
    </ul>
    <script>
        // 给父元素添加事件,触发子元素
        const ul = document.querySelector('ul')
        ul.addEventListener('click', function(e) {
            //  真正触发元素
            if (e.target.tagName === 'LI') {
                e.target.style.color = 'red'
            }
        })
    </script>

三.其他事件

3.1 阻止冒泡

① 某些情况下组要阻止默认行为的发生,比如阻止链接的跳转,表单域跳转

② 语法:e.preventDefault()

代码:

  <form action="http://www.baidu.com">
        <input type="submit" value="免费注册">
    </form>
    <a href="http://www.baidu.com">百度一下</a>
    <script>
        const form = document.querySelector('form')
        form.addEventListener('submit', function(e) {
            e.preventDefault()
        })

        const a = document.querySelector('a')
        a.addEventListener('click', function(e) {
            e.preventDefault()
        })
    </script>

3.2 页面加载事件

① 概念:加载外部资源,加载完毕时触发的事件

② 为什么要学:

  • 有时候需要等页面资源全部处理完了做一些事情
  • 老代码喜欢把script写到head中,这时候直接找dom元素找不到

③ 事件名:load

④ 监听页面所有资源加载完毕

  • 给window添加load事件
window.addEventListener('load', function () {
   const btn = document.querySelector('button')
   btn.addEventListener('click', function () {
       alert('hello')
   })
})
  • 不光可以监听整个页面资源加载完毕,也可以针对某个资源绑定load事件

⑤ DOMContentLoaded

  • 当初始的HTML文档被完全加载和解析完成之后,DOMContentLoaded事件被触发,无序等到样式表和图像完全加载
  • 事件:DOMContentLoaded
  • 给document添加 DOMContentLoaded 事件
document.addEventListener('DOMContentLoaded', function () {
   const btn = document.querySelector('button')
   btn.addEventListener('click', function () {
   alert('hello')
})
})

3.3 页面滚动事件

① 滚动条在滚动的时候持续触发的事件

② 很多网页需要检测用户把页面滚动到某个区域之后做一些处理,比如返回顶部或者固定导航栏

③ 事件名:scroll

④ 监听整个页面滚动:  给window或document 添加scroll事件

⑤ 监听某个元素内部滚动直接给某个元素添加即可    

// scrollLeft 和 scrollTop
① 获取被卷去的大小
② 获取元素往左,往上滚出去看不到的距离
③ 这两个值都是可读写的 
document.documentElement.scrollTop = 800
        const div = document.querySelector('div')
        window.addEventListener('scroll', function() {
            // 必须写到里面,得到的是一个数字型,不带单位
            const n = document.documentElement.scrollTop
            console.log(n)
            if (n >= 100) {
                div.style.display = 'block'
            } else {
                div.style.display = 'none'
            }
        })

3.4 页面尺寸事件

① 会在窗口尺寸改变的时候触发事件

② resize

const div = document.querySelector('div')
        console.log(div.clientWidth)
        window.addEventListener('resize', function() {
            console.log('hahah')
        })

③ 检测屏幕宽度

  • 获取元素的可见部分宽高(不包含边框,margin, 滚动条)
  • clientWidth和clientHeight

四.元素的尺寸与位置

  • 获取宽高

    ① 获取元素自身的宽和高,包含元素自身设置的宽高,padding,border

    ② offsetWidth 和 offsetHeight

    ③ 包含边框

  • 获取位置

   ① 获取元素距离自己定位父级元素的左,上距离

   ② offsetLeft和pffsetTop 这两个是只读属性文章来源地址https://www.toymoban.com/news/detail-645385.html

到了这里,关于WebAPIs 第三天的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【后端学前端】第三天 css动画 动态搜索框(定位、动态设置宽度)

    视频地址:css动画 动态搜索框(定位、动态设置宽度)_哔哩哔哩_bilibili 通过对大的容器动态设置宽度按,也就是 这里学到一个注意点:在class后的属性会覆盖先写的属性 searchBar的最早宽度是400px,在后面又新定义了一个searchBar的样式为60px 看教程,i 定义与文本中其余部分不

    2024年02月04日
    浏览(48)
  • 学C的第三十三天【C语言文件操作】

    ========================================================================= 相关代码gitee自取 : C语言学习日记: 加油努力 (gitee.com)  ========================================================================= 接上期 : 学C的第三十二天【动态内存管理】_高高的胖子的博客-CSDN博客  =====================================

    2024年02月13日
    浏览(41)
  • Unity开发日记【第三天】——角色动画效果的实现

    目录 一、站立和跑步动画效果 二、跳跃动画 三、对移动过程中的一些优化和修正 本部分我们尝试给我们的角色添加各种动画效果 首先给角色添加组件Animator,我们可以看见该组件要求一个控制器。 接下来在根目录下新建一个文件夹Animation用来存放所有的动画效果,在文件

    2024年02月05日
    浏览(55)
  • 建站系列(五)--- 前端开发语言之HTML、CSS、JavaScript

    建站系列(一)— 网站基本常识 建站系列(二)— 域名、IP地址、URL、端口详解 建站系列(三)— 网络协议 建站系列(四)— Web服务器之Apache、Nginx 建站系列(五)— 前端开发语言之HTML、CSS、JavaScript 建站系列(六)— 后端开发语言 建站系列(七)— 常用前后端框架

    2024年02月09日
    浏览(56)
  • 大型医院云HIS系统:采用前后端分离架构,前端由Angular语言、JavaScript开发;后端使用Java语言开发 融合B/S版电子病历系统

    一套医院云his系统源码 采用前后端分离架构,前端由Angular语言、JavaScript开发;后端使用Java语言开发。融合B/S版电子病历系统,支持电子病历四级,HIS与电子病历系统均拥有自主知识产权。 文末卡片获取联系! 基于云计算技术的B/S架构的医院管理系统(简称云HIS),采用前后

    2024年02月03日
    浏览(50)
  • SSM框架的学习与应用(Spring + Spring MVC + MyBatis)-Java EE企业级应用开发学习记录(第三天)动态SQL

    昨天我们深入学习了 Mybatis的核心对象SqlSessionFactoryBuilder , 掌握MyBatis核心配置文件以及元素的使用 ,也掌握MyBatis映射文件及其元素的使用。那么今天我们需要掌握的是更加复杂的查询操作。 学会编写MyBatis中动态SQL 学会MyBatis的条件查询操作 学会MyBatis的更新操作 学会MyBati

    2024年02月11日
    浏览(54)
  • 嵌入式培训机构四个月实训课程笔记(完整版)-Linux ARM驱动编程第三天-ARM Linux ADC和触摸屏开发 (物联技术666)

    链接:https://pan.baidu.com/s/1V0E9IHSoLbpiWJsncmFgdA?pwd=1688 提取码:1688   教学内容: 1 、 ADC S3C2440 的 A/D 转换器包含一个 8 通道的模拟输入转换器,可以将模拟输入信号转换成 10 位数字编码。 在 A/D 转换时钟频率为 2.5MHz 时,其最大转换率为 500KSPS ( 5 个时钟周期完成一次转换) 输

    2024年02月20日
    浏览(55)
  • 实习记录——第三天

    今天还是去学习,昨天看另一个实习生有在了解ctf什么的,我就打算也看一看,问了问我的导师,他说我闲了可以看看,把我拉到了公司的ctf组,本来以为会是什么高大上的组织,结果好像就是平时分享分享知识,偶尔打个比赛,今天加进去,一天没任何动静。 简单看了看导

    2024年01月25日
    浏览(48)
  • 万物的算法日记|第三天

    笔者自述: 一直有一个声音也一直能听到身边的大佬经常说,要把算法学习搞好,一定要重视平时的算法学习,虽然每天也在学算法,但是感觉自己一直在假装努力表面功夫骗了自己,没有规划好自己的算法学习和总结,因为后半年也该找实习了,所以每日的算法题要进行恶

    2024年02月09日
    浏览(48)
  • 计算机网络---第三天

                                                        OSI参考模型与TCP/IP模型 背景:①兼容性较差,接口不统一            ②不利于排错与维护            ③设备成本高 概念:OSI参考模型定义了网络中设备所遵守的层次结构 优点:①开放的

    2024年04月13日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包