将一个onclick事件添加到一个div

Question

我不知道这是否被允许或者是否可行。是否可以创建一个带有onclick事件的div元素，以便在div区域中的任何位置被点击时都能触发该事件。

例如：

var divTag = document.createElement("div");
divTag.id="new-ID"; 
var onClickCommand = "printWorking()"   //printworking is another method that simply print "I'm working" to the console
divTag.onclick = onClickCommand;
console.log("onclick command added");
console.log(divTag.onclick);
parentDiv.appendChild(divTag); //This simply adds the div tag to the page.

生成的 HTML：

 <!--<div id="new-ID">-->

 whatever content I decide to add to the divTag.innerHTML

---

我注意到生成的 div 标签没有 onclick 命令。这是因为不允许吗？

那么有两个问题。

1：是否可以给 div 添加 onclick，并在单击 div 的任何区域时触发它？ 2：如果可以，为什么我的 onclick 方法没有传递到 div 上。

---

非常奇怪：

divTag.setAttribute("onclick", "printWorking()");

上面的代码可以完美地运行。

以下所有代码都不能把 onclick 事件传递给 div 元素。

divTag.onclick=printWorking;

divTag.onclick="printWorking";

divTag.onclick="printWorking()";

还尝试了其他多种变体。

- OVERTONE

---

似乎手动设置onclick并没有按预期工作。我需要使用.setAttribute代替。 - OVERTONE

@feeela。我已经搜索过了。有多个例子似乎不相关，或者我自己尝试过没有效果。原因似乎与我上面的评论有关。 - OVERTONE

如果你把“setAttribute”放到了一个答案中，我会为它点赞的。所以对于这个带有答案的问题，我给一个+1。 - Pascal

Answer 1

能否将onclick添加到一个div中，并在单击div的任何区域时发生。

可以...但应该谨慎操作。确保有一些机制允许键盘访问。建立在可行的基础上

如果是这样，为什么我的onclick方法没有传递到我的div中？

您正在分配一个字符串，而需要的是函数。

divTag.onclick = printWorking;

虽然有更好的方法来分配事件处理程序，但旧版本的Internet Explorer有足够大的差异，因此您应该使用库来抽象它。有很多非常小的事件库，每个主要库（jQuery）都具有事件处理功能。

话虽如此，现在是2019年，实际上不存在旧版本的Internet Explorer，因此您可以直接使用addEventListener。

- Quentin

---

需要使用括号吗？ - OVERTONE

如果加上括号，它就会变成一个函数“调用”，返回值将被分配给函数本身，而不是函数。 - Quentin

现在这就有意义了。我在代码的其他地方做过多次，但完全不知道发生了什么。 - OVERTONE

Answer 2

将onclick分配如下：

divTag.onclick = printWorking;

当赋值时，onclick属性不能采用字符串。相反，它采用函数引用（在此情况下为printWorking）。

在HTML中分配时，onclick属性可以是一个字符串，例如：<div onclick="func()"></div>，但这通常不被推荐。

- Digital Plane

---

为什么不被推荐？ - Andrew S

Answer 3

一切正常。您不能使用divtag.onclick，因为“onclick”属性不存在。您需要使用.setAttribute()方法首先创建此属性。请查看http://reference.sitepoint.com/javascript/Element/setAttribute。在开始给出“-”之前，您应该先阅读文档。

- godlark

Answer 4

你可以像给按钮添加onclick函数一样，给div添加一个onclick函数。

<div onclick="myfunction">Click me
</div>
<script>
function myfunction(){
alert("I gave a div an onClick!");
}
</script>

- Adu Gyamfi Kwabena