js中的监听事件练习

最新推荐文章于 2022-02-15 21:03:34 发布

Distance-X

最新推荐文章于 2022-02-15 21:03:34 发布

阅读量229

点赞数 1

分类专栏： javascript 文章标签： js实现监听

本文链接：https://blog.csdn.net/weixin_43582611/article/details/102938921

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="div0">
			<label for="username">用户名：</label> <input type="text" id="username" name="username" />
			<input type="button" name="button_id" id="button_id" value="点击试试" />
			<select name="" id="city">
				<option value="">--请选择--</option>
				<option>上海</option>
				<option>北京</option>
				<option>西安</option>
			</select>
		</div>
	</body>
	<script type="text/javascript">
		var div = document.getElementById("div0");
		div.style.width="600px";
		div.style.height="300px";
		div.style.border="1px solid red";
		// 鼠标双击事件
		document.getElementById("button_id").ondblclick=function(){
			alert("我被点击了两次");
		}
		/*// 鼠标获取焦点事件
		document.getElementById("username").onfocus=function(){
		//	div.innerHTML="酷酷酷";
		}
		
		// 鼠标失去焦点事件
		document.getElementById("username").onblur=function(){
			alert("我失去了焦点");
		}*/
		// 鼠标移动到div上
		document.getElementById("div0").onmouseover=function(){
			
			div.style.border="1px solid blue";
		}
		// 鼠标移开div
		document.getElementById("div0").onmouseout=function(){
			
			div.style.border="1px solid red";
		}
		
		// 确定鼠标点击的是哪个键
		/*document.getElementById("username").onmousedown=function(event){
			alert(event.button);
		}*/
		
		// 确定键盘中的哪个键被按下
		/*document.getElementById("username").onkeydown=function(event){
			alert(event.keyCode);
		}*/
		
		// onchange域内容改变事件
		document.getElementById("city").onchange=function(){
			alert("改变了一次");
		}
	</script>
</html>