JavaScript与HTML之间的交互是通过事件实现的 事件 就是文档或浏览器窗口中发生的一些特定交互的瞬间
1、DOM（文档对象模型）是针对HTML和XML文档的一个API（应用程序编写接口） DOM描绘了一个层次化的节点树 这个节点树可以进行添加删除修改
（1）node类型
DOM1级定义了一个node接口 该接口将由DOM中的所有节点类型实现 这个node接口在JavaScript中作为node类型实现 除了IE之外其他所有浏览器都可以访问到这个类型 JavaScript中所有节点类型都继承自node类型 因此所有节点类型都共享着基本属性和方法
每个节点都有一个NodeType属性 用于表名节点的类型 节点类型由在Node类型中定义的下列12个数值常量来表示 任何节点必居其一
Node.ELEMENT_NODE; 1
Node.ATTRIBUTE_NODE; 2
Node.TEXT_NODE; 3
Node.CDATA_SECTION_NODE; 4
......
if (someNode.nodeType == Node.ELEMENT_NODE){ //在 IE 中无效
alert("Node is an element.");
}
if (someNode.nodeType == 1){ //适用于所有浏览器
alert("Node is an element.");
}
（2）节点关系
文档中的所有节点都存在这样或那样的关系 节点间的各种关系可以用传统的家族关系来描述 在HTML中body元素可以看做是html元素的子元素 每一个节点都有一个childNodes属性 其中保存着一个NodeList对象 NodeList是一种类数组对选哪个用于保存一组有序的节点 可以通过位置来访问这些节点 也就是方括号[] 但是它并不是Array的实例NodeList对象的独特之处在于 它实际上 是基于DOM结构动态执行查询的结果 因此DOM结构的变化能自动反映在NodeList对象中 我们常说NodeList是有生命、有呼吸的对象 而不是我们在第一次访问他们的某个瞬间拍摄下来的一张快照
访问NodeList中节点的方法 [] 或 item()
var firstchild = someNode.childNodes[0];
var secondchild=someNode.childNodes.item(1);
var count = someNode.childNodes.length;
（3）操作节点
appendChild()在childNodes列表的末尾添加一个新节点
insertBefore()把节点放在某个特定位置上 接收两个参数 要插入的节点和参照节点 参照节点为null时就在末尾添加节点
//节点的添加
//插入后成为最后一个子节点
returnnode = someNode.insertBefore(newnode,null);
console.log(newnode == someNode.lastChild); //true
//插入后成为第一个子节点
var returnnode=someNode.insertBefore(newnode,someNode.firstChild);
console.log(newnode == someNode.firstChild); //true
replaceChild()替换节点 接收两个参数 要插入的节点和要替换的节点
removeChild()删除节点 接收一个参数 即需要删除的节点
cloneNode()复制节点 接收一个布尔值参数 true or false为true时进行深复制 也就是复制节点和整个子节点树 false是进行浅复制 只复制节点本身 复制后返回的节点副本归文档所有 但并没有指定父节点 因此这个节点就成了孤儿节点 此时要通过 appendChild/insertBefore/replaceChild将它添加到文档中
（4）document类型
JavaScript通过document类型表示文档 document对象是window对象的一个属性 因此可以作为全局对象来访问
<html>
<body>
</body>
</html>
var html = document.documentElement; //取得对<html>的引用
alert(html === document.childNodes[0]); //true
alert(html === document.firstChild); //true
document对象还有一个body属性 直接指向body元素 document.body
（5）查找元素
getElementById()取id名 和 getElementByTagName()取标签名
（6）文档写入
write() writeln() 接收一个字符串参数 不同的是writeln会在结尾添加一个换行符
open() colse()
（7）取得特性
getAttribute()
div.getAttributr(“id”);
（8）设置特性
setAttribute() 接收两个参数要接收的特姓名和值
div.setAttribute(“id”,“some”);
（9）创建元素
createElement()
2、DOM的扩展
（1）querySelector() 匹配元素 id “#id” class “.class” body “body”
取得img的button元素"img.button"
（2）querySelectorAll() 匹配符合要求的所有元素
（3）matchsSelector() 匹配返回true 否则返回false
（4）元素遍历
childElementCount 返回子元素个数
firstElementChild指向第一个子元素
lastElementChild指向最后一个子元素
previousElementSiblings指向前一个同辈元素
nextElementSiblings指向同一个后辈元素
（6）getElementByClassName()
（7）contains() 检测该节点是否是节点后代
3、DOM2和DOM3
DOM1级主要定义的是HTML和XML文档的底层结构 DOM2和DOM3级则在这个结构的基础上引入了更多的交互能力
（1）访问元素的样式 也可以设置元素的样式 style.backgroundImage style.color style.display
（2）偏移量 算宽高时包含边距
offsetHeight 元素在垂直方向上占用空间大大小 以像素计
offsetWidth 元素在水平方向上占用空间的大小 以像素计
offsetLeft 元素的左外边框至包含元素的左内边框之间的像素距离
offsetTop 元素的上外边框至包含元素的上内边框之间的像素距离
（3）客户区大小 不包含边框
clientHeight
clientWidth
（4）滚动大小
scrollHeight 在没有滚动条的情况下 元素内容的宗高度
scrollWidth 在没有滚动条的情况下 元素内容的总宽度
scrollLeft 被隐藏在内容区域左侧的像素数
scrollTop 被隐藏在内容区域上方的像素数
2、事件冒泡
IE的事件流叫做事件冒泡 即事件开始时由最具体的元素接收 然后逐级向上传播到较为不具体的节点
比如单击一个div模块 这个click事件将会沿着 div body html document 传播
这个事件将沿着DOM树（DOM文档对象模型）向上传播
3、事件捕获
事件捕获的思想是不太具体的节点应该更早的接收到事件 事件捕获的用意在于在事件到达预定目标之前捕获它 如果仍以点击div为例子那么 事件驳货会按下列顺序触发click事件 document html body div 沿着DOM树依次向下
4、事件流包括三个阶段：事件捕获、处于目标阶段、事件冒泡
在DOM事件流中 实际的目标div元素 在捕获阶段不会接收到事件 这意味着在捕获阶段 事件从document到html再到body 就停止了 在一个阶段是处于目标阶段 于是事件在div向上发生 并在事件处理中被看做事件冒泡的一部分
5、事件处理程序
事件就是用户或浏览器自身执行的某种动作 诸如click load mouseover 都是事件的名字 而响应某个事件的函数就叫做事件处理程序或者事件侦听器 事件处理程序以on开头 那么click事件的处理程序就是onclick ，load事件的处理程序就是onload
①HTML事件处理程序
<input type="button" value="Click Me" onclick="alert('Clicked')" />
//
<script type="text/javascript">
function showMessage(){
alert("Hello world!");
}
</script>
<input type="button" value="Click Me" onclick="showMessage()" />
②IE事件处理程序
attachEvent() detachEvent()
这两个方法接受相同的两个参数 事件处理程序名称与事件处理程序函数
var btn = document.getElementById("mybtn");
btn.attachEvent("onclick",function(){
alert("clicked");
});
这里与DOM的addEventListener()方法中的click是不一样的
在attachEvent()方法的情况下 事件处理会在全局作用域中运行 此时this等于windowconsole.log(this === winodw); //true
与addEventListener()类似 attachEvent()方法也可以用来为元素添加多个事件处理程序
var btn = document.getElementById("mybtn");
btn.attachEvent("onclick",function(){
alert("clicked");
});
btn.attachEvent("onclick",function(){
alert("hello world");
});
这里调用了两次attachEvent() 为同一个按钮添加了两个不同的事件处理程序 不过与DOM方法不同的是 这些事件处理程序不是以添加它们的顺序执行而是以添加它们相反的顺序执行 也就睡这个例子中先看到hello world载看到clicked 使用attachEvent()添加的事件可以用 detachEvent()来移除 条件是必须是提供相同的参数 与DOM方法一样 这也意味着添加的匿名函数将无法被移除 不过只要能够将对相同函数的引用传给detachEvent()就可以移除相应的事件处理程序
var btn = document.getElementById("mybtn");
var handler = function(){
alert("clicked");
};
btn.attachEvent("onclick",handler);
btn.detachEvent("onclick",handler);
③跨浏览器的事件处理程序
1、DOM0级 将一个函数赋值给一个时间处理程序属性
2、DOM2级 用于处理指定和删除事件处理程序操作的方法 3、addEventListener() removeEventListener() 接受3个函数：处理的事件名，作为事件处理程序的函数和一个布尔值（true捕获阶段，false冒泡阶段）
3、IE事件处理程序 attachEvent() detachEvent()
要创建一个addhandler方法 它的职责是视情况分别使用DOM0 DOM2 IE方法来处理事件 addhandler方法接收三个参数 要操作的元素 事件名称 事件处理程序函数
var EventUtil = {
addHandler: function(element, type, handler){
if (element.addEventListener){
element.addEventListener(type, handler, false);
} else if (element.attachEvent){
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
},
removeHandler: function(element, type, handler){
if (element.removeEventListener){
element.removeEventListener(type, handler, false);
} else if (element.detachEvent){
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
}
}
};
这两个方法首先都会检测传入的元素是否存在DOM2级方法 如果存在DOM2级方法就使用该方法 即 传入事件类型 事件处理程序函数 和第三个参数false（表示冒泡阶段） 如果存在的是IE的方法 则采取第二种方案 为了在IE8及更早的版本中运行 此时的事件类型必须加上on前缀 最后一种可能就是使用DOM0级方法（在现代浏览器中 应该不会执行这一步）
6、事件对象
在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。
在需要通过一个函数处理多个事件时可以使用type属性（type 被触发事件的类型）
var btn = document.getElementById("mybtn");
var handler = function(event){
switch(event.type){
case "click":
alert("clicked");
break;
case "mouserover":
event.target.style.backgroundColor="red";
break;
case "mouseout":
event.target.style.backgroundColor="";
break;
}
}
//调用
btn.onclick=handler;
btn.onmouseover=handler;
btn.onmousout=handler;
7、事件类型
★UI事件
当用户与页面上元素交互时触发
①load 当页面完全加载后在window上面触发 当所有框架都加载完毕时在框架集上触发 当图像加载完毕时在img上触发 对应的有unload
<img src="smile.gif" onload="alert('Image loaded.')">
EventUtil.addHandler(window, "unload", function(event){
alert("Unloaded");
});
②abort 在用户停止下载过程时 如果嵌入的内容没有加载完 则在object元素上触发
③error 错误时触发 JavaScript错误时 无法加载图像时在img元素上触发等④select 在选择文本框（input或者texterea）中的一个或多个字符时触发
⑤resize 当窗口或框架的大小变化时在window或框架上触发
⑥scroll 当用户滚动带滚动条的元素中的内容时 在该元素上触发
★焦点事件
在页面元素获得或失去焦点时触发
blur 元素失去焦点时触发 事件不冒泡
focus 元素获得焦点时触发 事件不冒泡
focusin 元素获得焦点时触发 事件冒泡
focusout 元素失去焦点时触发
★鼠标与滚轮事件 冒泡
click 点击鼠标或回车时触发
dblclick 双击触发
mousedown 按下任意鼠标按钮时触发
mouseenter 在鼠标光标首次移动到元素范围之内时触发
mouseleave 在位于元素上方的鼠标光标移动到元素范围之外时触发
mousemove 鼠标移动到元素内部时重复触发
mouseout 鼠标指针位于一个元素上方 然后用户将其移入另一个元素时触发
mouseover 鼠标指针位于一个元素外部 然后用户将其首次移入另一个元素边界之内时触发
mouseup 在用户释放鼠标按钮时触发
★客户区坐标位置 clientX clientY
★页面坐标位置 pageX pageY
★屏幕坐标位置 screenX screenY
★键盘与文本事件
keydown 按下键盘任意键触发
keypress 按下键盘字符键触发
keyup 释放键盘上的键触发
7、事件委托
对 事件处理程序太多 问题的解决方案就是事件委托 事件委托利用了事件冒泡
<ul id="mylinks">
<li id="hello">hello</li>
<li id="something">something</li>
<li id="sayhi">say hi</li>
</ul>
//javascript
var list=document.getElementById("mylingks");
list.addEventListener("click",function(){
console.log("clicked");
})
8、移除事件处理程序
<div id="myDiv">
<input type="button" value="Click Me" id="myBtn">
</div>
<script type="text/javascript">
var btn = document.getElementById("myBtn");
btn.onclick = function(){
//先执行某些操作
btn.onclick = null; //移除事件处理程序
document.getElementById("myDiv").innerHTML = "Processing...";
};
</script>
扫一扫
2839
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
