Javascript 将 onclick 事件添加到 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6909988/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
add an onclick event to a div
提问by OVERTONE
I don't know if this is allowed or even possible. Is it possible to create a div element with an onclick event so that if anywhere in the div's area is clicked, the event will run.
我不知道这是否允许甚至可能。是否可以使用 onclick 事件创建一个 div 元素，以便如果单击 div 区域中的任何地方，该事件将运行。
Eg JAVASCRIPT:
例如 JAVASCRIPT：
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 generated:
生成的 HTML：
<!--<div id="new-ID">-->
whatever content I decide to add to the divTag.innerHTML
I notice how theres no onclick command going through to the generated div. Id this because its not allowed?
我注意到没有 onclick 命令通过生成的 div。这是因为不允许吗？
So 2 questions then.
那么2个问题。
1:Is it possible to add onclick to a div and have it occur if any area of the div is clicked. 2:If yes then why is the onclick method not going through to my div.
1：是否可以将 onclick 添加到 div 并在单击 div 的任何区域时发生。2：如果是，那么为什么 onclick 方法没有通过我的 div。
How very odd:
多么奇怪：
divTag.setAttribute("onclick", "printWorking()");
Above works flawlessly.
以上工作完美无缺。
All below don't and wont pass the onclick to the div.
下面的所有内容都不会也不会将 onclick 传递给 div。
divTag.onclick=printWorking;
divTag.onclick="printWorking";
divTag.onclick="printWorking()";
Multiple other variants have been tried too.
也尝试了多种其他变体。
采纳答案by Quentin
Is it possible to add onclick to a div and have it occur if any area of the div is clicked.
是否可以将 onclick 添加到 div 并在单击 div 的任何区域时发生。
Yes … although it should be done with caution. Make sure there is some mechanism that allows keyboard access. Build on things that work
是的……虽然应该谨慎行事。确保有一些允许键盘访问的机制。建立在有效的东西上
If yes then why is the onclick method not going through to my div.
如果是，那么为什么 onclick 方法没有通过我的 div。
You are assigning a string where a function is expected.
您正在为需要函数的位置分配一个字符串。
divTag.onclick = printWorking;
There are nicer ways to assign event handlers though, although older versions of Internet Explorer are sufficiently different that you should use a library to abstract it. There are plenty of very small event librariesand every major library jQuery) has event handling functionality.
虽然有更好的方法来分配事件处理程序，但旧版本的 Internet Explorer 有很大的不同，您应该使用库来抽象它。有很多非常小的事件库，每个主要的库 jQuery都有事件处理功能。
That said, now it is 2019, older versions of Internet Explorer no longer exist in practice so you can go direct to addEventListener
也就是说，现在是 2019 年，旧版本的 Internet Explorer 在实践中不再存在，因此您可以直接访问 addEventListener
回答by godlark
Everythings works well. You can't use divtag.onclick, becease "onclick" attribute doesn't exist. You need first create this attribute by using .setAttribute(). Look on this http://reference.sitepoint.com/javascript/Element/setAttribute. You should read documentations first before you start giving "-".
一切正常。您不能使用 divtag.onclick，因为“onclick”属性不存在。您需要首先使用 .setAttribute() 创建此属性。看看这个 http://reference.sitepoint.com/javascript/Element/setAttribute。在开始给出“-”之前，您应该先阅读文档。
回答by Digital Plane
Assign the onclick like this:
像这样分配onclick：
divTag.onclick = printWorking;
The onclick property will not take a string when assigned. Instead, it takes a function reference (in this case, printWorking).
The onclick attribute can be a string when assigned in HTML, e.g. <div onclick="func()"></div>, but this is generally not recommended.
onclick 属性在分配时不会采用字符串。相反，它需要一个函数引用（在本例中为printWorking）。
onclick 属性在 HTML 中分配时可以是字符串，例如<div onclick="func()"></div>，但通常不推荐这样做。
