currentScript 属性是 JavaScript 中 document 对象的一个属性，它返回正在执行的 <script> 元素。这个属性对于动态加载脚本或在脚本内部引用脚本元素本身时非常有用。

应用场景

动态加载脚本：

• 可以在动态加载的脚本中获取脚本元素本身的属性（如 src、data-* 等），以便进行进一步的逻辑处理。

  模块化脚本：

• 在模块化脚本中，可以根据脚本元素上的自定义属性来决定脚本的行为。

调试和日志记录：

• 在大型项目中，特别是加载多个脚本时，可以通过 currentScript 获取当前执行的脚本，帮助调试和日志记录。

　样式和内容注入：

• 可以在脚本执行时，动态地将样式或内容注入到页面的特定位置，基于脚本标签的位置或属性。

假设有一个动态加载的脚本，它根据 data-theme 属性来设置页面的主题样式。

    <h1 id="title">Hello World!</h1>
    <script src="theme-loader.js" data-theme="dark"></script>

// 获取当前执行的脚本元素
const script = document.currentScript;

// 从脚本元素中获取 data-theme 属性的值
const theme = script.getAttribute("data-theme");

// 定义主题样式
const themes = {
  dark: {
    backgroundColor: "#333",
    color: "#fff",
  },
  light: {
    backgroundColor: "#fff",
    color: "#000",
  },
};

// 应用主题样式
const applyTheme = (themeName) => {
  const themeStyles = themes[themeName];
  if (themeStyles) {
    document.body.style.backgroundColor = themeStyles.backgroundColor;
    document.body.style.color = themeStyles.color;
  } else {
    console.warn(`Theme "${themeName}" is not defined.`);
  }
};

// 调用函数应用主题
applyTheme(theme);

event.target 属性可以用来实现事件委托 (event delegation)。

Event 接口的 target 只读属性是对事件分派到的对象的引用。当事件处理器在事件的冒泡或捕获阶段被调用时，它与 event.currentTarget 不同。

// Make a list
var ul = document.createElement("ul");
document.body.appendChild(ul);

var li1 = document.createElement("li");
var li2 = document.createElement("li");
ul.appendChild(li1);
ul.appendChild(li2);

function hide(e) {
  // e.target 引用着 <li> 元素
  // 不像 e.currentTarget 引用着其父级的 <ul> 元素。
  e.target.style.visibility = "hidden";
}

// 添加监听事件到列表，当每个 <li> 被点击的时候都会触发。
ul.addEventListener("click", hide, false);

Element.closest() 方法用来获取：匹配特定选择器且离当前元素最近的祖先元素（也可以是当前元素本身）。如果匹配不到，则返回 null。

<article>
  <div id="div-01">
    Here is div-01
    <div id="div-02">
      Here is div-02
      <div id="div-03">Here is div-03</div>
    </div>
  </div>
</article>

var el = document.getElementById("div-03");

var r1 = el.closest("#div-02");
// 返回 id 为 div-02 的那个元素

var r2 = el.closest("div div");
// 返回最近的拥有 div 祖先元素的 div 祖先元素，这里的话就是 div-03 元素本身

var r3 = el.closest("article > div");
// 返回最近的拥有父元素 article 的 div 祖先元素，这里的话就是 div-01

var r4 = el.closest(":not(div)");
// 返回最近的非 div 的祖先元素，这里的话就是最外层的 article