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();