【总结】1217转行小白历险记 前端开发中经常用事件

一、常用事件

1. 鼠标事件

• click：用户点击元素时触发。
• dblclick：用户双击元素时触发。
• mousedown：用户按下鼠标按钮时触发。
• mouseup：用户释放鼠标按钮时触发。
• mousemove：鼠标在元素上移动时触发。
• mouseenter：鼠标进入元素时触发。
• mouseleave：鼠标离开元素时触发。
• mouseover：鼠标移至元素上方时触发。
• mouseout：鼠标从元素上方移开时触发。

2. 触摸事件（移动设备）

• touchstart：用户开始触摸屏幕时触发。
• touchmove：用户手指在屏幕上滑动时触发。
• touchend：用户停止触摸屏幕时触发。
• touchcancel：触摸被意外中断，如电话呼入等。

3. 键盘事件

• keydown：用户按下键盘上的键时触发。
• keyup：用户释放键盘上的键时触发。
• keypress：用户按下键盘上的字符键时触发（已逐渐被废弃）。

4. 表单事件

• submit：提交表单时触发。
• change：表单元素的值改变时触发。
• focus：元素获得焦点时触发。
• blur：元素失去焦点时触发。
• input：用户输入时连续触发。

5. 窗口事件

• resize：窗口或框架被调整大小时触发。
• scroll：滚动页面时触发。
• load：页面或图像加载完成时触发。
• unload：用户离开页面时触发。

6. 媒体事件

• play：媒体播放时触发。
• pause：媒体暂停时触发。
• ended：媒体播放结束时触发。

7. 动画和过渡事件

• animationstart：CSS动画开始时触发。
• animationend：CSS动画结束时触发。
• animationiteration：CSS动画重复时触发。
• transitionend：CSS过渡完成时触发。

二、常用属性

HTML 属性

1. 全局属性：

   • class：指定元素的类名，用于CSS样式和JavaScript操作。
   • id：提供元素的唯一标识符。
   • style：直接在元素上应用内联样式。
   • title：为元素提供额外的信息（通常以工具提示形式展示）。
   • data-*：自定义数据属性，用于存储页面或应用程序的私有数据。

2. 表单属性：

   • value：输入字段的值。
   • name：表单元素的名称。
   • placeholder：输入字段的占位文本。
   • type：指定输入字段的类型，如 text, password, submit。

3. 链接和资源属性：

   • href：定义链接的目标URL。
   • src：指定图像或脚本的资源URL。
   • alt：为图像提供替代文本。

CSS 属性

1. 布局属性：

   • display：元素的显示类型（如 block, inline, flex）。
   • position：元素的定位方式（如 relative, absolute, fixed）。
   • margin, padding：元素的外边距和内边距。
   • width, height：元素的宽度和高度。

2. 视觉属性：

   • color：文本的颜色。
   • background：背景的颜色或图像。
   • border：元素的边框样式、宽度和颜色。
   • font-size, font-family：字体大小和字体系列。

3. 动画和过渡属性：

   • transition：定义CSS属性变化的过渡效果。
   • animation：定义动画序列。

JavaScript DOM 属性

1. 节点属性：

   • innerText, textContent：元素的文本内容。
   • innerHTML：元素的HTML内容。
   • className, classList：元素的类名。

2. 尺寸和位置属性：

   • clientWidth, clientHeight：元素的视觉区域大小。
   • offsetWidth, offsetHeight：元素的布局大小。
   • scrollWidth, scrollHeight：元素的滚动区域大小。

3. 事件相关属性：

   • event.target：触发事件的元素。
   • event.type：发生的事件类型。

三、事件相关属性

1. target：

   • 表示事件实际触发的元素。例如，在一个按钮点击事件中，event.target 将是被点击的按钮元素。

2. currentTarget：

   • 表示事件处理程序绑定的元素。这与 target 可能不同，特别是在事件冒泡或捕获阶段中。

3. type：

   • 表示触发的事件类型，如 'click', 'mouseover' 等。

4. clientX 和 clientY：

   • 在鼠标或触摸事件中，这些属性表示事件发生时鼠标或触摸点相对于浏览器视口的水平和垂直位置。

5. pageX 和 pageY：

   • 类似于 clientX 和 clientY，但表示的是相对于整个文档的位置。

6. offsetX 和 offsetY：

   • 表示事件发生时，鼠标指针相对于事件目标元素的偏移量。

7. keyCode：

   • 在键盘事件中，表示被按下的键的代码（不推荐使用，建议使用 key）。

8. key：

   • 在键盘事件中，提供被按下的键的值。

9. preventDefault 方法：

   • 一个函数，用于阻止事件的默认行为。例如，阻止链接的默认跳转行为或表单的提交行为。

10. stopPropagation 方法：

    • 用于停止事件的进一步传播（冒泡或捕获）。

11. bubbles：

    • 表示事件是否冒泡。

12. cancelable：

    • 表示事件是否可以被取消（即是否可以使用 preventDefault 方法）。

13. detail：

    • 在某些事件类型中，提供关于事件的额外信息。例如，在自定义事件中可能包含特定的数据。