事件委托

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
ul{
width: 100px;
height: 50px;
background-color: red;
}
li{
float: left;
}


</style>
</head>
<body>
<ul onclick="u()" id="u">
<span>aaaaaaaaaaaaaa</span>
<li>aaaaaaaaaaaaa</li>
<li>aaaaaaaaaaaaa</li>
<li>aaaaaaaaaaa</li>
<li>aaaaaaaaaaaaaaa</li>
<li>aaaaaaaaaaaaaaa</li>
<li>aaaaaaaaaaaaaaaa</li>
<li>aaaaaaaaaaaaaaa</li>
<span>aaaaaaaaaaaaaa</span>
<P id="1" onclick="n()">aaaaaaaaaaaa</P>
</ul>

<script type="text/javascript">
function u(){
alert('uuuuuuuuuuuuuuu');
}
var ul = document.getElementById('u');
var li = document.getElementById('u').getElementsByTagName('li');

ul.onclick = function (event){
var e = event || window.event,
source = e.target || e.srcElement;
console.log(source);

/*if (source.nodeName.toLowerCase() == "li") {

};*/
}

 

function n(e){
stopPropagation(e);
}

function stopPropagation(e) {
if (window.event) {
window.event.cancelBubble = true;
}else{

e.stopPropagation();
}

}

function addElement(){
var li = document.createElement('li');
li.innerHTML="新元素";
li.setAttribute('id', 1);
ul.appendChild(li);

}
addElement();



</script>
</body>
</html>

posted @ 2018-08-17 15:03  gxw123  阅读(93)  评论(0)    收藏  举报