正文
3、事件类型
HTML 与 JavaScript 通过事件进行交互,常见的事件如下:
(1)鼠标事件
mousedown
:在按下鼠标按键时触发mouseup
:在松开鼠标按键时触发click
:在点击鼠标时触发dblclick
:在双击鼠标时触发mouseenter
:在鼠标移入特定范围时触发mouseleave
:在鼠标移出特定范围时触发mousemove
:鼠标在特定范围内移动时触发mouseover
:鼠标移到某元素上触发mouseout
:鼠标从某元素移开触发
(2)键盘事件
keydown
:在按下键盘按键时触发keyup
:在松开键盘按键时触发keypress
:在按住键盘按键时触发
(3)UI 事件
load
:在文档或图像加载完成后触发unload
:在文档或图像销毁完成后触发error
:加载文档或图像时发生错误abort
:加载文档或图像时出现中断scroll
:在滚动滚动条时触发resize
:调整窗口大小时触发
(4)焦点事件
focus
:在元素获得焦点时触发,事件不冒泡blur
:在元素失去焦点时触发,事件不冒泡
(5)表单事件
select
:在被选定时触发change
:在被修改时触发submit
:在被提交时触发
4、事件对象
当一个事件被触发时,会产生一个事件对象,这个事件对象会隐式传入事件处理函数
因此,我们可以在事件处理函数中通过事件对象的属性和方法获取事件的相关信息
(1)事件对象的常用属性
type
:事件名称target
:触发事件的目标元素currentTarget
:触发事件的当前元素bubbles
:事件是否为冒泡类型cancelBubble
:是否取消冒泡行为cancelable
:是否能调用preventDefault()
方法取消默认行为defaultPrevented
:是否有调用preventDefault()
方法eventPhase
:事件传播的阶段timeStamp
:触发事件的时间clientX
:鼠标指针相对于浏览器页面的水平坐标clientY
:鼠标指针相对于浏览器页面的垂直坐标screenX
:鼠标指针相对于屏幕的水平坐标screenY
:鼠标指针相对于屏幕的垂直坐标shiftKey
:“SHIFT” 键是否被按下ctrlKey
:“CTRL” 键是否被按下altKey
:“ALT” 键是否被按下metaKey
:“meta” 键是否被按下
(2)事件对象的常用方法
preventDefault
:阻止默认行为stopPropagation
:阻止事件传播