DOM事件冒泡处理

最新推荐文章于 2023-03-11 11:38:46 发布

xie1987524

最新推荐文章于 2023-03-11 11:38:46 发布

阅读量103

点赞数

分类专栏： javascipt 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/xie1987524/article/details/84606597

版权

javascipt 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

<!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>