Как использовать `onclick` внутри строкового литерала JavaScript - PullRequest
Новая
       10

Как использовать `onclick` внутри строкового литерала JavaScript

0 голосов
/ 08 марта 2019

Можно ли использовать onclick внутри строкового литерала?

У меня есть page вид, подобный следующему: 

const page = () => {
  const htmlOutput = `
    <button
      onclick="openMessageComposer"
      id="messageCta">Message</button> // Using the id works
  `;
  document.getElementById('app').innerHTML += htmlOutput;
  document.getElementById('messageCta').onclick = () => {
    console.log("openMessageComposer")
  }
}

export default page;

Это происходитиспользуется в маршрутизаторе следующим образом: 

import page from './page.js';

window.onload = () => {
  page()
}

, который импортируется в мой файл index.html как модуль как <script type="module" src="router.js"></script>

Это работает.

Однако яхотел бы избежать document.getElementById('messageCta').onclick.Есть ли способ использовать событие onclick вместо этого?

Что-то вроде 

const openMessageComposer = () => {
  console.log("openMessageComposer")
}

, которое существовало бы внутри компонента page.

1 Ответ

1 голос
/ 08 марта 2019

В настоящее время у вас есть два клика: один, во встроенном атрибуте, который пытается ссылаться на глобальную переменную с именем openMessageComposer, но затем ничего не делает с ней. (другой - ваш .onclick). Если вы хотите удалить .onclick, просто убедитесь, что встроенный обработчик вызывает функцию openMessageComposer вместо: 

onclick="openMessageComposer()"

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

Если вам требуется добавить id к добавленному элементу, который вам не нравится, то вместо этого создайте элемент явно с помощью createElement, чтобы вы имели прямую ссылку на него, не давая ему id и присвойте его onclick свойству: 

const page = () => {
  const button = document.createElement('button');
  button.textContent = 'Message';
  button.onclick = openMessageComposer;
  document.getElementById('app').appendChild(button);
};
...