Question

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

＆＃13;

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

＆＃13;

我该怎么做？

当前不起作用的代码：

＆＃13;

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

＆＃13;

Answer 1

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

Answer 2

此：

li.onclick = toogle(this);

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

li.onclick = toogle;

Answer 3

你可以这样做：

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
}

Answer 4

下面的代码段演示了如何传递使用event.target点击的元素。详细信息在源中进行了评论。

段

＆＃13;

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

＆＃13;

li {
  background: #000;
}

＆＃13;

<ul></ul>

＆＃13;

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

4 个答案:

段