重学JS（一）— 三个小知识点

1. 传统DOM加载完毕事件（DOMContentLoaded）

document.addEventListener("DOMContentLoaded", function() {
  . . .
});

2. <script>标签关键字：async，defer

// 异步加载三个脚本，但是执行顺序不一定（按照加载完成的顺序）
<script async src="js/vendor/jquery.js"></script>
<script async src="js/script2.js"></script>
<script async src="js/script3.js"></script>

// 异步加载三个脚本，按照标签顺序执行（相当于一个异步加载的队列）
<script defer src="js/vendor/jquery.js"></script>
<script defer src="js/script2.js"></script>
<script defer src="js/script3.js"></script>

3. WAI-ARIA 语义化标签，针对屏幕阅读器，无障碍API增强可访问性

主要特性

• 角色（role）

<div class="nav" role="navigation"></div>
<div class="banner" role="banner"></div>
<div class="tab" role="tab"></div>

• 属性

// aria-required="true" 意味着表单项必填
<input type="text" name="name" aria-required="true" />

• 状态

// aria-disabled="true" 意味着表单项当前禁用
<input type="text" name="name" aria-disabled="true" />

WAI-ARIA属性可以作为CSS选择器，但不会对页面实际内容有影响