JavaScript学习笔记(十五) 事件模型 下

正文

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：阻止事件传播