JavaScript DOM总结（文档事件）

Posted 知其黑、受其白

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript DOM总结（文档事件）相关的知识，希望对你有一定的参考价值。

阅读目录

DOM文档事件

事件概述

html事件可以触发浏览器中的行为，比方说当用户点击某个 HTML 元素时启动一段 javascript。

窗口事件

由窗口触发该事件 (同样适用于 <body> 标签)：

属性描述
onblur当窗口失去焦点时运行脚本。
onfocus当窗口获得焦点时运行脚本。
onload当文档加载之后运行脚本。
onresize当调整窗口大小时运行脚本。
onstorage当 Web Storage 区域更新时（存储空间中的数据发生变化时）运行脚本。
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<script>
	// 01 当窗口失去焦点时，输出 " 窗口失去焦点 "
	window.onblur = function () 
		console.log("窗口失去焦点");
	;

	// 02 当窗口获取焦点时，输出 “ 窗口获取焦点 ”
	window.onfocus = function () 
		console.log("窗口获取焦点");
	;

	// 03 当页面文档加载完成后，输出"Hello, World"
	window.onload = function () 
		console.log("Hello,World");
	;

	// 04 当调整窗口大小时，输出"窗口大小正在改变"
	window.onresize = function () 
		console.log("窗口大小正在改变");
	;

	// 当 Web Storage 区域更新时（存储空间中的数据发生变化时）运行脚本
	window.onstorage = function () 
		console.log("区域更新");
	;
</script>

</body>
</html>

表单事件

表单事件在 HTML 表单中触发 (适用于所有 HTML 元素，但该 HTML 元素需在 form 表单内)：

属性描述
onblur当元素失去焦点时运行脚本。
onfocus当元素获得焦点时运行脚本。
onchange当元素改变时运行脚本。
oninput当元素获得用户输入时运行脚本。
oninvalid当元素无效时运行脚本。
onselect当选取元素时运行脚本。
onsubmit当提交表单时运行脚本。
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<form  id="myform">
	<input type="text" id="text">
	 <!-- <input type="text" id="text" required> -->
	<input type="submit" value="submit">
</form>
 
<script>
	var textInput = document.getElementById("text");

	// 01 当文本框获取焦点，文本框背景为红色，当文本框失去焦点，文本框背景为黄色
	/* 当文本框获取焦点，文本框背景为红色 */
	textInput.onfocus = function () 
		this.style.background = "red";
	;
	/* 当文本框失去焦点，文本框背景为绿色 */
	textInput.onblur = function () 
		this.style.background = "green";
	;

	// 02 当文本框内容改变时，鼠标离开文本框，自动将文本框的内容输出到控制台
	textInput.onchange = function () 
		console.log(this.value);
	;

	// 03 当文本框内容改变时，立即将改变的内容 输出 到控制台
	textInput.oninput = function () 
		console.log(this.value);
	;

	// 04 如果单击“submit”，则不填写文本字段，将发生警报消息
	textInput.oninvalid = function () 
		console.log("请您完善表单内容！");
	;

	// 05  当选中文本框的内容时，输出“您已经选择了文本框内容！”
	textInput.onselect = function () 
		console.log("您已经选择了文本框内容！");
	;

	06 当提交表单的时候，在控制台输出“表单提交”
	var myform = document.getElementById("myform");

	myform.onsubmit = function () 
		console.log("表单提交");
		return false;/* 用来阻止表单提交的，你不写它会跳转请求 */
	;

</script>
	
</body>
</html>

键盘事件

通过键盘触发事件，类似用户的行为：

属性描述
onkeydown当按下按键时运行脚本。
onkeyup当松开按键时运行脚本。
onkeypress当按下并松开按键时运行脚本。
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<!-- 01  当键盘按下判断当前的按键是不是 a ，如果是就输出true，否则输出false  -->
<script>
	window.onkeydown = function () 
		/* 解决兼容性问题 */
		// event = event || window.event;

		if (event.keyCode == 65) 
			console.log("true");
		 else 
			console.log("false");
		
	;
</script>

