</style> </head> <body> <button id="btn">add</button> <div>123</div> <div>111111</div> <script> var $ = function(id){ return document.getElementById(id); }; $('btn').onclick = function(){ var div = document.createElement('div'); div.innerHTML = Math.random(); document.body.appendChild(div); }
document.onclick = function(e){ e = window.event || e; var t = e.target || e.srcElement; var name = t.tagName.toLowerCase(); if( name == 'div' ){ alert( t.innerHTML ); } }
比如
需要给页面中的div赋于onclick事件,页面初始的div倒是可以成功加载上,那之后动态添加的dom却没有onclick事件,需要对生成的div再次定义onclick,这样就显得很麻烦,
事件委托就可以解决这个问题,比如<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312" />
<title></title>
<style>
</style>
</head>
<body>
<button id="btn">add</button>
<div>123</div>
<div>111111</div>
<script>
var $ = function(id){
return document.getElementById(id);
};
$('btn').onclick = function(){
var div = document.createElement('div');
div.innerHTML = Math.random();
document.body.appendChild(div);
}
document.onclick = function(e){
e = window.event || e;
var t = e.target || e.srcElement;
var name = t.tagName.toLowerCase();
if( name == 'div' ){
alert( t.innerHTML );
}
}
</script>
</body>
</html>给document定义onclick,点击的时候 判断点击的dom对象,如果是div,那么进行相关操作。