Как написать addEventListener внутри строковых литералов? - PullRequest
Новая
       9

Как написать addEventListener внутри строковых литералов?

0 голосов
/ 26 мая 2019

Я хочу создать новый элемент 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
      );

1 Ответ

0 голосов
/ 26 мая 2019

Из-за поведения js scoping я думаю, что поиск решения для этого в строках вашего шаблона, скорее всего, вызовет у вас больше проблем, чем оно того стоит. Но есть два способа сделать это, которые должны хорошо сочетаться с существующим кодом.

Но сначала исправьте ошибки, из-за которых он не запускается, например, отсутствие ", а также использование 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. Кажется, вы назначаете какой-то идентификатор каждому тегу, поэтому вы можете просто использовать этот идентификатор, чтобы выбрать тег, а затем добавить прослушиватель событий.

Класс будет лучше выбирать одновременно несколько элементов. 

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' />
...