BOM和DOM
Day 01
正课:
1.什么是DOM:
2.DOM Tree
3.遍历DOM树:
1.什么是DOM:
原生js=ECMAScript(核心语法)+
DOM(专门操作网页内容的API)+ 3天
BOM(专门操作浏览器窗口的API)+ 2天
DOM: Document Object Model
专门操作网页内容的API
DOM标准: W3C 规定了操作一切结构化文档的API。
核心DOM: 操作一切结构化文档(包括HTML和XML)的通用API
万能，但繁琐
HTML DOM: 专门操作HTML文档的简化版API
只对部分常用的API提供了简化
不是万能
XML DOM: 专门操作XML文档的API
鄙视题: HTML XHTML DHTML XML
HTML:专门编写网页内容的语言
XHTML: 更严格的HTML标准
DHTML: 一切实现动态网页效果的技术统称
DHTML=HTML+CSS+JS
XML: 可扩展的标记语言
语法同HTML,但标签可自定义
专门用于持久保存或在网络中传输结构化数据
<student>
<name>杨幂</name>
<math>81</math>
<chs>56</chs>
</student>
JSON: JavaScript Object Notation
'{"name":杨幂,"math":81,"chs":56}'
DOM可执行的操作:
***查找 修改 添加 删除
2. ***DOM Tree:
什么是DOM树:
网页中一切内容在内存中都是以树形结构组织在一起的。
网页加载过程:
当接收到HTML文档时:
创建一个树根节点:document对象
读取HTML内容时:
每读取一项内容就创建一个节点对象
将节点对象挂到document下
网页中的一切内容都是一个节点对象：
节点对象:Node
三大属性:
nodeType:节点类型:
document: 9
element: 1
attribute: 2
text: 3
何时: 辨别获得的节点类型时
nodeName: 节点名:
document: #document
element: 标签名(全大写)
何时: 辨别元素的具体标签名
attribute: 属性名
text: #text
nodeValue: 节点值:
document: null
element: null
attribute: 属性值
text: 文本内容
节点间关系:
节点树: 包含所有html内容的DOM树
1. 父子关系:
parentNode: 父节点
childNodes: 所有直接子节点
返回一个动态集合-类数组对象
firstChild: 第一个子节点
lastChild: 最后一个子节点
2. 兄弟关系:
nextSibling: 下一个兄弟
previousSibling: 前一个兄弟
何时使用:
已经获得一个节点，要找它周围的相邻的节点。
问题: 容易受看不见的空文本干扰
解决: 如果只需要获取元素，而不关心文本，可用元素树
元素树: 仅包含元素节点的树结构
强调: 不包含一切文本节点
1. 父子关系:
parentElement: 父元素
children: 所有直接子元素
返回一个动态集合-类数组对象
firstElementChild: 第一个子元素
lastElementChild: 最后一个子节点
2. 兄弟关系:
nextElementSibling: 下一个兄弟
previousElementSibling: 前一个兄弟
问题: 浏览器兼容性: IE9+
3.遍历节点:
2步:
1. 先定义函数仅遍历直接子节点
2. 对每个直接子节点应用和父节点相同的操作
算法: 深度优先遍历
childNodes和children:
live collection(动态集合):
不实际存储节点的完整属性
问题:每次访问集合时，都会重新查找DOM树
遍历:
for(var i=0;i<childNodes.length;i++)
造成反复查找DOM树
解决:
for(var i=0,len=childNodes.length;i<len;i++)
问题:递归的效率低
解决:用遍历API+循环
遍历API:
1. 节点迭代器:
按照深度优先的原则，逐个返回每个子节点。
何时: 只要按照深度优先的顺序，遍历所有子代节点时。
如何:2步:
1.用指定父元素创建节点迭代器对象:
var iterator=
document.createNodeIterator(
parent,NodeFilter.SHOW_ALL,
.SHOW_ELEMENT
null,false
);
2.反复调用iterator的nextNode方法
返回正在遍历的当前节点对象
直到返回null为止
2.TreeWalker:
比节点迭代器更灵活的API:
基本用法和NodeIterator一样
只不过扩展了:
walker.parentNode()
walker.firstChild();
walker.lastChild();
walker.nextSibling();
walker.previousSibling();
如何: 2步:同NodeIterator
*******************************************************************************
Day 02
回顾:
1. DOM树:
节点对象: Node
nodeType
document: 9
element: 1
attribute: 2
text:3
nodeName
document: #document
element: 标签名(全大写)
attribute: 属性名
text: #text
nodeValue
document: null
element: null
attribute: 属性值
text: 文本内容
节点间关系:
节点树:
1. 父子关系:
elem.parentNode
elem.childNodes (live collection)
elem.firstChild
elem.lastChild
2. 兄弟关系:
elem.previousSibling
elem.nextSibling
元素树:
1. 父子关系:
elem.parentElement
elem.children (live collection)
elem.firstElementChild
elem.lastElementChild
2. 兄弟关系:
elem.previousElementSibling
elem.nextElementSibling
遍历:
1. function getChildren(parent){
//输出parent
var children=parent.childNodes;//children
for(var i=0,len=children.length;i<len;i++){
getChildren(children[i]);
}
}
2. 遍历API:
NodeIterator:
var iterator=document.createNodeIterator(
parent,NodeFilter.SHOW_ALL, null, false
.SHOW_ELEMENT
);
var curr=iterator.nextNode();//获得下一个节点
while((curr=iterator.nextNode())!=null){
//curr就是当前节点
}
TreeWalker:
var walker=document.createTreeWalker(
parent,NodeFilter.SHOW_ALL, null, false
.SHOW_ELEMENT
);
基本用法同iterator，外还扩展了:
walker.parentNode();
walker.firstChild();
walker.lastChild();
walker.nextSibling();
walker.previousSibling();
正课:
1. ***查找:
1. 利用节点间关系查找周围的元素
2. 用HTML属性查找:
按id: var elem=document.getElementById("id");
只能找到一个元素
如果没找到，返回null
强调: 必须用document调用。
按标签名:
var elems=
parent.getElementsByTabName("标签名");
在指定父元素parent下查找指定标签名的元素
返回live collection
强调: 查找所有子代节点
按name:
var elems=
parent.getElementsByName("name");
在指定父元素parent下查找指定name属性的元素
返回live collection
按class:
var elems=
parent.getElementsByClassName("class");
在指定父元素parent下查找指定class属性的元素
返回live collection
如果getElementsXXX没找到，返回空集合[]
3. 用选择器查找:
1. 只查找一个符合选择器要求的元素:
var elem=parent.querySelector("selector");
如果没找到，返回null
2. 查找多个符合选择器要求的元素:
var elem=parent.querySelectorAll("selector");
如果没找到，返回空集合[]
强调: 返回no-live collection:
包含完整属性的集合，反复访问不会导致重复查找DOM树
鄙视题: getXXX vs querySelector
1. 执行效率:
如果通过一个属性即可找到的元素
getXXX更快 返回live collection
querySelector 更慢 no-live collection
2. 代码量:
如果需要通过多次查找才能获得想要的元素时
querySelector 更简单
getXXX 繁琐
4. VIP通道:
document.body
document.head
document.documentElement : html
回顾:
1. 查找:
1. 节点间关系:
节点树:
1. 父子关系:
parentNode
childNodes
firstChild
lastChild
2. 兄弟关系:
previousSibling
nextSibling
元素树:
1. 父子关系:
parentElement
children
firstElementChild
lastElementChild
2. 兄弟关系:
previousElementSibling
nextElementSibling
2. 按html属性找:
document.getElementById()
parent.getElementsByTagName();
parent.getElementsByName();
parent.getElementsByClassName();
3. 按选择器查找:
parent.querySelector();
parent.querySelectorAll();
4. VIP通道:
document.body
document.head
document.documentElement - html
正课:
1. 修改:
内容:
属性: 标准、自定义
样式: 内联样式、内/外部样式表
1. 修改内容:
elem.innerHTML: 元素开始标签到结束标签之间的html内容
elem.textContent: 元素开始标签到结束标签之间的文本内容
去掉html标签
IE8.innerText
练习: 技巧: 如果遍历过程中会删除数组的元素，则要从后向前反向遍历。
2. 访问或操作元素的属性:
标准属性:
核心DOM: 万能
1. 访问属性节点对象:
var node=elem.attributes[i/"属性名"];
var node=elem.getAttributeNode("属性名");
node.value->获得属性值
2. 获得属性值:
var value=elem.getAttribute("属性名");
3. 修改属性值:
elem.setAttribute("属性名","值");
4. 移除属性:
elem.removeAttribute("属性名");
5. 判断是否包含指定属性:
var bool=elem.hasAttribute("属性名");
HTML DOM: 将html标准属性封装到了元素对象中
elem.属性名
问题: 仅能访问HTML标准属性
自定义属性:
核心DOM: 万能
HTML5 规定:
1, 定义自定义属性时: data-属性名="值"
2, 读取自定义属性: elem.dataset.属性名
property vs attribute
显式写在开始标签中的: attribute
强调: getAttribute只能获得在页面上显式定义的属性值
在内存中对象里保存的: property
标准属性: 既是property也是attribute
自定义属性: 只是attribute
input type="checkbox" 要获得选中状态checked
不能用getAttribute，一定要用elem.checked
*******************************************************************************
Day 03
回顾:
1. ***查找:
1. 节点间关系:
节点树:
1. 父子关系:
parentNode
childNodes
firstChild
lastChild
2. 兄弟关系
previousSibling
nextSibling
元素树:
1. 父子关系:
parentElement
children
firstElementChild
lastElementChild
2. 兄弟关系
previousElementSibling
nextElementSibling
2. 按HTML查找:
按id: document.getElementById();
按标签名: parent.getElementsByTagName();
按name: parent.getElementsByName();
按class: parent.getElementsByClassName();
3. 按选择器:
找一个: parent.querySelector()
找多个: parent.querySelectorAll()
4. VIP:
document.body
document.head
document.documentElement
2. 访问属性:
标准属性:
核心DOM:
1. 获得属性值: getAttribute("属性名")
2. 设置属性值: setAttribute("属性名",值)
3. 移除属性: removeAttribute("属性名")
4. 判断是否包含: hasAttribute("属性名")
HTML DOM:
elem.属性名
自定义属性:
核心DOM:
HTML5: 1. 定义时: data-属性名="值"
2. 访问时: elem.dataset.属性名
property vs attribute
正课:
1. 修改:
样式: 内联样式, 内/外部样式表
2. 增加和删除:
1. 修改样式:
访问内联样式:
修改样式: elem.style.css属性名
获取样式: 问题: 仅能访问内联样式
解决: var style=getComputedStyle(elem)
style.css属性名 ——只读
其中,css属性名都要去横线，变驼峰:
比如: background-color: backgroundColor
list-style-type: listStyleType
问题: 一条语句只能修改一个样式
解决: 将一套样式，放入class
用程序操作class
课堂练习:
获得焦点onfocus: 元素从不可操作到可操作的状态变化
失去焦点onblur: 元素从可操作变回不可操作的变化
修改内/外部样式表中的属性:
1. 获得样式表对象: var sheet=document.styleSheets[i]
2. 获得cssRule对象: var rule=sheet.cssRules[i];
特殊: rule是一个keyframes:
var subRule=rule.cssRules[i]
3. 修改cssRule中的属性: rule.style.css属性名=值
Chrome: 不允许sheet对象访问本地的css样式表文件
正课:
1. 添加和删除:
2. ***HTML DOM常用对象:
Image Select Table Form
Option
1. 添加和删除:
添加: 3步:
1. 创建空元素对象:
var a=document.createElement("a");
相当于: <a></a>
2. 设置元素的关键属性:
a.href="http://tmooc.cn"
a.innerHTML="go to tmooc";
3. 将元素挂到指定父元素下:
末尾追加: parent.appendChild(a);
插入: parent.insertBefore(a,old);
替换: parent.replaceChild(a,old);
***优化: 尽量少的操作DOM树:
html->DOM Tree
↓
Render Tree->layout->paint
↑
css->cssRules
如何: 1. 如果同时添加父元素和子元素，要在内存中先将所以子元素添加到父元素下，将父元素一次性加入DOM树
2. 如果同时添加多个平级子元素，要先将平级子元素加入文档片段，再将文档片段整体加到页面。
练习: select元素: onchange事件: 选中项发生改变时触发
selectedIndex属性: 当前选中项的下标
文档片段: 内存中临时存储多个平级子元素的虚拟父元素
何时: 添加多个平级元素时，都要先将子元素追加到文档片段中缓存，再将文档片段一次性添加到页面的父元素下
如何: 3步:
1. 创建文档片段：
var frag=document.createDocumentFragment();
2. 将平级子元素，先追加到frag下: 用法同普通父元素
3. 将文档片段，整体添加到页面
删除: parent.removeChild(child);
child.parentNode.removeChild(child);
2. HTML DOM常用对象:
Image: <img />
创建: var img=new Image();
Select: <select>
属性:
selectedIndex: 当前选中项的下标
options: 获得select下所有option元素的集合
Option:<option>
创建: var opt=new Option(text,value);
相当于: var opt=
document.createElement("option");
opt.innerHTML=text;
opt.value=value;
属性: index、text、value、selected
value: 如果选中项有value，则select的value等于选中项的value
如果选中项没有value，则select的value等于选中项的内容
方法:
add(option): 向select下追加一个option对象
appendChild(option)
remove(i): 移除select下i位置的option
事件: onchange: 当选中项发生改变时触发
*******************************************************************************
Day 04
回顾:
1. 添加和删除:
添加: 3步:
1. var a=document.createElement("a")
2. 设置关键属性
3. 将元素添加到DOM树:
parent.appendChild(a);
parent.insertBefore(a,old);
parent.replaceChild(a,old);
优化: 尽量少的操作DOM树，避免反复layout
1. 如果同时添加父元素和子元素，应在内存中先将子元素拼到父元素下，再将父元素一次性添加到DOM树
2. 如果同时添加多个平级子元素，应先将所有子元素放入文档片段，再将文档片段一次性添加到DOM树
文档片段:
1. var frag=document.createDocumentFragment();
2. frag.appendChild(child);
3. parent.appendChild(frag);
删除: parent.removeChild(child);
child.parentNode.removeChild(child);
2. HTML DOM常用对象:
Image: var img=new Image();
Select:
属性: selectedIndex, options, value
方法: add(opt), remove(i)
事件: onchange
Option:
创建: var opt=new Option(text,value)
正课:
1. HTML DOM常用对象:
Table
tHead:
var thead=table.createThead();
table.deleteThead();
rows:
var tr=thead.insertRow(i);
//省略i，表示末尾追加
thead.deleteRow(i);
//i不能省略
cells:
var td=tr.insertCell(i);
//省略i，表示末尾追加
tr.deleteCell(i)
tBodies
tBody:
var tbody=table.createTBody();
//没有table.deleteTBody!
tFoot: 同tHead
Table.rows:
table.insertRow(i);
table.deleteRow(i);
row.rowIndex: 标识row在整个表中的下标位置
table.deleteRow(row.rowIndex)
强调: 所有creatxxx/insertxxx方法都会自动将新元素添加到父元素下，不需要appendChild
练习: 确认框: confirm 两个按钮
点确认，就返回true，否则返回false
Form
获取: var form=document.forms[i/id/name];
属性:
length: 表单中，表单元素的个数
elements[i/id/name]
获得表单中的元素:
form.name => form.elements["name"]
方法: submit(); 手动提交表单
事件:
每个表单元素都有两个方法:
elem.focus(); //让elem获得焦点
elem.blur(); //让elem失去焦点
*******************************************************************************
Day 05
正课：
1. BOM:
打开和关闭窗口
窗口大小和窗口定位
*****定时器
1. 什么是BOM: Browser Object Model
BOM是专门操作浏览器的API
window: 两个角色
1. 代替global，充当全局对象
2. 封装操作浏览器窗口的API
history: 保存当前窗口打开后成功访问过的url的历史记录栈
navigator: 保存浏览器配置信息
location: 保存当前窗口正在打开的url的对象
screen: 保存当前显示器或桌面分辨率信息
event: 在事件发生时，自动保存事件相关信息的对象
2. 打开和关闭窗口:
window.open() 打开，window.close()关闭当前窗口
打开超链接的方式总结:
1. 在当前窗口打开新链接，可后退
html: <a href="url"></a>
js: open("url","_self")
2. 在当前窗口打开新链接，不可后退
js: location.replace("url");
3. 在新窗口打开新链接，可打开多个
html: <a href="url" target="_blank"></a>
js: open("url")
4. 在新窗口打开新链接，只能打开一个窗口
内存中，每个窗口都有一个唯一的名字name属性
name属性是在内存中唯一标识一个窗口的名称
浏览器规定: 相同name的窗口的只能打开一个
后打开的会刷新先打开的。
在打开新窗口时，可自定义name属性
预定义name属性值: _self _blank ...
html: <a href="url" target="name"></a>
js: open("url","name")
3. 窗口大小和窗口定位(了解):
窗口大小:
获取窗口大小:
1. 获取完整窗口大小: outerWidth/outerHeight
2. 获得文档显示区大小: innerWidth/innerHeight
修改窗口大小:
1. 在打开窗口时，就可定义新窗口的大小和位置:
2步:
1.定义配置字符串:
var config="top=?,left=?,width=?,height=?"
//只是文档显示区的大小
2. 打开窗口时，传入配置字符串
open("url","name",config);
2. 通过API调整窗口大小:
resizeTo(width,height)
width/height定义的是完整大小
resizeBy(width的增量,height的增量)
强调:
1. 只能修改在打开时，就修改了位置和大小的弹出窗口
2. 无法修改当前窗口自己的大小
通过一个窗口修改另一个窗口的大小
窗口定位:
获取窗口左上角定位:
window.screenLeft||window.screenX
window.screenTop||window.screenY
修改窗口的位置:
moveTo(x,y);
moveBy(x的增量,y的增量)
练习:
1. 屏幕的大小:
完整大小: screen.height screen.width
去掉任务栏之后的剩余大小:
screen.availHeight screen.availWidth
2. 事件发生时，鼠标的位置:
e.screenX; 相对于屏幕左上角的x坐标
e.screenY; 相对于屏幕左上角的y坐标
回顾:
1. ***HTML DOM常用对象:
Table
创建: createTHead() createTBody() createTFoot
删除: deleteTHead() deleteTFoot()
tHead
insertRow(i) deleteRow(i)//i相对于当前行分组内的位置
rows:
tr
insertCell(i) deleteCell(i)
cells: td
tBodies
tBody
tFoot
insertRow(i) deleteRow(i)//i相对于整个表中的位置
rows:
tr.rowIndex: tr相对于整个表的位置
Form:
获得Form: document.forms[i/id/name]
form:
属性: length
方法: submit();
获得表单元素: form.elements[i/id/name]
form.name
elem:
方法: elem.focus() elem.blur()
2. BOM
打开和关闭窗口:
打开: var pop=open("url","name",config)
其中: config="top=?,left=?,width=?,height=?"
//文档显示区大小
关闭: close()
打开连接四种方式:
1. 在当前窗口打开，可后退: open("url","_self")
2. 在当前窗口打开，不可后退: location.replace("url");
3. 在新窗口打开，可重复打开: open("url")
4. 在新窗口打开，只能打开一个: open("url","name")
窗口大小与窗口定位
大小: outerWidth/outerHeight
innerWidth/innerHeight
修改: resizeTo(width,height)//完整大小
resizeBy(width的增量,height的增量)
定位: window.screenLeft||window.screenX
window.screenTop||window.screenY
修改: moveTo(left,top)
moveBy(left的增量,top的增量)
正课:
1. *****定时器
什么是: 让程序按照指定的时间间隔自动执行任务
何时: 动画
周期性定时器: 让程序按照指定的时间间隔反复自动执行同一任务。
何时: 只要反复自动执行一项任务
如何: 3件事:
1. 任务函数: 定义每次要执行的任务
2. 启动定时器: timer=setInterval(任务函数,interval)
让引擎每隔interval ms自动执行一次任务函数
其中: timer: 是当前定时器任务的一个序号
3. 停止定时器: clearInterval(timer)
如果需要停止定时器，都要在启动时就提前保存序号
如何自动停止定时器:
在任务函数的结尾，判断一个临界值，如果达到临界值，就停止定时器.
一次性定时器: 让程序先等待一段时间，再自动执行一次任务。
执行一次后，自动停止。
何时: 只要先等待一段时间，再执行一次任务
用法: 同周期性定时器
1. 任务函数:
2. 启动: timer=setTimeout(task,wait);
3. 停止: clearTimeout(timer);
不是停止执行，而是停止等待
正课:
1. BOM常用对象: history, location, navigator
2. ***event
1. BOM常用对象:
history: 保存当前窗口打开后成功访问过的url历史记录栈
history.go(n): 前进n步
前进一步: history.go(1)
后退一步: history.go(-1)
刷新: history.go(0)
location: 封装当前窗口正在打开的url的对象
属性:
href: 完整url
protocol: 协议
host: 主机名+端口
hostname: 主机名
port: 端口
pathname:路径
hash: #锚点名
search: ?表单变量
方法:
在当前窗口打开新链接:
location.href="url";
location="url";
location.assign("url");
在当前窗口打开，不可后退:
location.replace("url");
重新加载当前页面:
location.reload(force)
其中: force: 表示是否强制从服务器硬盘获取文件。
true/false
navigator: 封装浏览器配置信息的对象
cookieEnabled: 判断浏览器是否启用cookie
cookie: 客户端本地，持久存储用户私密数据的文件
plugins: 包含了所有插件的信息
userAgent: 包含浏览器名称和版本号的字符串
*******************************************************************************Day 06
回顾:
1. 定时器:
1. 任务函数:
周期性: 任务函数结尾可能需要判断临界值，自动停止
2. 启动定时器:
周期性: timer=setInterval(任务函数,interval);
一次性: timer=setTimeout(任务函数,wait);
3. 停止定时器:
周期性: clearInterval(timer); timer=null
一次性: clearTimeout(timer); timer=null
动画:
DISTANCE DURATION STEPS
step interval
timer moved
start(): setInterval(moveStep.bind(this),interval);
moveStep(): 将主角移动一个step
在moveStep结尾，判断临界值，自动停止
2. BOM常用对象:
history.go(n)
location:
属性:
href, protocol, host, hostname,port, pathname, hash, search
方法:
1. 在当前窗口打开新连接，可后退:
location="url";
location.href="url";
location.assign("url");
2. 在当前窗口打开,不可后退:
location.replace("url");
3. 重新加载当前页面:
location.reload(false/true)
navigator:
cookieEnabled
plugins
userAgent
正课:
1. ***event:
1. 什么是事件: 用户手动触发的或浏览器自动触发的页面或元素状态的改变。
所有事件: https://developer.mozilla.org/en-US/docs/Web/Events
当事件发生时，浏览器会自动调用事件处理函数:
事件处理函数: 当事件发生时，自动调用的函数
on事件名 ——其实就是一个元素的特殊属性
特殊: 需要绑定一个函数
如何绑定事件处理函数: 3种:
1. 在元素的开始标签中绑定:
<button onclick="js语句(this)"></button>
button.onclick=function(){//this->button
eval("js语句(this)")
}
当单击按钮时: button.onclick()
问题: 不符合内容与行为分离的原则，不便于维护
解决:
2. 在js中为元素的事件处理函数属性赋值:
btn.onclick=function(){//this->button
...
}
问题: 一个事件处理函数属性，只能绑定一个函数对象
解决:
3. 使用API添加事件监听:
btn.addEventListener("事件名",函数对象)
btn.removeEventListener("事件名",函数对象)
优: 1. 同一事件处理函数属性同时可绑定多个函数对象
2. 可移除绑定的函数对象
3. 可改变事件触发的顺序
事件周期:
DOM: 3个阶段:
1. 捕获: 从最外层元素，向内层元素，逐个记录绑定的事件处理函数。默认,暂不触发任何事件。
2. 目标触发: 优先触发目标元素上绑定的事件处理函数
目标元素: 实际点击的元素
3. 冒泡: 按照捕获的顺序,由内层，向外层逐层触发捕获的事件处理函数
修改事件触发的顺序:
btn.addEventListener("事件名",函数对象,capture)
其中:capture表示是否在捕获阶段就提前触发
默认false, 只在冒跑阶段才触发
改为true, 在捕获阶段提前触发
事件对象: event
事件发生时，自动创建的，封装事件信息的对象
还提供了对事件进行操作的API
获得event对象:
DOM: 事件发生时，会自动创建event对象
会将event对象作为事件处理函数的第一个参数自动传入。
阻止冒泡: e.stopPropagation();
利用冒泡:
优化: 尽量少的创建事件监听对象
事件监听对象容易形成闭包，很难释放
解决: 如果多个平级子元素需要绑定相同的事件处理函数时，只要在父元素上绑定一次即可。所有子元素共用
核心问题:
1. 如何获得目标元素: e.target
2. 屏蔽不需要的元素的干扰
取消事件(阻止默认行为): 当事件执行过程中，遇到问题，可取消事件。不再触发
如何: e.preventDefault();
练习: form对象: 事件: onsubmit 当提交前触发
回顾:
1. ***event
elem.addEventListener("事件名",函数,capture);
elem.removeEventListener("事件名",函数);
e.stopPropagation(); //取消冒泡
e.target //获得目标元素
e.preventDefault(); //阻止默认行为
正课
1. ***event
事件坐标:
参照屏幕左上角: e.screenX, e.screenY
参照文档显示区左上角: e.clientX||e.x , e.clientY||e.y
参照所在父元素的左上角: e.offsetX , e.offsetY
页面滚动事件:
onscroll:
获得页面滚动过的距离:
document.body.scrollTop|| document.documentElement.scrollTop
2. cookie:
创建: document.cookie=
"变量名=值;expires="+date.toGMTString();
