• 技术文章 >web前端 >js教程

    JavaScript之常用事件类型整理

    长期闲置长期闲置2022-08-04 15:33:05转载166
    本篇文章给大家带来了关于javascript的相关知识,其中主要介绍了关于JavaScript常用事件类型的相关问题,包括了鼠标事件、键盘事件等等内容,下面一起来看一下,希望对大家有帮助。

    【相关推荐:javascript视频教程web前端

    鼠标事件

    事件类型

    区别:

    事件对象

    所有的鼠标事件,事件处理程序中的事件对象,都为 MouseEvent

    位置

    键盘事件

    事件类型

    keydown、keypress 如果阻止了事件默认行为,文本不会显示。

    事件对象

    KeyboardEvent

    表单事件

    其他事件

    window全局对象

    window的load:页面中所有资源全部加载完毕的事件
    图片的load:图片资源加载完毕的事件

    浏览器渲染页面的过程:

    1. 得到页面源代码
    2. 创建document节点
    3. 从上到下,将元素依次添加到dom树中,每添加一个元素,进行预渲染
    4. 按照结构,依次渲染子节点

    document的DOMContentLoaded: dom树构建完成后发生

    readystate(页面有三个状
    态): loading(正在加载中)、interactive(可交互)、complete(完成)

    interactive:触发DOMContentLoaded事件

    complete:触发window的load事件

    readystatechange(当页面状态发生改变的时候触发//返回改变后的状态)

    js代码应该尽量写到页面底部

    beforeunload: window的事件,关闭窗口时运行,可以阻止关闭窗口
    unload:window的事件,关闭窗口时运行

    窗口发生滚动时运行的事件

    通过scrollTop和scrollLeft,可以获取和设置滚动距离。

    窗口尺寸发生改变时运行的事件,监听的是视口尺寸

    右键菜单事件

    粘贴事件

    复制事件

    几张距离图片
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    元素位置

    获取某个元素第一个定位的祖先元素,如果没有,则得到body

    body的offsetParent为null

    相对于该元素的offsetParent的坐标

    如果offsetParent是body,则将其当作是整个网页

    该方法得到一个对象,该对象记录了该元素相对于视口的距离

    事件模拟

    其他补充

    window.scrollX、window.pageXOffset: 相当于根元素的scrollLeft

    window.scrollY、window.pageYOffset: 相当于根元素的scrollTop

    scrollTo: 设置滚动条位置 //window.scrollTo(x , y) 所有dom对象都可以用
    scrollBy:表示原来的基础上增加x和y轴距离 window.scrollBy(x, y)

    【相关推荐:javascript视频教程web前端

    以上就是JavaScript之常用事件类型整理的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:CSDN,如有侵犯,请联系admin@php.cn删除
    专题推荐:javascript
    上一篇:什么是构造函数?详解JavaScript中的构造函数 下一篇:一起分析JavaScript异常处理方式
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• 归纳整理JavaScript中push()、pop()、unshift()、shift()方法• JavaScript实现十大排序算法(图文详解)• 实例介绍javaScript操作字符串的一些常用方法• JavaScript中什么是匿名函数?应用场景浅析• JavaScript数值的方法和属性详解
    1/1

    PHP中文网