用JavaScript写原生态的Dom，你真的搞懂了么？

本文深入探讨了DOM操作的各种方法，包括元素的增删改查、样式修改、事件监听及响应，以及如何利用事件对象控制事件冒泡。此外，还介绍了键盘事件的应用，如输入限制和键盘控制元素移动，以及动画效果的实现。

全篇文章的笔记来源于个人的云端笔记，详细地址请查看：

宿主对象

Dom
四种节点方式：
文档节点、元素节点、属性节点、文本节点
事件：点击按钮，按键盘等等

<body text="black" bgcolor="darkgreen" style="font-size: 30px;">
		<!-- 这种方法不方便维护，不推荐使用 -->
		<button id = "btn" ondblclick="alert('你点我干嘛！');">我是一个按钮</button>
		<script type="text/javascript">
			// document.write(document);
			//获取button对象
			var btn = document.getElementById("btn");
			btn.innerHTML = "I am a Button";
			
			/**
			 * 可以为按钮的对应事件绑定处理的形式来处理响应事件
			 */
			// 获取按钮对象
			var btn = document.getElementById("btn");
			// 可以为按钮的对应事件绑定处理函数的形式响应事件
			// 绑定一个单击事件
			// 当事件被触发时，其对应的函数将会被调用
			//像是这种为单击事件绑定的函数，我们成为单击响应函数，双击为双击响应函数
			//这里的函数为回调函数
			btn.onclick = function(){
				alert("你快点！");
			}
		</script>
	</body>

事件句柄　(Event Handlers)

HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为，比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，可将之插入 HTML 标签以定义事件的行为。
在这里插入图片描述

获取元素节点：
通过document对象调用
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200307162828197.png
…

获取元素节点的子节点：通过具体的元素节点调用
1、getElemnetsByTagName() 方法：返回当前节点的指定标签名后代节点
2、childNodes 属性：表示当前节点的所有子节点
3、firstChild 属性，表示当前节点的第一个子节点
4、lastChild 属性，表示当前节点的最后一个子节点获取父节点和兄弟节点：
1、parentNode 属性：表示当前节点的父节点
2、previousSibling 属性：表示当前节点的前一个兄弟节点
3、nextSibling 属性：表示当前节点的后一个兄弟节点
4、innerText 属性：获取当前的节点的的父节点下的所有兄弟节点（包括自己）并且只获取值 dom节点查询：

…

dom查询的其他方法：

在这里插入图片描述

//万能封装套索工具

function myClick(idStr, fun) {
			var btn = document.getElementById(idStr);
			btn.onclick = fun;
		}

dom的增删改：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<!-- <link rel="stylesheet" type="text/css" href="../css/css1.css" /> -->
		<script type="text/javascript">
		
			window.onload = function() {				
				//创建一个"广州"节点,添加到#city下
				myClick("btn01",function(){
					//创建广州节点 <li>广州</li>
					//创建li元素节点
					/*
					 * document.createElement()
					 * 	可以用于创建一个元素节点对象，
					 * 	它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，
					 * 	并将创建好的对象作为返回值返回
					 */
					var li = document.createElement("li");
					
					//创建广州文本节点
					/*
					 * document.createTextNode()
					 * 	可以用来创建一个文本节点对象
					 *  需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回
					 */
					var gzText = document.createTextNode("广州");
					
					//将gzText设置li的子节点
					/*
					 * appendChild()
					 * 	 - 向一个父节点中添加一个新的子节点
					 * 	 - 用法：父节点.appendChild(子节点);
					 */
					li.appendChild(gzText);
					
					//获取id为city的节点
					var city = document.getElementById("city");
					
					//将广州添加到city下
					city.appendChild(li);
					
					
				});
				
				//将"广州"节点插入到#bj前面
				myClick("btn02",function(){
					//创建一个广州
					var li = document.createElement("li");
					var gzText = document.createTextNode("广州");
					li.appendChild(gzText);
					
					//获取id为bj的节点
					var bj = document.getElementById("bj");
					
					//获取city
					var city = document.getElementById("city");
					
					/*
					 * insertBefore()
					 * 	- 可以在指定的子节点前插入新的子节点
					 *  - 语法：
					 * 		父节点.insertBefore(新节点,旧节点);
					 */
					city.insertBefore(li , bj);
					
				});
				
				
				//使用"广州"节点替换#bj节点
				myClick("btn03",function(){
					//创建一个广州
					var li = document.createElement("li");
					var gzText = document.createTextNode("广州");
					li.appendChild(gzText);
					
					//获取id为bj的节点
					var bj = document.getElementById("bj");
					
					//获取city
					var city = document.getElementById("city");
					
					/*
					 * replaceChild()
					 * 	- 可以使用指定的子节点替换已有的子节点
					 * 	- 语法：父节点.replaceChild(新节点,旧节点);
					 */
					city.replaceChild(li , bj);
					
				});
				
				//删除#bj节点
				myClick("btn04",function(){
					//获取id为bj的节点
					var bj = document.getElementById("bj");
					//获取city
					var city = document.getElementById("city");
					
					/*
					 * removeChild()
					 * 	- 可以删除一个子节点
					 * 	- 语法：父节点.removeChild(子节点);
					 * 		
					 * 		子节点.parentNode.removeChild(子节点);
					 */
					//city.removeChild(bj);
					
					bj.parentNode.removeChild(bj);
				});
				
				
				//读取#city内的HTML代码
				myClick("btn05",function(){
					//获取city
					var city = document.getElementById("city");
					
					alert(city.innerHTML);
				});
				
				//设置#bj内的HTML代码
				myClick("btn06" , function(){
					//获取bj
					var bj = document.getElementById("bj");
					bj.innerHTML = "昌平";
				});
				
				myClick("btn07",function(){
					
					//向city中添加广州
					var city = document.getElementById("city");
					
					/*
					 * 使用innerHTML也可以完成DOM的增删改的相关操作
					 * 一般我们会两种方式结合使用
					 */
					//city.innerHTML += "<li>广州</li>";
					
					//创建一个li
					var li = document.createElement("li");
					//向li中设置文本
					li.innerHTML = "广州";
					//将li添加到city中
					city.appendChild(li);
					
				});
				
				
			};
			
			function myClick(idStr, fun) {
				var btn = document.getElementById(idStr);
				btn.onclick = fun;
			}
			
		
		</script>
		
	</head>
	<body>
		<div id="total">
			<div class="inner">
				<p>
					你喜欢哪个城市?
				</p>

				<ul id="city">
					<li id="bj">北京</li>
					<li>上海</li>
					<li>东京</li>
					<li>首尔</li>
				</ul>
				
			</div>
		</div>
		<div id="btnList">
			<div><button id="btn01">创建一个"广州"节点,添加到#city下</button></div>
			<div><button id="btn02">将"广州"节点插入到#bj前面</button></div>
			<div><button id="btn03">使用"广州"节点替换#bj节点</button></div>
			<div><button id="btn04">删除#bj节点</button></div>
			<div><button id="btn05">读取#city内的HTML代码</button></div>
			<div><button id="btn06">设置#bj内的HTML代码</button></div>
			<div><button id="btn07">创建一个"广州"节点,添加到#city下</button></div>
		</div>
	</body>
