Question

我想使用字符串文字创建新的HTML元素。我使用该元素作为对象添加了我需要的所有参数，并使用setAttribute和类似的方法向其中写入参数。现在，我需要使用字符串文字来重写此代码，其中的代码更少，代码更容易理解。

我被创建为字符串文字，并将除addeventListener之外的所有元素都放入其中：

this.parent.innerHTML +=`<${tagName} title="${title} id="${results.id}" href="${title}" onclick=>${title} </a>`;

如何使用字符串文字正确重写addEventListner？

let newElem = document.createElement(tagName);
      newElem.addEventListener(
        "click",
        function(evt) {
          evt.preventDefault();
          this.removeElements();
          this.createElem("h3", title);
        }.bind(this),
        false
      );

Answer 1

由于js的作用域行为，我认为找到一种在模板字符串中内联完成此操作的解决方案可能会给您带来更多的问题，而不是值得的。但是有两种方法可以与您现有的代码配合使用。

但是首先，请修复导致其无法运行的错误，例如丢失的"，并使用tagName来关闭html标签。

方法1：

只需将事件侦听器分配给父级，而不是任何子级。您可以使用evt.target来检查目标是否为所需的标签，获取其属性等。根据代码的设置方式，这可能是最佳的解决方案。

请记住，此事件侦听器仅应添加一次。

const parent = document.querySelector('.parent')
const tagName = 'a'
const title = 'Click Me'
const results = {
  id: 1234567
}

parent.innerHTML += `<${tagName} title="${title}" id="el-${results.id}" href="${title}">${title} </${tagName}>`;

parent.addEventListener('click', function(evt) {
    evt.preventDefault();
    console.log(evt.target.title)
    // this.removeElements();
    // this.createElem("h3", title);
  })

<div class="parent" />

方法2：

分配innerHTML后，该元素即被添加到文档中，并且可以使用querySelector来获取。您似乎正在为每个标签分配一些ID，因此只需使用该ID选择标签，然后添加事件侦听器即可。

一个类会更好地同时选择多个元素。

const parent = document.querySelector('.parent')
const tagName = 'a'
const title = 'Click Me'
const results = {
  id: 1234567
}

parent.innerHTML += `<${tagName} title="${title}" id="el-${results.id}" href="${title}">${title} </${tagName}>`;

parent.querySelector(`#el-${results.id}`)
  .addEventListener('click', function(evt) {
    evt.preventDefault();
    // this.removeElements();
    // this.createElem("h3", title);
  })

<div class='parent' />

如何在字符串文字中写入addEventListener？

1 个答案: