JavaScript DOM总结（文档事件）

DOM文档事件

事件概述

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

窗口事件

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

属性描述onblur当窗口失去焦点时运行脚本。onfocus当窗口获得焦点时运行脚本。onload当文档加载之后运行脚本。onresize当调整窗口大小时运行脚本。onstorage当 Web Storage 区域更新时（存储空间中的数据发生变化时）运行脚本。

DOCTYPE html>


    
    




	// 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("区域更新");
	};

表单事件

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

属性描述onblur当元素失去焦点时运行脚本。onfocus当元素获得焦点时运行脚本。onchange当元素改变时运行脚本。oninput当元素获得用户输入时运行脚本。oninvalid当元素无效时运行脚本。onselect当选取元素时运行脚本。onsubmit当提交表单时运行脚本。

DOCTYPE html>


    
    




	
	 
	

 

	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;/* 用来阻止表单提交的，你不写它会跳转请求 */
	};


	

键盘事件

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

属性描述onkeydown当按下按键时运行脚本。onkeyup当松开按键时运行脚本。onkeypress当按下并松开按键时运行脚本。

DOCTYPE html>


    
    





	window.onkeydown = function () {
		/* 解决兼容性问题 */
		// event = event || window.event;

		if (event.keyCode == 65) {
			console.log("true");
		} else {
			console.log("false");
		}
	};





	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;
		}
	};

	

鼠标事件

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

属性描述onclick当单击鼠标时运行脚本。ondblclick当双击鼠标时运行脚本。onmousedown当按下鼠标按钮时运行脚本。onmouseup当松开鼠标按钮时运行脚本。onmousemove当鼠标指针移动时运行脚本。onmouseover当鼠标指针移至元素之上时运行脚本，不可以阻止冒泡。onmouseout当鼠标指针移出元素时运行脚本，不可以阻止冒泡。onmouseenter当鼠标指针移至元素之上时运行脚本，可以阻止冒泡。onmouseleave当鼠标指针移出元素时运行脚本，可以阻止冒泡。onmousewheel当转动鼠标滚轮时运行脚本。onscroll当滚动元素的滚动条时运行脚本。

DOCTYPE html>


    
    


 



	var box = document.getElementById("box");

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







	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;
		}
	}