</html>

删除列表中的员工

在这里插入图片描述

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>添加删除记录练习</title>
		<link rel="stylesheet" type="text/css" href="../css/ex_2_style/css.css" />
		<style type="text/css">
			* {
				padding: 0px;
				margin: 0px;
			}
		</style>
		<script type="text/javascript">
			/**
			 * 点击删除一个节点
			 * onload事件是在图片或页面加载完毕后执行的效果
			 */
			window.onload = function() {
				// 获取所有的a标签采用的是下面的对象方法
				var allA = document.getElementsByTagName("a");
				// 将获取到的a标签进行操作
				for (var i = 0; i < allA.length; i++) {
					allA[i].onclick = function() {
						//点击超链接后删除
						// this为当前的a节点
						// 获取爷爷节点
						var tr = this.parentNode.parentNode;
						
						//获取要删除的员工的名字
						// var name = tr.getElementsByTagName("td")[0].innerHTML;
						 // 或者
						 var name = tr.children[0].innerHTML;
						 
						/**
						 * 弹出一个带有提示确认和取消的按钮
						 */
						var flag = confirm("确认删除么？");
						if (flag) {
							// 自己杀死自己
							tr.parentNode.removeChild(tr);
						}
						// 防止跳转页面
						return false;
					};
				}
			};
		</script>
	</head>
	<body>

		<table id="employeeTable" border="1px">
			<tr>
				<th>Name</th>
				<th>Email</th>
				<th>Salary</th>
				<th>&nbsp;</th>
			</tr>
			<tr>
				<td>Tom</td>
				<td>tom@tom.com</td>
				<td>5000</td>
				<td><a href="deleteEmp?id=001">Delete</a></td>
			</tr>
			<tr>
				<td>Jerry</td>
				<td>jerry@sohu.com</td>
				<td>8000</td>
				<td><a href="deleteEmp?id=002">Delete</a></td>
			</tr>
			<tr>
				<td>Bob</td>
				<td>bob@tom.com</td>
				<td>10000</td>
				<td><a href="deleteEmp?id=003">Delete</a></td>
			</tr>
		</table>

		<div id="formDiv">

			<h4>添加新员工</h4>

			<table>
				<tr>
					<td class="word">name: </td>
					<td class="inp">
						<input type="text" name="empName" id="empName" />
					</td>
				</tr>
				<tr>
					<td class="word">email: </td>
					<td class="inp">
						<input type="text" name="email" id="email" />
					</td>
				</tr>
				<tr>
					<td class="word">salary: </td>
					<td class="inp">
						<input type="text" name="salary" id="salary" />
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<button id="addEmpButton" value="abc">
							Submit
						</button>
					</td>
				</tr>
			</table>

		</div>

	</body>
