Dom事件类型题目(搜索框，鼠标跟随特效，聊天框，事件委托，单元格拖拽改变位置，）

搜索框

点击下拉箭头出现li，选择li并能让li内容出现在input框内
css

#outer {
	width: 520px;
	height: 30px;
	margin: 10px auto;
	position: relative;
}

#inner {
	width: 320px;
	height: 30px;
	display: flex;
	align-items: center;
	border: solid 1px;
	position: relative;
	float: left;
}

input {
	width: 290px;
	height: 28px;
	border: 0;
}

#sanjiao {
	width: 0;
	height: 0;
	border: solid 15px;
	border-color: red transparent transparent transparent;
	position: absolute;
	top: 7.5px;
	right: 0;
}

#btn {
	width: 100px;
	height: 30px;
	float: left;
}

ul {
	width: 320px;
	height: 28px;
	position: absolute;
	top: 30px;
	left: 0;
	display: none;
}

ul li {
	width: 320px;
	height: 28px;
	border: solid 1px;
	text-align: center;
	font-size: 18px;
}

html

<div id="outer">
	<div id="inner">
		<input type="text" name="" id="" value="" />
		<div id="sanjiao"></div>
	</div>
	<button type="button" id="btn">搜索</button>
	<ul>
		<li>1111111</li>
		<li>22222222</li>
		<li>2333333333</li>
		<li>444444444444</li>
		<li>5555555555555</li>
		<li>66666666</li>
	</ul>
</div>

js

var oXiala = document.getElementById("sanjiao");
var oInput = document.querySelectorAll("input")[0];
var oBtn = document.getElementById("btn");
var oLi = document.querySelectorAll("li");
var oUl = document.querySelectorAll("ul")[0];

oXiala.onclick = function(e) {
	var evt = e||event;
	oUl.style.display = "block";
	evt.stopPropagation();
}
for (var i = 0; i < oLi.length; i++) {
	// oLi[i].index = i;
	oLi[i].onclick = function(){
		oInput.value = this.innerText;
		oUl.style.display = "none";
	}
}
document.onclick = function(){
	oUl.style.display = "none";
}

聊天框

（
不使用 oDiv.scrollTop = oDiv.scrollHeight;
简易聊天框，发送文字像微信 qq一样出现在下边）
css

p{
	margin: 0;
}
.outer{
	width: 500px;
	height: 200px;
	border: solid 1px ;
	overflow-y: auto;
}

html

<div class="outer">
	<div id="">
	
	</div>
</div>
<input type="text" name="" id="" value="" />
<button type="button">发送</button>

js

var oUter = document.querySelectorAll(".outer")[0];
var oInner = oUter.children[0];
var oInput =document.querySelectorAll("input")[0];
var oBtn = document.querySelectorAll("button")[0];

document.onkeydown = function(e){
	var evt = e ||event;
	if(evt.ctrlKey==true && evt.keyCode == 13 || evt.keyCode == 13){
		oInner.innerHTML += "<p>"+oInput.value+"</p>";
		oUter.scrollTop = oInner.offsetHeight - oUter.offsetHeight;//内部文本框高度减去外边可视宽度等于滚动条距离顶部高度
		//如果替换成oUter.scrollTop = oUter.scrollHeight;可以去掉内部div
	}
	oBtn.onclick = function(){
		oInner.innerHTML += "<p>"+oInput.value+"</p>";
		oUter.scrollTop = oInner.offsetHeight - oUter.offsetHeight; 
		//如若替换成oUter.scrollTop = oUter.scrollHeight;可以去掉内部div
	}
	
}

鼠标跟随特效

css

*{
	margin: 0;
	padding: 0;
}
div{
	width: 10px;
	height: 10px;
	background: red;
	position: absolute;
	top: 0;
	left: 0;
}

html

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div> //div可多可少

js

var oDiv = document.querySelectorAll("div");
document.onmousemove = function(e){
	var evt = e || event;
	var eX = evt.clientX;
	var eY = evt.clientY;
	var sjyr=Math.floor(Math.random()*255);
	var sjyg=Math.floor(Math.random()*255);
	var sjyb=Math.floor(Math.random()*255);//随机颜色 可要可不要
	oDiv[0].style.top = eY+"px";
	oDiv[0].style.left = eX+"px";
	oDiv[0].style.background='rgb('+sjyr+","+sjyg+","+sjyb+')';
	for(var i = oDiv.length-1;i>0;i-- ){
		// console.log(i);
		oDiv[i].style.left = oDiv[i-1].style.left;
		oDiv[i].style.top = oDiv[i-1].style.top;
		oDiv[i].style.background = oDiv[i-1].style.background;
	}
}

文本框只能输入10个字符

<input type="text" name="" id="" value="" />
<script type="text/javascript">
	var oInput = document.querySelectorAll("input")[0];
	oInput.oninput = function(){
		var val = this.value;
		this.value = val.substr(0,10);
	}
</script>

事件委托

css

li{
	background: greenyellow;
	margin: 10px 0;
}

html

<ul>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>

js

var oUl = document.querySelectorAll("ul")[0];
oUl.onclick = function(e){
	var evt = e||event;
	var _target = evt.target||evt.srcElement;
	if(_target.nodeName.toLowerCase() == "li"){
		console.log("aa");
	}
}



var oInput = document.querySelectorAll("input")[0];
oInput.onclick = function(){
	for(var i =0;i<5;i++){
		var oLi = document.createElement("li");
		oUl.appendChild(oLi);
	}
}