<!-- 02  使div可以根据不同的方向键向不同的方向移动 -->
<div id="box" style="width: 100px;height: 100px;background: red;position: absolute;"></div>
<script>
	var box = document.getElementById("box");

	//为document绑定一个按键按下的事件
	document.onkeydown = function (event) 
		// event = event || window.event;
		// 定义移动速度
		var speed = 10;
		// 选择移动方向
		switch (event.keyCode) 
			case 37:
				box.style.left = box.offsetLeft - speed + "px";
				break;
			case 39:
				box.style.left = box.offsetLeft + speed + "px";
				break;
			case 38:
				box.style.top = box.offsetTop - speed + "px";
				break;
			case 40:
				box.style.top = box.offsetTop + speed + "px";
				break;
		
	;
</script>
	
</body>
</html>

鼠标事件

通过鼠标触发事件，类似用户的行为：

属性描述
onclick当单击鼠标时运行脚本。
ondblclick当双击鼠标时运行脚本。
onmousedown当按下鼠标按钮时运行脚本。
onmouseup当松开鼠标按钮时运行脚本。
onmousemove当鼠标指针移动时运行脚本。
onmouseover当鼠标指针移至元素之上时运行脚本，不可以阻止冒泡。
onmouseout当鼠标指针移出元素时运行脚本，不可以阻止冒泡。
onmouseenter当鼠标指针移至元素之上时运行脚本，可以阻止冒泡。
onmouseleave当鼠标指针移出元素时运行脚本，可以阻止冒泡。
onmousewheel当转动鼠标滚轮时运行脚本。
onscroll当滚动元素的滚动条时运行脚本。
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
 
<!-- 01  创建一个正方形div，默认颜色为黑色，
		 当鼠标移入div，背景颜色变为红色，
		 当鼠标移出div，背景颜色变为绿色 -->
<div id="box" style="width: 100px;height: 100px;background: black;"></div>
<script>
	var box = document.getElementById("box");

	/* 当鼠标移入div，背景颜色变为红色 */
	box.onmouseenter = function () 
		this.style.background = "red";
	;
	/* 当鼠标移出div，背景颜色变为绿色 */
	box.onmouseleave = function () 
		this.style.background = "green";
	;
</script>

<!-- 02  编写一个通用的拖拽元素函数，
	 创建两个div，进行拖拽演示 -->
<div id="box1" style="width: 100px;height: 100px;background: red;position: absolute;"></div>
<div id="box2" style="width: 100px;height: 100px;background: green;position: absolute;"></div>

<script>
	var box1 = document.getElementById("box1");
	var box2 = document.getElementById("box2");

	drag(box1);
	drag(box2);
	// 提取一个专门用来设置拖拽的函数
	// 参数：开启拖拽的元素
	function drag(obj) 
		//当鼠标在被拖拽元素上按下时，开始拖拽
		obj.onmousedown = function (event) 
			// 设置obj捕获所有鼠标按下的事件

			// obj的偏移量 鼠标.clentX - 元素.offsetLeft
			// obj的偏移量 鼠标.clentY - 元素.offsetTop
			var ol = event.clientX - obj.offsetLeft;
			var ot = event.clientY - obj.offsetTop;

			// 为document绑定一个鼠标移动事件
			document.onmousemove = function (event) 
				// 当鼠标移动时被拖拽元素跟随鼠标移动
				// 获取鼠标的坐标
				var left = event.clientX - ol;
				var top = event.clientY - ot;
				// 修改obj的位置
				obj.style.left = left + "px";
				obj.style.top = top + "px";
			;

			// 为document绑定一个鼠标松开事件
			document.onmouseup = function () 
				// 取消document的onmousemove事件
				document.onmousemove = null;
				// 取消document的onmouseup事件
				document.onmouseup = null;
				// 当鼠标松开时，取消对事件的捕获
				obj.releaseCapture && obj.releaseCapture();
			;
			return false;
		
	
</script>
	
</body>
</html>

以上是关于JavaScript DOM总结（文档事件）的主要内容，如果未能解决你的问题，请参考以下文章

Javascript-事件总结

javascript DOM事件总结

JavaScript中的事件

JavaScript基础—dom,事件

jQuery文档之事件

部分DOM事件总结