</html>

添加元素节点，添加员工信息

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>添加删除记录练习</title>
		<link rel="stylesheet" type="text/css" href="ex_2_style/css.css" />
		<script type="text/javascript">
			function removeTr() {
				var trNode = this.parentNode.parentNode;
				var tds = trNode.getElementsByTagName("td");
				var nameStr = tds[0].firstChild.nodeValue;
				var flag = confirm("真的要删除" + nameStr + "的信息吗？");
				if (flag) {
					trNode.parentNode.removeChild(trNode);
				}

				return false;
			}

			window.onload = function() {
				//目标1：点击Delete删除记录
				var aEles = document.getElementsByTagName("a");
				for (var i = 0; i < aEles.length; i++) {
					aEles[i].onclick = removeTr;
				}

				//目标2：点击Submit增加记录
				var subBtn = document.getElementById("addEmpButton");
				subBtn.onclick = function() {
					var nameText = trim(document.getElementById("empName").value);
					var emailText = trim(document.getElementById("email").value);
					var salaryText = trim(document.getElementById("salary").value);

					document.getElementById("empName").value = nameText;
					document.getElementById("email").value = emailText;
					document.getElementById("salary").value = salaryText;

					if (nameText == "" || emailText == "" || salaryText == "") {
						alert("您输入的内容不完整");
						return;
					}

					//组装节点
					var nameTd = document.createElement("td");
					nameTd.appendChild(document.createTextNode(nameText));
					var emailTd = document.createElement("td");
					emailTd.appendChild(document.createTextNode(emailText));
					var salaryTd = document.createElement("td");
					salaryTd.appendChild(document.createTextNode(salaryText));
					var aTd = document.createElement("td");
					var aNewEle = document.createElement("a");
					aNewEle.href = "deleteEmp?id=XXX";
					aNewEle.appendChild(document.createTextNode("Delete"));
					aNewEle.onclick = removeTr;
					aTd.appendChild(aNewEle);

					var trNode = document.createElement("tr");
					trNode.appendChild(nameTd);
					trNode.appendChild(emailTd);
					trNode.appendChild(salaryTd);
					trNode.appendChild(aTd);

					var empTable = document.getElementById("employeeTable");
					empTable.appendChild(trNode);
				}

				function trim(str) {
					var reg = /^\s*|\s*$/g;
					return str.replace(reg, "");
				}

			}
		</script>
	</head>
	<body>

		<table id="employeeTable">
			<tr>
				<th>Name</th>
				<th>Email</th>
				<th>Salary</th>
				<th>&nbsp;</th>
			</tr>
			<tr>
				<td>Tom</td>
				<td>tom@tom.com</td>
				<td>5000</td>
				<td><a href="deleteEmp?id=001">Delete</a></td>
			</tr>
			<tr>
				<td>Jerry</td>
				<td>jerry@sohu.com</td>
				<td>8000</td>
				<td><a href="deleteEmp?id=002">Delete</a></td>
			</tr>
			<tr>
				<td>Bob</td>
				<td>bob@tom.com</td>
				<td>10000</td>
				<td><a href="deleteEmp?id=003">Delete</a></td>
			</tr>
		</table>

		<div id="formDiv">

			<h4>添加新员工</h4>

			<table>
				<tr>
					<td class="word">name: </td>
					<td class="inp">
						<input type="text" name="empName" id="empName" />
					</td>
				</tr>
				<tr>
					<td class="word">email: </td>
					<td class="inp">
						<input type="text" name="email" id="email" />
					</td>
				</tr>
				<tr>
					<td class="word">salary: </td>
					<td class="inp">
						<input type="text" name="salary" id="salary" />
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<button id="addEmpButton" value="abc">
							Submit
						</button>
					</td>
				</tr>
			</table>

		</div>

	</body>
</html>

改变div的样式

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>添加删除记录练习</title>
		<link rel="stylesheet" type="text/css" href="../css/ex_2_style/css.css" />
		<style type="text/css">
			* {
				padding: 0px;
				margin: 0px;
			}
			#box1{
				width: 200px;
				height: 200px;
				background-color: aqua;
				border: #FF1493 2px solid;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				/**
				 * 点击按钮修改box的大小
				 */
				var box1 = document.getElementById("box1");
				var btn1 = document.getElementById("btn1");
				
				btn1.onclick = function(){
					// 我们通过style属性设置的样式都是内联样式
					//但是在css中写了!important会导致js修改样式失效
					box1.style.width = "300px";
					box1.style.height = "300ppx";
					/**
					 * 在js中background-color是不合法的
					 * 需要将这种样式名修改为驼峰命名法
					 * 去掉-，然后将-后的字母大写
					 */
					box1.style.backgroundColor = "yellow";
					box1.sytle.backgroundc
				};
				
				// 点击一个按钮，读取元素的样式
				var bnt02 = document.getElementById("btn02");
				btn02.onclick = function(){
					/**
					 * 通过sytle属性设置和读取的都是内联样式
					 * 无法读取样式表中的样式
					 */
					alert(box1.style.height);
				};
			};
		</script>
	</head>
	<body>
		<div id = "box1"></div>
		<button id = "btn1">点击一下</button>
		<button id = "btn02">获取元素</button>

	</body>
