$(function(){
    bindClickBtnSms();
    bindClickSubmit();
    })

    

$(function() { ... }):

• 这是一个简写形式，等同于 $(document).ready(function() { ... })。
• 用于确保网页文档的 DOM 加载完成后再执行内部代码。
• 防止在 DOM 元素尚未加载完成时调用 JavaScript 操作，从而避免出错。

转换为纯 JavaScript

javascript复制代码document.addEventListener('DOMContentLoaded', function() {
    bindClickBtnSms();
    bindClickSubmit();
});

$(function() { ... })：

• 这是 jQuery 的快捷方式，等价于 $(document).ready(function() { ... })。
• 它会在 DOM 完全加载并解析完成后执行代码。

document.addEventListener('DOMContentLoaded', function() { ... })：

• 原生 JavaScript 中使用 DOMContentLoaded 事件来实现相同功能。
• 确保在 DOM 加载完成后执行绑定操作。

内部方法（bindClickBtnSms 和 bindClickSubmit）保持不变：

• 这些方法本身无需修改，它们的定义和逻辑仍然适用。

addEventListener 和 'DOMContentLoaded' 的性质

这两个是 JavaScript 中的原生特性，不是自定义的。

---

1. addEventListener

• 定义：
  • addEventListener 是 JavaScript 提供的 原生方法，用于向 DOM 元素添加事件监听器。
  • 支持绑定任意类型的事件（如 'click', 'input', 'keyup', 'DOMContentLoaded' 等）。
• 语法：javascript复制代码element.addEventListener(event, listener, options);
  • event：要监听的事件类型（如 'click', 'DOMContentLoaded' 等）。
  • listener：事件发生时要调用的函数。
  • options（可选）：控制监听器行为的对象，如 { once: true } 表示只触发一次。
• 特点：
  1. 支持多次绑定，不会覆盖已绑定的监听器。
  2. 可以通过 removeEventListener 移除已绑定的事件。

示例：

javascript复制代码document.getElementById('myButton').addEventListener('click', function() {
    console.log('Button clicked!');
});

---

2. 'DOMContentLoaded'

• 定义：
  • 'DOMContentLoaded' 是一个特定的、内置的事件类型，用于表示 DOM 树已完全加载和解析完成。
  • 与页面中的图片、样式表或其他外部资源是否加载完成无关。
• 用途：
  • 常用于确保脚本在操作 DOM 元素时，DOM 已经完全加载完成。
• 区别于 'load' 事件：
  • 'DOMContentLoaded'：在 仅 DOM 加载完成 后触发，速度更快。
  • 'load'：在 页面的所有资源（包括图片、样式等）加载完成 后触发。

示例：

javascript复制代码document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM 已完全加载和解析完成');
});

---

总结

特性	addEventListener	'DOMContentLoaded'
类型	原生 JavaScript 方法	原生 JavaScript 事件类型
自定义/特定	特定方法，用于绑定事件监听器	特定事件，用于检测 DOM 加载完成
用途	添加事件监听器到 DOM 元素	确保 DOM 已加载后执行代码
是否可替代	是，可用 on<event>（如 onclick）代替	否，属于内置事件，无法被自定义替代

这两个都是 JavaScript 原生特性，无需额外定义或引入。