DOMイベントバブル処理


<!DOCTYPE html>
<html>
	<head>
		<title> DOM</title>
<meta charset="utf-8"/>
		<style type="text/css">
			
			#myid li:nth-child(2n+1){
                height:20px;
                background-color: red;

			}
		</style>
		<script type="text/javascript">

           function addEvent (obj,eventType,callfunction,useCapture) {
           	      var event = window.event || event;
           	      if(window.addEventListener){
           	      	//  '||' 
           	      	var mycap=useCapture || false;
           	      	obj.addEventListener(eventType,callfunction,useCapture);
           	      }else{
           	      	obj.attachEvent("on"+eventType,callfunction);
           	      }
           }

          window.onload = function (){

             var parentLi=document.getElementById("myid");
				 addEvent(parentLi,"click",function(){
				 	var target = event.srcElement||event.targetElement;	
                    if(target.nodeName=="LI"){
				 	alert(target.innerHTML);
                    }
				 	
				 },true);

          }


		</script>
	</head>
<body>
	<ul id="myid">
		 <span>sdfsdf</span>
		<li id="1">1</li>
		<li id="2">2</li>
		<li id="3">3</li>
		<li id="4">4</li>
		<li id="5">5</li>
		<li id="6">6</li>
		<li id="7">7</li>
		<li id="8">8</li>
		<li id="9">9</li>
	</ul>
</body>
</html>