</html>

查询节点元素的属性值

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>添加删除记录练习</title>
		<link rel="stylesheet" type="text/css" href="../css/ex_2_style/css.css" />
		<style type="text/css">
			* {
				padding: 0px;
				margin: 0px;
			}
			#box1{
				width: 100px;
				height: 100px;
				background-color: blueviolet;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var box1 = document.getElementById("box1");
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					/**
					 * 获取元素的当前的样式
					 * 语法：元素.currentStyle.样式名
					 * 他可以用来读取当前元素正在显示的样式
					 * 哪个生效获取哪个,但是只有在ie浏览器中支持
					 */
					// alert(box1.currentStyle.backgroundColor);
					
					
					/**
					 * 解决方法
					 * 采用getComputedStyle()方法来获取元素的当前的样式
					 * 这个方法是window的方法，可以直接使用
					 * 需要两个参数：
					 * 		第一个：要获取样式的元素
					 * 		第二个：可以传递一个伪元素，一般都穿null
					 * 该方法会返回一个对象，对象中封装了当前元素的样式
					 * 		
					 */
					alert(getComputedStyle(box1,null).backgroundColor);
				};
			};
		</script>
	</head>
	<body>
		<button id = "btn01">点我一下</button>
		<br /><br />
		<div id = "box1" style="width: 200px;"></div>

	</body>
</html>

自己写一个所有浏览器都支持的查询方法：就ie8特殊

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>添加删除记录练习</title>
		<link rel="stylesheet" type="text/css" href="../css/ex_2_style/css.css" />
		<style type="text/css">
			* {
				padding: 0px;
				margin: 0px;
			}

			#box1 {
				width: 100px;
				height: 100px;
				background-color: blueviolet;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				var box1 = document.getElementById("box1");
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function() {
					var w = getStyle(box1, "width");
					alert(w);

				};
			};

			/**
			 * 定义一个函数\
			 * 参数：
			 * 		obj 要获取样式的元素
			 * 		name 要获取的样式名
			 */
			function getStyle(obj, name) {
				/**
				 * 方式一：
				 * 下面的方法需要加window，如果不加，getComputedStyle为变量，错误之后不会往下执行
				 * 如果是加入window则表示的对象的属性，所以即使报错，也是返回undefined，程序也会往下执行
				 * 
				 */
				if (window.getComputedStyle) {
					return getComputedStyle(obj, null)[name];
				} else {
					return obj.currentStyle[name];
				}
				/**
				 * 方式二：
				 *三元运算符
				 * 
				 */
				// return window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentStyle[name];
			}
		</script>
	</head>
	<body>
		<button id="btn01">点我一下</button>
		<br /><br />
		<div id="box1" style="width: 200px;"></div>

	</body>
</html>

DOM对象之element对象：（获取div的属性）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>06</title>
		<style type="text/css">
			*{
				padding: 0px;
				margin: 0px;
			}
			#box1{
				width: 100px;
				height: 100px;
				background-color: aquamarine;
				padding: 10px;
				border: 10px solid yellow;
			}
		</style>
		<script type="text/javascript">
			
			window.onload = function(){
				var box1 = document.getElementById("box1");
				var btn01 = document.getElementById("btn01");
				
				btn01.onclick = function(){
					/**
					 * 	clientWidth
					 * 	clientHeight
					 * 获取元素的可见宽度和高度(包括元素的边框)
					 * 这些属性都是不带px的，返回的都是一个数字，可以直接进行计算
					 * 这些属性都是只读的，不可以修改
					 */
					alert(box1.clientWidth+" "+box1.clientHeight);
					/**
					 * offsetWidth
					 * offsetHeight
					 * 	- 获取元素的整个的宽度和高度，包括内容区，内边距和边距
					 */
					alert(box1.element.offsetHeight);
					
				}
			}
		</script>
	</head>
	<body>
		<button id = "btn01">点我一下</button>
		<br /><br />
		<div id = "box1"></div>
	</body>
</html>

跟随鼠标移动，获取鼠标的坐标（监听事件）：

