首页

面试题:JS中创建10个a标签,点击的时候弹出对应的序号

kkcode
2023-08-22  阅读 387

这个问题涉及到以下两个面试考点:

  1. DOM 操作:这个问题考察了对 DOM 操作的熟悉程度。在 JavaScript 中,可以使用 document.createElement() 方法来创建新的元素节点,然后使用 appendChild() 方法将其添加到页面中。接着,可以使用事件监听器(如 addEventListener())来监听点击事件,并在点击时执行相应的操作。

  2. 作用域和闭包:这个问题还考察了对作用域和闭包的理解。在创建这10个标签的过程中,需要注意变量作用域的问题。可以使用循环来创建这些标签,但在循环体内部创建的事件监听器会共享同一个变量。为了确保每个标签点击时能正确地弹出对应的序号,需要使用闭包来创建一个独立的作用域,以便每个事件监听器都可以访问到其对应的序号。

以下是一个实现这个功能的示例代码:

for (let i = 0; i < 10; i++) {
  let link = document.createElement('a');
  link.textContent = 'Link ' + i;
  link.addEventListener('click', (function(index) {
    return function() {
      alert('Clicked link ' + index);
    };
  })(i));
  document.body.appendChild(link);
}复制代码

在上述代码中,使用了一个立即执行函数来创建闭包,并将当前的索引 i 作为参数传递给该函数。这样,每个闭包都会在创建时捕获到一个独立的索引值,从而保证了每个事件监听器都能正确显示对应的序号。

总结起来,这个问题考察了对 DOM 操作和作用域及闭包的理解,以及如何合理地组织和处理事件监听器。

本文为作者原创文章,转载无需和我联系,但请注明转载链接。 【前端黑猫】