<!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>
<style type="text/css">
.test{background-color:#fff;
border:1px solid gray;
height:100px;
width:100px;
margin:0 10px 0;
float:left;
}
ul{ clear:both;}
ul,li{ list-style:none;}
ul,li{ width:100%;}
</style>
</head>
<body>
<div id="test1" class="test" onclick="console.log('test1.click!');" onmouseover="console.log('test1:mouseover!');">test1</div>
<div id="test2" class="test">test2</div>
<div id="test3" class="test">test3</div>
<ul id="test4"></ul>
<script type="text/javascript">
var $=function(o){
return document.getElementById(o);
}
$("test2").onclick=function(){
console.log('test2:click');
}
$("test2").onmouseover=function(){
console.log('test2:mouseover');
}
/*$("test3").addEventListener("click",function(){
console.log("test3:click!")
})
$("test3").addEventListener("mouseover",function(){
console.log("test3:mouseover!")
})*/
$("test2").onclick=function(){
for(var i=0;i<10;i++){
var liNode=document.createElement("li");
var liText=document.createTextNode("text"+(i+1));
liNode.appendChild(liText);
$("test4").appendChild(liNode);
}
}
if ($("test4").attachEvent) {
$("test4").attachEvent("onclick", remove);
} else if ($("test4").addEventListener) {
$("test4").addEventListener("click", remove, false);
}
function remove(e){
var e=e?e:window.event;
var tag=e.target||e.srcElement;
alert(tag.innerHTML)
}
//$("test4").addEventListener("click",function(e){
// var e=e?e:window.event;
// alert(e.target.innerHTML)
// })
</script>
</body>
</html>
