Question

我有一个函数可以将某些内容返回到dom（ag-grid中的cellrenderer）。是否可以使用document.createElement（）创建两个不同的元素，使用addEventListener（）附加事件侦听器，并将它们返回到单个函数中？

例如，这有效，但我需要返回两个元素：

function() {

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

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

  return el;

}

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

这是我正在尝试做的事情。我能够让它返回html的唯一方法是在返回时添加outerHTML方法，但它似乎并没有这样添加事件监听器。如果你取消.outerHTML，它将返回[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标记时，附加的处理程序会丢失。

您可以返回包含

等元素的DocumentFragment

＆＃13;

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())

＆＃13;

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

＆＃13;

如果要返回html，则可以使用onclick属性，如

＆＃13;

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();

＆＃13;

<!-- 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>

＆＃13;

在一个函数返回中使用eventListeners的多个document.createElement？

1 个答案: