在一个函数中将 document.createElement 与事件侦听器相乘 Return？

Question

我有一个函数，可以 return 将某些东西放入 dom（ag-grid 中的 cellrenderer）。是否可以使用 document.createElement() 创建两个不同的元素，使用 addEventListener() 附加事件侦听器，并 return 它们在一个函数中？

例如，这可行，但我需要 return 两个元素：

function() {

  var el = document.createElement('input');

  el.addEventListener('click', function () {
       console.log("el clicked");
  });

  return el;

}

//returns <input/> into the dom, and attaches eventlistener

这就是我想要做的。我能够将其添加到 return html 的唯一方法是在 return 上添加 outerHTML 方法，但它似乎并没有以这种方式添加事件侦听器。如果您取消 .outerHTML，它将 return [object HTMLInputElement][object HTMLButtonElement]

function() {

  var el = document.createElement('input');
  var el2 = document.createElement('button');

  el.addEventListener('click', function () {
       console.log("el clicked");
  });
  el2.addEventListener('click', function () {
       console.log("el2 clicked");
   });

  return el.outerHTML + el2.outerHTML

}

//want this to return <input/><button/> with eventlisteners attached

Answer 1

这是因为事件附加到 dom 元素，当您获得这些元素的 html 标记时，附加的处理程序将丢失。

您可以 return 一个包含两个元素的 DocumentFragment

function x() {

  var el1 = document.createElement('input');

  var el2 = document.createElement('button');
  el2.innerText = 'Button';

  el1.addEventListener('click', function() {
    snippet.log("el1 clicked");
  });
  el2.addEventListener('click', function() {
    snippet.log("el2 clicked");
  });

  var fragment = document.createDocumentFragment();
  fragment.appendChild(el1);
  fragment.appendChild(el2);
  return fragment;

}

document.body.appendChild(x())

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

如果您想 return html，那么您可以使用 onclick 属性，例如

function x() {

  var el1 = document.createElement('input');

  var el2 = document.createElement('button');
  el2.innerText = 'Button';

  el1.setAttribute('onclick', 'el1click()');
  el2.setAttribute('onclick', 'el2click()');

  return el1.outerHTML + el2.outerHTML

}

function el1click() {
  snippet.log("el1 clicked");
}

function el2click() {
  snippet.log("el2 clicked");
}

ct.innerHTML = x();

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

<div id="ct"></div>

在一个函数中将 document.createElement 与事件侦听器相乘 Return？

Multiple document.createElement with eventListeners in One Function Return?

javascript

ag-grid