🐭好让人傻傻分不清—DOM篇

前言

上篇我们见识到了 CSS 中那些傻傻分不清的点，这次我们来看看 DOM 操作中会有哪些傻傻分不清，话不多说，直接进入正题。

script 的 async / defer

我们都会通过 script 标签来加载 js 代码，如下方式：

<script src="/path/to/script.js"></script>

大部分网页中的 script 标签内容体积都是比较大的，当浏览器遇到 script 标签的时候，会等脚本下载完并执行结束，之后才能继续处理剩余的页面，具体步骤如下：

• 暂停文档的解析
• 发起请求下载脚本
• 下载完毕，执行脚本
• 继续解析剩余文档

这样就会存在以下问题：

1. 脚本不能访问到位于它们下面的 DOM 元素，因此，脚本无法给它们添加处理程序等。
2. 如果页面顶部有一个重的脚本，它会“阻塞页面”。在该脚本下载并执行结束前，用户都不能看到页面内容。

为了解决这种情况，html 提供了两种方式加载 script 标签

<script src="/path/to/script.js" async></script>
<script src="/path/to/script.js" defer></script>

两者之间的区分在于执行的时机不同

• 下载了 async 脚本后，浏览器将暂停文档解析，执行脚本并继续解析文档。

• 而只有当文档解析完成了的时候，才会执行 defer 脚本。

• async 脚本在异步下载后立即执行，因此它们的执行顺序可能与在页面中出现的顺序不同。defer脚本可以保证执行的顺序。

stopImmediatePropagation / stopPropagation

stopImmediatePropagation() 可以像 stopPropagation() 方法那样防止事件冒泡到父元素。但是，它同时会阻止调用同一事件的其他监听器。 如果多个事件监听器被附加到相同元素的相同事件类型上，当此事件触发时，它们会按其被添加的顺序被调用。如果在其中一个事件监听器中执行 stopImmediatePropagation()，那么剩下的事件监听器都不会被调用。 在下面的示例代码中，有 3 个监听器处理用 button 表示的按钮的单击事件。

button.addEventListener('click', function () {
  console.log('foo');
});

button.addEventListener('click', function (e) {
  console.log('bar');
  e.stopImmediatePropagation();
});

button.addEventListener('click', function () {
  console.log('baz');
});

单击该按钮将在控制台中打印 foo 和 bar。我们看不到 baz，因为最后一个监听器没有被调用。

currentTarget / target

currentTarget 和 target 是我们监听一些事件时，event 对象上的属性，其实两者从名称上也是比较好区分的，举个例子:

element.addEventListener('click', function (event) {
    // event 上会有 currentTarget 和 target 属性
});

• currentarget 是事件被绑定的元素，上面的示例代码中，event.currentTarget 就是当前的元素。
• target 是用户真实触发的元素，它可以是当前元素，也可以是它的任何子元素(事件冒泡)。

我们可以通过以下方式来判断一个事件是否由原始元素触发:

element.addEventListener('click', function (event) {
    if (event.currentTarget === event.target) {
        console.log('处理逻辑');
    }
});

// 当然也可以通过 event.stopPropagation() 阻止子元素事件冒泡

key / keyCode / which

key、keyCode 和 which 都可以用来确定哪个按键被按下，key 返回的是用户按下的物理按键的值，如 “Enter”。下面是处理文本框的 keyPress 事件的代码示例。

// 检查用户是否按了回车键，按键编码是 13
element.addEventListener('keydown', function (event) {
    if (event.keyCode === 13) {
        // 代码逻辑
    }
});

注意：不同浏览器实现which 和 keyCode的效果不同，且which 和 keyCode已被弃用，建议用 key 来替代。

// 当然也可以这么来兼容
const key = event.which || event.keyCode || 0;

keydown / keypress / keyup

虽然同为按键触发事件，且看起来都很相似，但它们之间还是有较大的差异性。

1. 执行的顺序不同

当用户按下一个键或不同键的组合时，keydown、keypress 和keyup按此顺序触发

• 当用户按下按键时，keydown 事件首先被触发
• 当用户放开按键时，keyup 事件最后被触发
• keypress 会在以上两个事件之间触发，注意：官方已弃用该 API，推荐用 keydown 代替

1. 如果用户按住按键不放，keydown 和keypress事件会触发多次，而 keyup 只在用户放开按键时触发一次。

b / i / strong / em

默认情况下，<b>(bold) 和 <strong> 可以加粗文本。<i>(italic) 和 <em>(emphasis) 可以让文本变成斜体。 每个浏览器都有自己的默认样式，但整体上差不多。 chrome 和 safari:

strong,
b {
  font-weight: bold;
}

i,
cite,
em,
var,
address,
dfn {
  font-style: italic;
}

firefox:

b,
strong {
  font-weight: bolder;
}

i,
cite,
em,
var,
dfn {
  font-style: italic;
}

虽然视觉上看着都一样，但是彼此还是有区别的:

• strong em更加语义化，b``i 只是单纯视觉上有效果。
• strong em 在语句中表示重点、强调，在屏幕阅读器发音会重读强调。

结束语

总会有分不清东南和西北，分不清雨水和泪水，分不清现实和梦境；这都没关系，铁汁，当下我们又分清了不少东西，再接再厉。

相关资料

# 🐯好让人傻傻分不清—CSS篇

# 🐵好让人傻傻分不清—JS篇