js单击事件和鼠标事件使用案例 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			textarea,input {
				outline:none;
				resize: none;
				overflow: auto;
				font-family: inherit;
				vertical-align: middle;
				height: 40px;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var inp = document.getElementById('inp');
				var bt = document.getElementById('bt');
				var txt = document.getElementById('txt');
				
				bt.onclick = function(){
					txt.value = inp.value;
					inp.value = null;
				}
				
				txt.onmouseover = function(){
					txt.value = inp.value;
					inp.value = null;
				}
				inp.onmouseout = function(){
					txt.value = inp.value;
					inp.value = null;
				}
			}
		</script>
		
	</head>
	<body>
		<div class="wrap">
			<h2>onclick</h2>
			<input type="text" name="" id="input" value="" placeholder="输入内容"/>
			<button type="button" id="btn">确定</button>
			<textarea id="txt1">
				
			</textarea>
			
			<h2>使用了鼠标的移入移出事件</h2>
			<input type="text" name="" id="inp" value="" placeholder="输入内容"/>
			<button type="button" id="bt">确定</button>
			<textarea id="txt">
				
			</textarea>
		</div>
		<script type="text/javascript">
			var input = document.getElementById('input');
			var btn = document.getElementById('btn');
			var txt1 = document.getElementById('txt1');
			
			btn.onclick = function(){
				txt1.value = input.value;
				input.value = null;
			}
		</script>
	</body>
</html>

posted @ 2020-03-17 20:49  JackieDYH  阅读(2)  评论(0)  编辑  收藏  举报  来源