所用到的方法（event）
https://www.w3school.com.cn/jsref/dom_obj_event.asp
在这里插入图片描述

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>记录练习</title>
		<style type="text/css">
			* {
				padding: 0px;
				margin: 0px;
			}
			#areaDiv {
				width: 400px;
				height: 300px;
				background-color: #FF1493;
			}
			#showMsg {
				width: 300px;
				height: 30px;
				background-color: #99FF99;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				/**
				 * 当鼠标areaDiv中移动，在showMsg中显示鼠标的坐标
				 */
				// 如果为IE8浏览器，则会存在不兼容型的问题
				// 方案一：则将event转换为window.event
				if(!event){
					event = window.event;
				}
				// 方案二：将event改为或
				event = event || window.event;
				
				var areaDiv = document.getElementById("areaDiv");
				var showMsg = document.getElementById("showMsg");

				/**
				 * onmousemove
				 * 	- 该事件会在鼠标元素中移动时被触发
				 * 
				 * 事件对象
				 * 		- 当事件的响应函数被触发的时候，浏览器每次都会将一个事件对象作为实参传递进响应函数
				 * 		  在事件对象中封装了当前对象相关的一切信息，比如：鼠标事件，键盘按钮被按下，鼠标滚轮的方向
				 */
				areaDiv.onmousemove = function(event) {
					/**
					 * clientx可以获取鼠标指针的水平坐标
					 * clienty可以获取鼠标指针的垂直坐标
					 */
					var x = event.clientX;
					var y = event.clientY;
					var values = "鼠标的坐标是："+"(" + x + "," + y + ")"
					showMsg.innerHTML = values;
				}
			}
		</script>
	</head>
	<body>
		<div id="areaDiv"></div>
		<br />
		<div id="showMsg"></div>
	</body>
</html>

div盒子跟随鼠标移动:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>09</title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}

			#box1 {
				width: 100px;
				height: 100px;
				background-color: red;
				/* 开启box1的绝对定位 */
				position: absolute;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				/**
				 * 使div可以跟随鼠标移动
				 */

				// 获取box1
				var box1 = document.getElementById("box1");
				// 绑定鼠标移动事件
				window.document.onmousemove = function() {

					// 解决兼容性问题
					event = event || window.event;
					
					/**
					 * 获取滚动条滚动的距离
					 * chrome认为浏览器的滚动条是body的，可以通过body.scrollTop获取到
					 */
					//火狐浏览器认为滚动条是html的
					
					var st = document.body.scrollTop || document.documentElement.scrollTop;
					var st = document.body.scrollLeft || document.documentElement.scrolle;
					
					// 获取鼠标位置的坐标
					// var left = event.clientX;
					// var top = event.clientY;
					
					/**
					 *  获取当前鼠标位置的坐标
					 * pageX与pageY可以设置当前鼠标相对当前页面的坐标
					 * 但是这两个属性在IE8中不支持，如果兼容ie8需要使用上面的方式
					 * 
					 */
					var left = event.pageX;
					var top = event.pageY;
					// 设置div的偏移量
					box1.style.left = left + "px";
					box1.style.top = top +st+ "px";

				};

			}
		</script>
	</head>
	<body>
		<div id="box1"></div>
	</body>
</html>

冒泡事件：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0px;
				margin: 0px;
			}
			#box1{
				width: 100px;
				height: 100px;
				background-color: yellowgreen;
			}
			#s1{
				background-color: yellow;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				
				
				/**
				 * 事件的冒泡就是指的是事件的向上传导，当后代元素上的时间被触发的时候，其祖先的相同事件也会被触发
				 * 如果在开发中不希望发生时间冒泡，可以通过时间对象来取消冒泡
				 */
				
				// 为s1绑定一个单击响应函数
				var s1 = document.getElementById("s1");
				s1.onclick = function(){
					event = event || window.event;
					alert("我是span的单击响应函数");
					// 阻止冒泡的实现
					event.cancelBubble = true;
				};
				
				// 为box1绑定一个单击响应函数
					var box1 = document.getElementById("box1");
					box1.onclick = function(){
						alert("我是div的单击响应函数");
					};
					
				// 为body绑定一个单击响应函数
					document.onclick = function(){
						alert("我是body的单击响应函数");
					};
				};

		</script>
	</head>
	<body>
		<div id="box1">
			我是box1
			<span id="s1">我是span</span>
		</div>
	</body>
</html>

事件的节点添加：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0px;
				margin: 0px;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				var ul = document.getElementById("u1");

				// 点击按钮以后添加数据
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function() {
					// 创建一个li
					var li = document.createElement("li");
					li.innerHTML = "<a href='javascript:;'>新建的超链接</a>";
					// 将li添加到ul中
					ul.appendChild(li);
				};

				// 遍历
				var allA = document.getElementsByTagName("a");
				for (var i = 0; i < allA.length; i++) {
					allA[i].onclick = function() {
						alert("我是点击响应函数！");
					}
				}
			}
		</script>
	</head>
	<body>
		<button id="btn01">添加超链接</button>
		<ul id="u1" type="circle">
			<li><a href="javascript:;">超链接1</a></li>
			<li><a href="javascript:;">超链接2</a></li>
			<li><a href="javascript:;">超链接3</a></li>
		</ul>
	</body>
</html>

