Question

我有这段代码：

let button = document.createElement('button');
button.addEventListener('click', create, false);

当我点击按钮时，执行“创建”功能。我的功能“创造”是：

function create(event) {
event.preventDefault();
console.log(this);
}

“this”是按钮的DOM。

现在，我想要的是，在创建按钮后，“create”函数自动执行，但是将按钮的DOM作为参数传递。也就是说，执行该功能不需要任何交互。但是“创建”功能的结果必须相同。

谢谢！

Answer 1

我不知道你想要实现什么，但这里是代码......

使用事件监听器：

var button = document.createElement('button');
button.innerHTML = 'OK';
document.body.appendChild(button);

button.addEventListener('click', create, false);

function create(event) {
  event.preventDefault();
  console.log(this);
}

没有事件监听器：

var button = document.createElement('button');
button.innerHTML = 'OK';
document.body.appendChild(button);

create.bind(button)();

function create() {
  console.log(this);
}

Answer 2

我不确定这是否正是您想要的，但只要按钮添加到DOM，您就可以使用MutationObserver来调用“create”：

  function create(event) {
    // Runs whenever a button is added to the DOM; this is the button element
    console.log(this);
  }

  // Observe additions of new DOM nodes to the body and its children
  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {        
      mutation.addedNodes.forEach(function(node) {
        if (node.tagName == 'BUTTON') {
          // Call create with the added button as 'this'
          create.call(node);
        }
      });
    });
  });

  // Setup the observer--look only for node additions and removals in body and all child elements
  observer.observe(document.body, {childList: true, attributes: false, characterData: false, subtree: true});

  var button = document.createElement('button');
  document.body.appendChild(button);

请注意，当按钮添加到DOM时会发生调用，而不是在创建按钮时。因此，如果您调用document.createElement（'button'）但不将其附加到DOM，则不会调用create。

JS将DOM作为函数

2 个答案: