事件

事件就是一件事情,或者一个操作行为
在JS中任何一个元素天生自带了很多的行为(和我们是否为其绑定方法没有关系)

常见的鼠标事件

  • click 鼠标单击事件,当单击鼠标(一般都为左键)或按下回车键时,会触发事件
  • dbclick 鼠标为双击事件,当双击鼠标时,会触发事件
  • mousedown 当任意按下鼠标键时,会触发事件
  • mouseup 当释放鼠标按键时,会触发事件
  • mouseover 当鼠标移动进到当前元素的区域就会触发事件
  • mouseout 当鼠标移出当前元素的区域就会触发事件
  • mousemove 当鼠标在当前元素区域内不断移动时,会重复触发事件

区别：

over和out，不考虑子元素，从父元素移动到子元素，对于父元素而言，仍然算作离开
enter和leave，考虑子元素，子元素仍然是父元素的一部分
mouseenter和mouseleave不会冒泡

键盘事件

keydown：按下键盘上任意键触发，如果按住不放，会重复触发此事件
keypress：按下键盘上一个字符键时触发
keyup：抬起键盘上任意键触发

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

事件对象

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的事件，关闭窗口时运行

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

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

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

contextmenu
右键菜单事件

paste
粘贴事件

copy
复制事件

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