遇到的问题：
如果为一个元素同时绑定多个响应函数，则只会执行最后一个响应函数，前面的都会被覆盖掉，举例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0px;
				margin: 0px;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				/**
				 * 点击按钮以后我们要弹出一个内容
				 * 使用 对象.是啊金 = 函数 的形式绑定函数
				 * 它只能同时为一个元素的一个时间绑定一个响应函数
				 * 不能绑定多个，若绑定多个，则后面的会覆盖掉前面的
				 */
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					alert(1);
				 };
				 //为btn01绑定第二个响应函数
				 btn01.onclick = function(){
				 	alert(2);
				 };				
			};

		</script>
	</head>
	<body>
		<button id="btn01">点我一下</button>
	</body>
</html>

解决方案如下：
使用addEventListener(）可以同时为一个元素的相同事件绑定多个响应函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0px;
				margin: 0px;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				/**
				 * 方式二：不限制绑定的个数
				 * 使用addEventListener()
				 * 通过方式也可以为元素绑定响应函数
				 * - 参数：
				 * 			1、事件的字符串，不由on
				 * 			2、回调函数，当事件被触发时会被调用
				 * 			3、是否在捕获阶段触发事件，需要一个布尔值，一般都传false
				 */
				btn01.addEventListener("click",function(){
					alert(1);
				},false); 	
				btn01.addEventListener("click",function(){
					alert(2);
				},false);
				btn01.addEventListener("click",function(){
					alert(3);
				},false);
				/**
				 *  - 在ie8中可以使用attachEvent()方法来绑定事件
				 *  - 参数：
				 *   	1、事件的字符串，要on
				 * 		2、回调函数
				 * 这个方法也可以同时为一个时间绑定多个处理函数
				 * 		不同的是它是后绑定先执行，执行顺序和addEventListener()方法相反
				 */
				btn01.attachEvent("onclick",function(){
					alert(1);
				});    
			};

		</script>
	</head>
	<body>
		<button id="btn01">点我一下</button>
	</body>
</html>

事件之拖拽、滚动、键盘事件：

键盘监听，对键盘所输入的字母，数字进行限制，表单验证，实用性很大

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>键盘事件</title>
		<style type="text/css">
			* {
				padding: 0px;
				margin: 0px;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				/**
				 * 键盘事件：
				 * onkeydown	-按键被按下
				 * 	- 对于onkeydown来说如果一直俺这某个按键不松手，则事件会一直触发
				 *  - 当onkeydown连续触发时，第一次和第二次之间会间隔长，其他的会都非常快
				 * 为了防止发生误操作的发生
				 * onkeyup 		-按键被松开
				 * 键盘事件一般都会绑定给一些可以获取焦点的对象或者是document
				 * 	- 
				 */
				// document.onkeydown = function() {
				// 	console.log("按钮被按下");
				// };
				// document.onkeyup = function() {
				// 	console.log("按键弹起");
				// };

				document.onkeydown = function(event) {
					event = event || window.event;

					/**
					 * 可以通过keyCode来获取按键的编码
					 * 通过它可以判断哪个按键被按下
					 * 出来keyCode之外，时间对象中还提供了几个属性
					 * altKey
					 * ctrlKey
					 * shiftKey
					 * 		- 判断alt、ctrl、shift是否被按下
					 */

					// 判断一个按键是否被按下
					// if (event.keyCode === 89) {
					// 	console.log(event.keyCode+"Y被按下了");
					// }
					
					// 判断y和ctrl是否同时被按下
					// if(event.keyCode === 89 && event.ctrlKey){
					// 	console.log("y和Ctrl被同时按下了！")
					// }
				};
				
				// 获取input
				var input = document.getElementsByTagName("input")[0];
				
				input.onkeydown = function(event){
					event = event || window.event;
					console.log(event.keyCode);
					// 数字是48到57
					// 文本框中不能输入数字
					if(event.keyCode >= 48 && event.keyCode <= 57){
						return false;
					}else{
						console.log("可以进行输入");
					}
					
					// 在文本框中输入内容，属于onkeydown的默认行为
					// 如果在onkeydown中取消了默认行为，则输入的内容，不会出现在文本框中
				};

			};
		</script>
	</head>
	<body>
		<input type="text" />
	</body>
</html>

小练习：键盘控制div的上下左右的移动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}
			
			*{
				padding: 0px;
				margin: 0px;
			}
		</style>
		
		<script type="text/javascript">
			
			//使div可以根据不同的方向键向不同的方向移动
			/*
			 * 按左键，div向左移
			 * 按右键，div向右移
			 * 。。。
			 */
			window.onload = function(){
				
				//为document绑定一个按键按下的事件
				var box1 = document.getElementById("box1");
				document.onkeydown = function(event){
					event = event || window.event;
					
					//定义一个变量，来表示移动的速度
					var speed = 10;
					
					//当用户按了ctrl以后，速度加快
					if(event.ctrlKey){
						speed = 50;
					}
					/*
					 * 37 左
					 * 38 上
					 * 39 右
					 * 40 下
					 */
					switch(event.keyCode){
						case 37:
							//alert("向左"); left值减小
							box1.style.left = box1.offsetLeft - speed + "px";
							break;
						case 39:
							//alert("向右");
							box1.style.left = box1.offsetLeft + speed + "px";
							break;
						case 38:
							//alert("向上");
							box1.style.top = box1.offsetTop - speed + "px";
							break;
						case 40:
							//alert("向下");
							box1.style.top = box1.offsetTop + speed + "px";
							break;
					}
					
				};
				
			};
		</script>
	</head>
	<body>
		<div id="box1"></div>
	</body>
