JavaScript与HTML之间的交互是通过事件实现的。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。
1.事件三要素
事件目标(event target)
发生的事件与之相关联或与之相关的对象
事件处理程序(event handler)
处理或相应事件的函数
事件对象(event object)
与特定事件相关且包含有关该事件详细信息的对象
2.事件流
DOM同时支持两种事件模型:捕获型事件和冒泡型事件
并且每当某一事件发生时,都会经过捕获阶段->处理阶段->冒泡阶段(有些浏览器不支持捕获)
事件捕获: document->html->body
处理目标: 事件处理
事件冒泡: body->html->document
3.事件类型
load 元素加载完毕后触发,适用于window或者文件加载。
unload 当页面完全卸载后在window上触发,当所有框架都卸载后在框架集上触发。
select 当用户选择文本框(<input>,<textarea>)中的一个或多个字符时
change 当控件的值发生更改的时候触发
resize 当浏览器窗口被调整到一个新的高度或者宽度时,会触发
scroll 当用户滚动带滚动条的元素中的内容时,在该元素上触发resize,scroll会在变化期间重复被激发,尽量保持代码简单
blur 元素失去焦点的时候触发
focus 元素获得焦点的时候触发,不支持冒泡
//IE支持
focusin 与focus等价,支持冒泡
focusout 与blur等价,支持冒泡
click 点击主鼠标按钮或者按下回车按键的时候触发。只有在一个元素上相继发生mousedown,mouseup事件,才会触发click事件
dblclick 双击主鼠标按钮时触发
mousedown 任意鼠标按钮按下时触发
mouseup 释放鼠标按钮触发
mousemove 鼠标在元素内部移动的时候重发触发
mousewheel 滚轮事件
mouseenter 鼠标光标从元素外部首次移动到元素范围内激发,不冒泡。 【不支持子元素】
mouseleave 在位于元素上方的鼠标光标移动到元素范围之外时触发,不冒泡【不支持子元素】
mouseover 鼠标位于元素外部,将其首次移入另一个元素边界之内时触发 【支持子元素】
mouseout 在位于元素上方的鼠标光标移入到另外一个元素中。【支持子元素】在被选元素上与mouseleave效果相同
keydown 按下键盘任意键时触发,如果按住不放会重复触发此事件
keypress 按下键盘字符键时触发,如果按住不放会重复触发此事件
keyup 释放键盘上键时触发
当键盘事件发生时,event对象的keyCode属性中会包含一个代码与键盘上的特定键对应,对数字字母键,keyCode属性的值与ASCII码中对应的小写字母和数字编码相同