JavaScript之常用事件类型有哪些-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

JavaScript之常用事件类型有哪些

本篇内容介绍了“JavaScript之常用事件类型有哪些”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

创新互联坚持“要么做到,要么别承诺”的工作理念,服务领域包括:网站设计、做网站、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的互助网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!

JavaScript之常用事件类型有哪些

鼠标事件

事件类型

  • click:用户单击主鼠标按钮(一般是左键)或者按下在聚焦时按下回车键时触发

  • dblclick:用户双击主鼠标按键触发(频率取决于系统配置)

  • mousedown:用户按下鼠标任意按键时触发

  • mouseup:用户抬起鼠标任意按键时触发

  • mousemove:鼠标在元素上移动时触发

  • mouseover:鼠标进入元素时触发

  • mouseout:鼠标离开元素时触发

  • mouseenter:鼠标进入元素时触发,该事件不会冒泡

  • mouseleave:鼠标离开元素时触发,该事件不会冒泡

区别:

  • over和out,不考虑子元素,从父元素移动到子元素,对于父元素而言,仍然算作离开

  • enter和leave,考虑子元素,子元素仍然是父元素的一部分

  • mouseenter和mouseleave不会冒泡

事件对象

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

  • altKey:触发事件时,是否按下了键盘的alt键

  • ctrlKey:触发事件时,是否按下了键盘的ctrl键

  • shiftKey:触发事件时,是否按下了键盘的shift键

  • button:触发事件时,鼠标按键类型

    • 0:左键

    • 1:中键

    • 2:右键

位置

  • page:pageX、pageY,当前鼠标距离页面的横纵坐标

  • client: clientX、clientY,鼠标相对于视口的坐标

  • offset:offsetX、offsetY,鼠标相对于事件源的内边距的坐标

  • screen: screenX、screenY,鼠标相对于屏幕

  • x、y,等同于clientX、clientY

  • movement:movementX、movementY,只在鼠标移动事件中有效,相对于上一次鼠标位置,偏移的距离

键盘事件

事件类型

  • keydown:按下键盘上任意键触发,如果按住不放,会重复触发此事件

  • keypress:按下键盘上一个字符键时触发

  • keyup:抬起键盘上任意键触发

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

事件对象

KeyboardEvent

  • code:得到按键字符串,适配键盘布局。

  • key:得到按键字符串,不适配键盘布局。能得到打印字符。

  • keyCode、which:得到键盘编码

表单事件

  • focus:元素聚焦的时候触发(能与用户发生交互的元素,都可以聚焦),该事件不会冒泡

  • blur:元素失去焦点时触发,该事件不会冒泡。

  • submit:提交表单事件,仅在form元素有效。

  • change:文本改变事件

  • input: 文本改变事件,即时触发

其他事件

window全局对象

  • load、DOMContentLoaded、readystatechange

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

浏览器渲染页面的过程:

  1. 得到页面源代码

  2. 创建document节点

  3. 从上到下,将元素依次添加到dom树中,每添加一个元素,进行预渲染

  4. 按照结构,依次渲染子节点

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

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

interactive:触发DOMContentLoaded事件

complete:触发window的load事件

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

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

  • css应该写到页面顶部:避免出现闪烁(如果放到页面底部,会导致元素先没有样式,使用丑陋的默认样式,然后当读到css文件后,重新改变样式)

  • JS应该写到页面底部:避免阻塞后续的渲染,也避免运行JS时,得不到页面中的元素。

  • unload、beforeunload

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

  • scroll

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

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

  • resize

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

  • contextmenu

右键菜单事件

  • paste

粘贴事件

  • copy

复制事件

  • cut

几张距离图片
JavaScript之常用事件类型有哪些
JavaScript之常用事件类型有哪些
JavaScript之常用事件类型有哪些
JavaScript之常用事件类型有哪些

元素位置

  • offsetParent

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

body的offsetParent为null

  • offsetLeft、offsetTop //距离定位元素的距离 没有就是距离body

相对于该元素的offsetParent的坐标

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

  • getBoundingClientRect方法

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

事件模拟

  • click 模拟点击

  • sumbit 模拟提交form

  • dispatchEvent模拟事件

其他补充

  • window.scrollX、window.pageXOffset、window.scrollY、window.pageYOffset

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

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

  • scrollTo、scrollBy

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

  • resizeTo、resizeBy

“JavaScript之常用事件类型有哪些”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!


文章标题:JavaScript之常用事件类型有哪些
当前路径:http://kswsj.cn/article/jigghe.html

其他资讯