0

我有一个函数可以将某些内容返回到 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
4

1 回答 1

1

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

您可以返回一个包含两个元素的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>

如果要返回 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>

于 2016-02-23T02:59:30.553 回答