通过 DOM 创建事件时将元素作为参数传递 - JS Javascript答案

【问题标题】：Pass element as argument when creating event via DOM - JS Javascript通过 DOM 创建事件时将元素作为参数传递 - JS Javascript
【发布时间】：2016-10-05 18:51:50
【问题描述】：

我正在尝试使用 DOM 创建 HTML 元素。我需要将<li> 元素传递给toogle 方法，如下所示：

<ul>
<li onclick="toogle(this)"><a>Some text</a></li>
</ul>

我该怎么做？

当前无效的代码：

var li = document.createElement("li");                  
li.onclick = toogle(this);

【问题讨论】：

Javascript: Setting onclick dynamically and passing in the element itself的可能重复

标签： javascript html dom this

【解决方案1】：

var li = document.createElement("li");
li.onclick = function () { toogle(this); };

【讨论】：

我最终得到了这个解决方案，我认为它是最好的。谢谢！

【解决方案2】：

这个：

li.onclick = toogle(this);

实际上执行toogle 函数，并将其返回值分配给onclick。如果你希望你的函数被称为点击处理程序，那么它应该是

li.onclick = toogle;

【讨论】：

我正在尝试将元素 <li> 作为参数传递给 toggle 方法。这不起作用。

【解决方案3】：

下面的代码片段演示了如何传递使用event.target 被点击的元素。详情在源码中注释。

片段

var li = document.createElement("li");

// Needs to be in DOM before you can click it
document.querySelector('ul').appendChild(li);

// Assigning class for testing
li.className = 'klass';

// Add click event for li
li.addEventListener('click', function(e) {

  // event.target is always the element that was clicked
  var tgt = e.target;

  // Verifying that the li was passed
  console.log(tgt.className);

  // klass
}, false);

li {
  background: #000;
}

&lt;ul&gt;&lt;/ul&gt;

【讨论】：

【解决方案4】：

你可以这样做：

var li = document.createElement("li");
li.addEventListener('click', toogle);

点击时会调用toogle。这是更好的方法。

然后你可以得到元素：

function toogle(e) {
  // "e.target" will represent the element
}

或者，如果您想按照自己的方式进行操作，那么您可以这样做：

var li = document.createElement("li");
li.onclick = toogle;

然后你得到元素：

function toogle() {
  // "this" will represent the element
}

【讨论】：

没用。您只是忽略了我需要将元素本身作为参数传递。
如果你使用onclick，那么this将代表函数调用时的元素，如果你使用addEventListener，那么你可以将传递的参数（我们称之为e）传递给获取元素e.target。
我已经对我的答案进行了编辑，并添加了一个关于如何获取元素的示例。