</html>

没有延迟的div盒子移动：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0px;
				margin: 0px;
			}
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}			
		</style>
		<script type="text/javascript">
			//使div可以根据不同的方向键向不同的方向移动
			/*
			 * 按左键，div向左移
			 * 按右键，div向右移
			 * 。。。
			 */
			window.onload = function(){
				//定义一个变量，来表示移动的速度
				var speed = 10;
				
				//创建一个变量表示方向
				//通过修改dir来影响移动的方向
				var dir = 0;
				
				//开启一个定时器，来控制div的移动
				setInterval(function(){
					/*
					 * 37 左
					 * 38 上
					 * 39 右
					 * 40 下
					 */
					switch(dir){
						case 37:
							//alert("向左"); left值减小
							box1.style.left = box1.offsetLeft - speed + "px";
							break;
						case 39:
							//alert("向右");
							box1.style.left = box1.offsetLeft + speed + "px";
							break;
						case 38:
							//alert("向上");
							box1.style.top = box1.offsetTop - speed + "px";
							break;
						case 40:
							//alert("向下");
							box1.style.top = box1.offsetTop + speed + "px";
							break;
					}
				},30);
				
				//为document绑定一个按键按下的事件
				document.onkeydown = function(event){
					event = event || window.event;
					
					//当用户按了ctrl以后，速度加快
					if(event.ctrlKey){
						speed = 500;
					}else{
						speed = 10;
					}
					
					//使dir等于按键的值
					dir = event.keyCode;
				};
				
				//当按键松开时，div不再移动
				document.onkeyup = function(){
					//设置方向为0
					dir = 0;
				};
			};
		</script>
	</head>
	<body>
		<div id="box1"></div>
	</body>
</html>

点击按钮，div盒子向右移动：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			*{
				margin: 0;
				padding: 0;
			}
			
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
				left: 0;
			}
			
		</style>
		
		<script type="text/javascript">
			
			window.onload = function(){
				
				//获取box1
				var box1 = document.getElementById("box1");
				//获取btn01
				var btn01 = document.getElementById("btn01");
				
				//定义一个变量，用来保存定时器的标识
				var timer;
				
				//点击按钮以后，使box1向右移动（left值增大）
				btn01.onclick = function(){
					
					//关闭上一个定时器
					clearInterval(timer);
					
					//开启一个定时器，用来执行动画效果
					timer = setInterval(function(){
						
						//获取box1的原来的left值
						var oldValue = parseInt(getStyle(box1,"left"));
						
						//在旧值的基础上增加
						var newValue = oldValue + 1;
						
						//判断newValue是否大于800
						if(newValue > 800){
							newValue = 800;
						}
						
						//将新值设置给box1
						box1.style.left = newValue + "px";
						
						//当元素移动到800px时，使其停止执行动画
						if(newValue == 800){
							//达到目标，关闭定时器
							clearInterval(timer);
						}
						
						
					},30);	
				};
			};
			
			/*
			 * 定义一个函数，用来获取指定元素的当前的样式
			 * 参数：
			 * 		obj 要获取样式的元素
			 * 		name 要获取的样式名
			 */
			function getStyle(obj , name){
				
				if(window.getComputedStyle){
					//正常浏览器的方式，具有getComputedStyle()方法
					return getComputedStyle(obj , null)[name];
				}else{
					//IE8的方式，没有getComputedStyle()方法
					return obj.currentStyle[name];
				}
				
			}				
		</script>
	</head>
	<body>
		
		<button id="btn01">点击按钮以后box1向右移动</button>
		
		<br /><br />
		
		<div id="box1"></div>
		
		<div style="width: 0; height: 1000px; border-left:1px black solid; position: absolute; left: 800px;top:0;"></div>
	</body>
</html>

