事件委托_百度搜索框（5-1）

DOM

效果图18
知识点
$$ f=a+b $$

  • [ ] 去掉input框onfocus时显出的默认边框颜色

    1
    outline: none;

  • [ ] 去掉a标签的下划线

    1
    text-decoration: none;

  • [ ] z-index的用法
    只能在position属性值为relative或absolute或fixed的元素上有效。

  • [ ] 可以阻止一个容器中某些特殊元素，让其不再委托范围内

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    document.body.onclick=function(e){
        e=e||window.event;
        e.target=e.target||e.srcElement;
            ……
            ……
    	//可以阻止一个容器中某些特殊元素，让其不再委托范围内（单独把input的传播阻止掉）
        input.onclick=function(e){
        	e=e||window.event;
        	e.stopPropagation?e.stopPropagation():e.cancelBubble=true;
     	}		
    }

功能
类似百度搜索框

  • [x] 显示
  • 文本框获取焦点，并且文本框中有内容的时候；

  • 在本文框中操作内容（新输入/删除），如果有内容则显示，无则隐藏

  • [x] 隐藏（需要事件委托）

  • 点击页面中其余位置（除了文本框和li中每一行）都隐藏
  • 点击li中的列表隐藏，并把内容放到文本框中

完整代码

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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
    <title></title>
    <style type="text/css">
    /*清除样式*/
    body,
    div,input,ul{
        margin: 0;
        padding: 0;
        font-family: "\96B6\4E66",Helvetica,sans-serif;
		/*Unicode 编码为了在页面中不显示中文的兼容方法*/
		font-size:20px;
		outline: none;/*去掉input的输入时显示的边框颜色*/
    }
    
    a,a:hover,a:active,a:target{
	    display:block; 
	    text-decoration: none;/*去下划线*/
	    color:#000;
	}
	ul{    	
    	list-style: none;    	
    }
    html,body{
    	width:100%;
    	height:100%;
    	border-top: 1px solid transparent;
    }
    .box{    	
    	margin:20px auto;
    	width: 500px;
    }
    .box #input{
    	display:block;     	
    	width:300px;
		height: 30px;
		padding:0 10px;
		border-bottom-color: white;
		position:relative;/*可以看成脱离正常流*/
		z-index: 2;/*需要设定position才其效果*/
    }
    .box ul{
    	display: none;
    	position:relative;
    	top:-1px;
    	border:1px solid #EEEEE0;    	
    }
    .box ul li,.box ul li a{
    	height: 35px;
    	line-height: 35px;
    	
    }
    .box ul li a{
    	padding: 0 10px;
    }
    
    .box ul li a:hover{
    	background-color:#EEEEE0; 
    }
	
	
    </style>
</head>
<body>
    <div class="box">
        <input type="text" id="input">
        <ul id="ullist">
            <!-- html中直接阻止默认行为 -->
            <li><a href="javascript:;">你好1</a></li>
            <li><a href="javascript:;">你好2</a></li>
            <li><a href="javascript:;">你好3</a></li>
            <li><a href="javascript:;">你好4</a></li>
        </ul>
    </div>
    <script type="text/javascript">
    	//显示：
    	//1）文本框获取焦点，并且文本框中有内容的时候；
    	//2）在本文框中操作内容（新输入/删除），如果有内容则显示，无则隐藏
    	//隐藏：(需要事件委托)
    	//1）点击页面中其余位置（除了文本框和li中每一行）都隐藏
    	//2）点击li中的列表隐藏，并把内容放到文本框中
    	var input=document.getElementById("input");
    	var ullist=document.getElementById("ullist");
    	//获取焦点onfocus或者编辑内容onkeyup，有内容显示无内容隐藏
    	input.onfocus=input.onkeyup=function(){
    		var value=this.value.replace(/^ +| +$/g,"")
    		ullist.style.display=value.length>0?"block":"none";
    	}  
    	//多个元素在点击事件  	
    	document.body.onclick=function(e){
    		e=e||window.event;
    		e.target=e.target||e.srcElement;
    		//如果事件源e.target点击a,获取其内容并赋给input
    		if(e.target.tagName.toLowerCase()==="a"&&e.target.parentNode.tagName==="LI"){				
				ullist.style.display="none"; 
				input.value=e.target.innerHTML;
				return; 
    		}
    		//如果事件源e.target点击input，则单独处理（不隐藏）
    // 		if(e.target.id==="input"){
				// return;
    // 		}
			//可以阻止一个容器中某些特殊元素，让其不再委托范围内（单独把input的传播阻止掉）
    		input.onclick=function(e){
    			e=e||window.event;
    			e.stopPropagation?e.stopPropagation():e.cancelBubble=true;
    		}
    		ullist.style.display="none"; 
    		  
    			
    	}
    </script>
</body>
</html>