在javascript创建一个div，当触发onclick事件时调用一个方法，参数是这个div，代码怎么写
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在javascript创建一个div，当触发onclick事件时调用一个方法，参数是这个div，代码怎么写相关的知识，希望对你有一定的参考价值。
function myFun()for(var i = 0; i < 100; i++)var myDiv = document.createElement("div");myDiv.onclick=function()alert(this);; //实现点击myDiv，获得当前点击的Div. this就是该div
<body onload="myFun();)> 参考技术A <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function createDiv()
document.body.innerHTML="<div style='width:100px; height:100px; border:1px solid red;'>这是新创建的DIV</div>";
</script>
</head><body>
<input type="button" onclick="createDiv();" value="创建DIV"/>
</body>
</html>
Javascript：除非元素附加到 document.body，否则事件不会触发
【中文标题】Javascript：除非元素附加到 document.body，否则事件不会触发【英文标题】：Javascript: Event does not fire unless element appended to document.body 【发布时间】：2010-09-27 12:45:55 【问题描述】：我在 javascript 中动态创建一个元素 (div)，并在其上注册一个事件监听器：
var tooltip = document.createElement('div');
tooltip.onclick = function() alert('hello');
现在，如果我将此元素附加到文档正文：
document.body.appendChild(tooltip);
一切正常，事件被捕获。但是（出于定位目的）我想将此元素附加到页面中的（静态）子元素，例如：
document.getElementById('id').appendChild(tooltip);
并且元素已正确生成和定位 - 但现在不再捕获 onclick 事件。有什么想法吗？这是 x 浏览器，所以我一定错过了什么。
谢谢，唐。
【问题讨论】：
【参考方案1】：您创建的不仅是一个，而是许多 div。 试试这个（我希望你不介意，但我也修复了 HTML 和 CSS）：
<html>
<head>
<script type="text/javascript">
function makeDiv()
if(!document.getElementById('tooltipDiv'))
var tooltip = document.createElement('div');
tooltip.id = "tooltipDiv";
// Give our tooltip a size and colour so we can see it
tooltip.style.height = '200px';
tooltip.style.position = 'absolute';
tooltip.style.width = '200px';
tooltip.style.backgroundColor = '#eee';
// Register onclick listener
tooltip.onclick = function() alert('hello');
//tooltip.addEventListener("click", function() alert('hello'); , false);
// *** Comment one of these out: ***
//document.body.appendChild(tooltip);
document.getElementById('myDiv').appendChild(tooltip);
</script>
</head>
<body>
<div id="myDiv"
onmouseover="makeDiv();"
style="position: relative; top: 100px; left: 100px; border: 1px solid red; width: 200px;">
<span>my div text</span>
</div>
</body>
</html>
【讨论】：
更新：是的，因为 tooltip 是 'myDiv' 的子级，它也会触发鼠标悬停。【参考方案2】：也许你需要在追加后注册事件处理程序？
【讨论】：
嗨 - 是的，不幸的是似乎没有任何区别【参考方案3】：您的代码在 Firefox 3.0.5 和 IE7 上运行良好。你确定你的例子是正确的吗？
【讨论】：
啊，你打败了我。我已经在 FF4、IE7、Opera 7 和 Chrome 中进行了测试，并且可以正常工作。 OP可以发布一个完整的例子吗？肯定还有其他问题。 嗨 - 好的，我在下面发布了我的代码（作为答案），你会发现它只适用于 document.body。【参考方案4】：好的，这是我的代码，抱歉耽搁了。下面发布了一个带有解决方法的版本：
<html>
<head>
<script type="text/javascript">
function makeDiv()
var tooltip = document.createElement('div');
// Give our tooltip a size and colour so we can see it
tooltip.style.height = '200px';
tooltip.style.position = 'absolute';
tooltip.style.width = '200px';
tooltip.style.backgroundColor = '#eee';
// Register onclick listener
tooltip.onclick = function() alert('hello');
// *** Comment one of these out: ***
//document.body.appendChild(tooltip);
document.getElementById('myDiv').appendChild(tooltip);
</script>
</head>
<body>
<div id="myDiv"
onmouseover="makeDiv();"
style="position: relative; top: 100px; left; 100px; border: 1px solid red; width: 200px;">
<span>my div text</span>
</div>
</body>
</html>
==================================== 好的 - 所以这有效：
<html>
<head>
<script type="text/javascript">
function makeDiv()
var tooltip = document.createElement('div');
// Give our tooltip a size and colour so we can see it
tooltip.style.height = '200px';
tooltip.style.position = 'absolute';
tooltip.style.width = '200px';
tooltip.style.backgroundColor = '#eee';
// Register onclick listener
tooltip.onclick = function() alert('hello');
// *** Comment one of these out: ***
//document.body.appendChild(tooltip);
document.getElementById('container').appendChild(tooltip);
</script>
</head>
<body>
<div id="container" style="border: 1px solid blue; float: left; ">
<div id="myDiv"
onmouseover="makeDiv();"
style="position: relative; border: 1px solid red; width: 200px;">
<span>my div text</span>
</div>
</div>
</body>
</html>
【讨论】：
问题在FF3、IE7和Chrome中存在，但在Opera中有效。 对不起我之前的评论（我现在删除了）。我有点着急。我想我可以在我的电脑上复制你的问题。我看看我能不能回答这个问题。 好的，我想我有一个解决方法，我会将它添加到我的“答案”的底部，以便您查看（以后我将简单地编辑我的原始帖子；））。问题似乎是由于“myDiv”是触发创建“工具提示”的元素和附加工具提示的元素。【参考方案5】：这里是一些删除 onmouseout 工具提示的代码。
在创建工具提示时给它一个 ID：
toolTip.setAttribute('id','toolTip');
然后是onmouseout
function removeDiv(container)
var toolTip = document.getElementById('toolTip');
document.getElementById(container).removeChild(toolTip);
【讨论】：
以上是关于在javascript创建一个div，当触发onclick事件时调用一个方法，参数是这个div，代码怎么写的主要内容，如果未能解决你的问题，请参考以下文章
用事件冒泡实现在div内点击，不触发事件，当在div外点击时才触发事件
如何通过单击隐藏在 JavaScript 中的 div 来触发函数？
关于uniapp的事件监听，使用uni.$once和uni.$on导致的重复监听