JS中addEventListener不能用的问题

来源:互联网 发布:java三大框架书籍 编辑:程序博客网 时间:2024/05/09 22:32
<html> 
<head> 
</head> 
<body> 
<div id="name3" style="border:1px solid red;padding:10px 10px 10px 10px;" style="border:1px solid red;padding:10px 10px 10px 10px;"> 
<div id="name2" style="border:1px solid green;padding:10px 10px 10px 10px;" style="border:1px solid green;padding:10px 10px 10px 10px;">点击</div> 
</div> 
<div id="info"></div> 
<script type="text/javascript"><!-- 
var name3=document.getElementById('name3'); //要注意 
var name2=document.getElementById('name2'); //要注意 
var info=document.getElementById('info'); 


name3.addEventListener('click',function () { info.innerHTML += "红色" + "<br>"; },false); 
name2.addEventListener('click',function () { info.innerHTML += "绿色" + "<br>"; },false); 

// --></script> 
</body> 

</html> 

以上代码是能用的,但是换了JS代码和Div的位置后,就不能用了

<html> 
<head> 
</head> 
<body> 

<script type="text/javascript"><!-- 
var name3=document.getElementById('name3'); //要注意 
var name2=document.getElementById('name2'); //要注意 
var info=document.getElementById('info'); 


name3.addEventListener('click',function () { info.innerHTML += "红色" + "<br>"; },false); 
name2.addEventListener('click',function () { info.innerHTML += "绿色" + "<br>"; },false); 

// --></script> 
<div id="name3" style="border:1px solid red;padding:10px 10px 10px 10px;" style="border:1px solid red;padding:10px 10px 10px 10px;"> 
<div id="name2" style="border:1px solid green;padding:10px 10px 10px 10px;" style="border:1px solid green;padding:10px 10px 10px 10px;">点击</div> 
</div> 
<div id="info"></div> 

</body> 

</html> 


原创粉丝点击