事件委托/事件代理(5-1)

item

事件委托

概念

  • [ ] 利用事件的冒泡传播机制
  • （触发当前元素行为，其父级所有元素的该行为都触发）

何时用怎么用

  • [ ] 一个容器里多个元素都要绑定同一事件，就只需给最外层绑定该事件即可

  • [ ] 方法执行时，通过事件源（e.target）区分进行不同的操作

购物车案例

布局
图17

1
2
3
4
<div id="box">
	<Span>span购物车</span>
	<div id="mark" style="display:none">mark购物清单</div>
</div>

功能
（多个元素都要绑定同一点击事件）

    • [ ] 点击box或者span打开mark
    • [ ] 点击mark没反应
    • [ ] 点击body则mark收回

注意点

    • [ ] style=”display:none”必须在行内元素里才能进行下面if判断
1
2
3
if(mark.style.display=="none"){
	mark.style.display="block";
}
    • [ ] 利用时间委托要注意根据事件源区分不同操作
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      document.body.onclick=function(e){
      		e=e||window.event;
      		e.target=e.target||e.srcElement;
      		
      		// 如果点击的是box或者box下的span
      		if(e.target.id.toLowerCase()==="box"||(e.target.tagName.toLowerCase()==="span"&& e.target.parentNode.id==="box")){
      			if(mark.style.display=="none"){
      				mark.style.display="block";
      			}else{
      				mark.style.display="none";
      			}
      			return;
      		}
      		
      		//如果事件源是mark不进行任何操作
      		if(e.target.id.toLowerCase()==="mark"){
      			return;
      		}
      		
      		//如果事件源是body则mark收回
      		mark.style.display="none";
      	}

完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
	<title></title>
</head>
<style type="text/css">
	html,body,div,span{
		margin:0;
		padding:0;
		font-family: "\96B6\4E66",Helvetica,sans-serif;/*Unicode 编码为了在页面中不显示中文的兼容方法*/
		font-size:20px;
	}
	html,body{
		width:100%;
		height:100%;
		overflow: hidden;
		background-color: #eee;
		/*不显示滚动条，隐藏掉页面空白处*/
	}
	#box{
		position:absolute;
		left:50%;
		top:50px;
		width:120px;
		height:50px;
		line-height: 50px;
		text-align: center;
		margin-left: -150px;
		background-color: white;
		border: 1px solid red;
	}
	#box #mark{
		
		position: absolute;
		top:50px;
		left:-1px;
		width:300px;
		height:150px;
		line-height: 150px;
		text-align: center;
		border:1px solid red;
		background-color: white;
	}
</style>
<body>
<div id="box">
	<Span>span购物车</span>
	<div id="mark" style="display:none">mark购物清单</div>
</div>
<script type="text/javascript">
	var box=document.getElementById("box"),mark=document.getElementById("mark");	
	//点span点开,点span,mark,body都收
	document.body.onclick=function(e){
		e=e||window.event;
		e.target=e.target||e.srcElement;
		// 如果点击的是box或者box下的span
		if(e.target.id.toLowerCase()==="box"||(e.target.tagName.toLowerCase()==="span"&& e.target.parentNode.id==="box")){
			if(mark.style.display=="none"){
				mark.style.display="block";
			}else{
				mark.style.display="none";
			}
			return;
		}
		//如果事件源是mark不进行任何操作
		if(e.target.id.toLowerCase()==="mark"){
			return;
		}
		
		mark.style.display="none";
	}
</script>
</body>
</html>