使用button当按钮和使用div当按钮有什么区别？

在前端开发中，使用<button>元素和<div>元素作为按钮在功能上是可以相似的，因为它们都可以通过JavaScript添加交互性。然而，这两种方法之间存在一些关键的区别，这些区别主要体现在语义化、可访问性、默认样式和行为上。

1. 语义化：

   • <button>元素具有明确的语义，表示一个可点击的按钮，用于提交表单、触发操作或执行其他功能。这有助于屏幕阅读器等辅助技术识别和理解页面内容。
   • <div>元素是一个通用的容器元素，本身没有特定的语义。当用作按钮时，需要通过添加适当的类名或角色属性（如role="button"）来提供额外的语义信息。

2. 可访问性：

   • <button>元素默认具有与按钮相关的可访问性特性，如可以被键盘焦点选中并按Enter键激活。这对于视障用户或使用键盘导航的用户非常重要。
   • 当使用<div>作为按钮时，可能需要额外的工作来确保相同的可访问性特性，例如通过JavaScript添加键盘事件处理程序。

3. 默认样式和行为：

   • <button>元素在浏览器中具有默认的按钮样式，如边框、背景色和文本对齐方式。这些样式可以通过CSS进行覆盖或定制。
   • <div>元素没有默认的按钮样式，需要完全通过CSS来定义外观。这提供了更大的灵活性，但同时也需要更多的CSS工作。

4. 表单提交：

   • 当<button>元素位于表单内部时，它默认具有提交表单的功能（除非显式指定type="button"）。这使得在表单中使用<button>作为提交按钮非常方便。
   • <div>元素没有默认的表单提交功能，需要通过JavaScript来实现类似的行为。

综上所述，虽然使用<div>作为按钮在技术上是可行的，但通常推荐使用<button>元素，因为它提供了更好的语义化、可访问性和默认行为。这有助于创建更加健壮、可用和可维护的前端代码。