制作div定时器动画：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			*{
				margin: 0;
				padding: 0;
			}
			
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
				left: 0;
			}
			
			#box2{
				width: 100px;
				height: 100px;
				background-color: yellow;
				position: absolute;
				left: 0;
				top: 200px;
			}
			
		</style>
		<script type="text/javascript" src="js/tools.js"></script>
		<script type="text/javascript">
			
			window.onload = function(){
				
				//获取box1
				var box1 = document.getElementById("box1");
				//获取btn01
				var btn01 = document.getElementById("btn01");
				
				//获取btn02
				var btn02 = document.getElementById("btn02");
				
				
				//点击按钮以后，使box1向右移动（left值增大）
				btn01.onclick = function(){
					move(box1 ,"left", 800 , 20);
				};
				
				
				//点击按钮以后，使box1向左移动（left值减小）
				btn02.onclick = function(){
					move(box1 ,"left", 0 , 10);
				};
				
				
				//获取btn03
				var btn03 = document.getElementById("btn03");
				btn03.onclick = function(){
					move(box2 , "left",800 , 10);
				};
				
				//测试按钮
				var btn04 = document.getElementById("btn04");
				btn04.onclick = function(){
					//move(box2 ,"width", 800 , 10);
					//move(box2 ,"top", 800 , 10);
					//move(box2 ,"height", 800 , 10);
					move(box2 , "width" , 800 , 10 , function(){
						move(box2 , "height" , 400 , 10 , function(){
							move(box2 , "top" , 0 , 10 , function(){
								move(box2 , "width" , 100 , 10 , function(){
							
								});
							});
						});
					});
				};
			};
			
			//定义一个变量，用来保存定时器的标识
			/*
			 * 目前我们的定时器的标识由全局变量timer保存，
			 * 	所有的执行正在执行的定时器都在这个变量中保存
			 */
			//var timer;
			
			
			
			
		</script>
	</head>
	<body>
		
		<button id="btn01">点击按钮以后box1向右移动</button>
		<button id="btn02">点击按钮以后box1向左移动</button>
		<button id="btn03">点击按钮以后box2向右移动</button>
		<button id="btn04">测试按钮</button>
		
		<br /><br />
		
		<div id="box1"></div>
		<div id="box2"></div>
		
		<div style="width: 0; height: 1000px; border-left:1px black solid; position: absolute; left: 800px;top:0;"></div>
		
	</body>
</html>

类的操作：

渲染优化性能的问题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			.b1{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			
			.b2{
				height: 300px;
				background-color: yellow;
			}
			
		</style>
		
		<script type="text/javascript">
			
			window.onload = function(){
				//获取box
				var box = document.getElementById("box");
				//获取btn01
				var btn01 = document.getElementById("btn01");
				
				//为btn01绑定单击响应函数
				btn01.onclick = function(){
					//修改box的样式
					/*
					 * 通过style属性来修改元素的样式，每修改一个样式，浏览器就需要重新渲染一次页面
					 * 	这样的执行的性能是比较差的，而且这种形式当我们要修改多个样式时，也不太方便
					 */
					/*box.style.width = "200px";
					box.style.height = "200px";
					box.style.backgroundColor = "yellow";*/
					
					/*
					 * 我希望一行代码，可以同时修改多个样式
					 */
					
					//修改box的class属性
					/*
					 * 我们可以通过修改元素的class属性来间接的修改样式
					 * 这样一来，我们只需要修改一次，即可同时修改多个样式，
					 * 	浏览器只需要重新渲染页面一次，性能比较好，
					 * 	并且这种方式，可以使表现和行为进一步的分离
					 */
					//box.className += " b2";
					//addClass(box,"b2");
					
					//alert(hasClass(box,"hello"));
					
					//removeClass(box,"b2");
					
					toggleClass(box,"b2");
				};
				
			};
			
			//定义一个函数，用来向一个元素中添加指定的class属性值
			/*
			 * 参数:
			 * 	obj 要添加class属性的元素
			 *  cn 要添加的class值
			 * 	
			 */
			function addClass(obj , cn){
				
				//检查obj中是否含有cn
				if(!hasClass(obj , cn)){
					obj.className += " "+cn;
				}
				
			}
			
			/*
			 * 判断一个元素中是否含有指定的class属性值
			 * 	如果有该class，则返回true，没有则返回false
			 * 	
			 */
			function hasClass(obj , cn){
				
				//判断obj中有没有cn class
				//创建一个正则表达式
				//var reg = /\bb2\b/;
				var reg = new RegExp("\\b"+cn+"\\b");
				
				return reg.test(obj.className);
				
			}
			
			/*
			 * 删除一个元素中的指定的class属性
			 */
			function removeClass(obj , cn){
				//创建一个正则表达式
				var reg = new RegExp("\\b"+cn+"\\b");
				
				//删除class
				obj.className = obj.className.replace(reg , "");
				
			}
			
			/*
			 * toggleClass可以用来切换一个类
			 * 	如果元素中具有该类，则删除
			 * 	如果元素中没有该类，则添加
			 */
			function toggleClass(obj , cn){
				
				//判断obj中是否含有cn
				if(hasClass(obj , cn)){
					//有，则删除
					removeClass(obj , cn);
				}else{
					//没有，则添加
					addClass(obj , cn);
				}
				
			}
			
		</script>
	</head>
	<body>
		
		<button id="btn01">点击按钮以后修改box的样式</button>
		
		<br /><br />
		
		<div id="box" class="b1 b2"></div>
	</body>
</html>