本篇文章给大家带来了关于javascript的相关知识，其中主要介绍了关于javascript常用事件类型的相关问题，包括了鼠标事件、键盘事件等等内容，下面一起来看一下，希望对大家有帮助。
【相关推荐：javascript视频教程、web前端】
鼠标事件
事件类型
- 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 如果阻止了事件默认行为，文本不会显示。
立即学习“Java免费学习笔记（深入）”；
事件对象
KeyboardEvent
- code：得到按键字符串，适配键盘布局。
- key：得到按键字符串，不适配键盘布局。能得到打印字符。
- keyCode、which：得到键盘编码
表单事件
- focus：元素聚焦的时候触发（能与用户发生交互的元素，都可以聚焦），该事件不会冒泡
- blur：元素失去焦点时触发，该事件不会冒泡。
- submit：提交表单事件，仅在form元素有效。
- change：文本改变事件
- input: 文本改变事件，即时触发
其他事件
window全局对象
- load、DOMContentLoaded、readystatechange
window的load：页面中所有资源全部加载完毕的事件
图片的load：图片资源加载完毕的事件
浏览器渲染页面的过程：得到页面源代码创建document节点从上到下，将元素依次添加到dom树中，每添加一个元素，进行预渲染按照结构，依次渲染子节点
document的DOMContentLoaded: dom树构建完成后发生
readystate(页面有三个状
态): loading(正在加载中)、interactive(可交互)、complete(完成)
interactive：触发DOMContentLoaded事件
complete：触发window的load事件
readystatechange（当页面状态发生改变的时候触发//返回改变后的状态）
js代码应该尽量写到页面底部
css应该写到页面顶部：避免出现闪烁（如果放到页面底部，会导致元素先没有样式，使用丑陋的默认样式，然后当读到css文件后，重新改变样式）
JS应该写到页面底部：避免阻塞后续的渲染，也避免运行JS时，得不到页面中的元素。
unload、beforeunload
beforeunload: window的事件，关闭窗口时运行，可以阻止关闭窗口
unload：window的事件，关闭窗口时运行
技术上面应用了三层结构，AJAX框架，URL重写等基础的开发。并用了动软的代码生成器及数据访问类，加进了一些自己用到的小功能，算是整理了一些自己的操作类。系统设计上面说不出用什么模式，大体设计是后台分两级分类，设置好一级之后，再设置二级并选择栏目类型，如内容，列表，上传文件，新窗口等。这样就可以生成无限多个二级分类，也就是网站栏目。对于扩展性来说，如果有新的需求可以直接加一个栏目类型并新加功能操作
- scroll
窗口发生滚动时运行的事件
通过scrollTop和scrollLeft，可以获取和设置滚动距离。
- resize
窗口尺寸发生改变时运行的事件，监听的是视口尺寸
- contextmenu
右键菜单事件
- paste
粘贴事件
- copy
复制事件
- cut
几张距离图片
元素位置
- 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视频教程、web前端】
