标签：off listen att 保存 font checkbox insert pen dev
1. window常用子对象：
history: window对象中保存当前窗体访问过的url的历史记录栈
history.go(1): 前进1次
go(-1): 后退1次
go(0): 刷新当前页
go(n): 前进/后退n次
location：当前窗口正在打开的url地址对象
location.search：获得url中的查询字符串
如果进一步获得参数名和参数值？
先按&分隔，再按=分隔
location.replace("新url"): 在当前窗口打开新链接
不可后退
（history中旧url被新url替换了）
使用location在当前窗口打开新链接，可后退：2种：
location.href="新url";
location.assign("新url");
刷新：location.reload();
screen: 封装当前屏幕的显示信息
screen.height/width: 完成屏幕宽高
availHeight/Width: 去掉任务栏后的剩余宽高
window7下任务栏透明
2. ***事件：
浏览器自动触发的或用户手动触发的对象状态的改变
DOM Level2 Event标准
IE8：自成体系！
事件处理函数：当事件触发时，自动执行的函数
比如：<button onclick="函数/js语句"></button>
//btn.onclick();
事件处理：
1. 事件定义（绑定事件处理函数）：3种
html： <标签 on事件名="fun()">
d1.onclick=function(){
eval("fun()");
//[window.]fun();
}
强调：fun()中this-->window
如果获得当前目标元素对象：
html: onxxx="fun(this)"
js中定义函数时：fun(elem)
js: elem.on事件名=函数对象;
一个元素的一个事件处理函数，只能绑定一个函数对象
DOM标准：elem.addEventListener(
"事件名",函数对象,是否在捕获阶段触发)
true/false
一个元素的一个事件处理函数，可add多个不同函数对象IE8: elem.attachEvent("on事件名",函数对象)
实际执行的：elem.on事件名(); this-->elem
2. ***事件周期：从浏览器捕获到事件后，一直到最后一个事件触发完，经历的过程。
DOM标准：3个阶段：
1. （由外向内）捕获：从最外层html元素开始，向内逐层记录每层元素绑定的事件处理函数。到目标元素为止
2. 目标触发：自动执行目标元素上绑定的事件处理函数
3. （由内向外）事件冒泡：从目标元素的父元素开始，逐层向上执行每层的事件处理函数，到最外层html结束。
IE8的事件周期：2个阶段：没有捕获
3. event对象：
当事件发生时，自动创建，封装了事件信息
比如：keyCode
screenX/Y
获得event对象：
html: onclick="fun(event)"
实际调用时: event会自动获得当前事件对象
fun(e){
e中获得的就是事件对象
}
js：elem.onxxxx=fun;
fun(){
//DOM标准：自动创建event对象，默认以第一个参数传入！
//IE8：window全局的event属性，
当事件发生时，也会自动创建event对象,
但会保存在window.event中
}
event对象中包含：
1. 目标元素对象：var src=e.srcElement||e.target
2. ***取消/利用冒泡:
取消：DOM标准：e.stopPropagation()
IE8：e.cancelBubble=true;
一般用在当前事件处理函数执行结尾
***优化：如果多个子元素中定义了相同的事件处理函数
其实，只需要在共同的父元素上定义一次即可！
3. *取消事件：
if(e.preventDefault){
e.preventDefault(); //--DOM
}else{
e.returnValue=false; //--IE8
}
何时取消：比如:表单提交前，如果验证未通过，
则取消之后的自动提交
事件坐标：3种坐标系
1. 相对于显示器:
最大值: screen.availHeight/availWidth
鼠标位置: e.screenX/Y
2. 相对于文档显示区
最大值：window.innerHeight/Width
鼠标位置：e.clientX/x; e.clientY/y
3. 相对于父元素左上角
最大值：父元素的宽和高
鼠标位置：e.offsetX/Y
页面滚动
1.(继续)事件对象的生命周期
第一阶段：捕获，event对象由父元素向下传递
第二阶段：目标，event对象在事件源对象上触发
第三阶段：冒泡，event对象由子元素向上传递
注意：(1)IE事件模型没有捕获阶段，element.attachEvent( ‘onxxx‘, fn )也没有第三个参数。
(2)element.onxxx = fn 绑定的事件处理函数都是在“冒泡阶段”触发的。
(3)DOM事件模型中有完整的三个阶段，使用第三个参数useCapture(boolean)来指定“是否绑定在捕获阶段”
element.addEventListener(‘xx‘, fn, false) —— 事件监听函数绑定在冒泡阶段
element.addEventListener(‘xx‘, fn, true) —— 事件监听函数绑定在捕获阶段
思考：DOM事件模型为什么添加一个捕获阶段？？
2.如何获取event对象？
IE: HTML/JS中，可以直接使用event对象，把event看做是window.event属性。
FF: HTML中可以使用使用event对象，但JS中不能直接使用该对象。
兼容性问题解决方法：
绑定监听函数的方式1：
HTML: <a onclick="f1( event )">
JS: function f1( e ){ console.log(e); }
绑定监听函数的方式2/3：
JS： element.onclick = function( event ){
console.log( event );
}
事件对象的常用属性和方法：
(1)获取事件的源头对象
IE: event.srcElement
FF: event.target
兼容性解决方案： var src = event.srcElement || event.target;
练习：创建一个计算器应用，监听函数对象尽可能少
(2)阻止事件的默认行为
事件的默认行为：一个事件触发后，默认要执行的动作。如submit按钮被单击，默认就要提交表单；网页中单击上下左右键，默认就要让内容发生滚动；输入框中击键后默认就会把键盘字符显示在输入框中.......
有些应用中，需要阻止事件的默认行为！
IE: event.returnValue = false;
DOM: event.preventDefault( );
保证兼容性的写法：
if( event.preventDefault ){
event.preventDefault( ); //DOM
}else{
event.returnValue = false; //IE
}
(3)停止事件的继续传播
IE: event.cancelBubble = true; //取消冒泡
DOM: event.stopPropagation( ); //停止传递/传播
考虑兼容性的写法：
if( event.stopPropagation ){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
(4)获取事件的发生坐标
BOM： 七个对象，操作浏览器本身
DOM： N个对象，操作文档内容，分为三部分：
(1)核心DOM：用于操作任意的ML文档
(2)HTML DOM：用于操作HTML文档
(3)XML DOM：用于操作XML文档
4.HTML DOM
面试题：核心DOM和HTML DOM的关系
核心DOM只定义几种不同Node对象：属性Node、文本Node、元素Node，但没有定义元素Node又可以细分为哪些；
HTML DOM定义了100种左右的元素Node——每个HTML标签都对应一个对象，且这些对象预定义了若干的属性，如：
var img = new Image( );
img.src = ‘1.jpg‘;
img.title = ‘‘;
img.width = ‘‘;
img.alt = ‘‘;
img.onclick = function(){ }
<img src="" width="" height="" title="" onclick="">
练习：使用HTML DOM属性访问方式来获取和修改下述超链接的所有属性值
<a class="title" href="javascript:void(0)" target="_blank" onclick="open()">标题1</a>
5.常用的HTML DOM对象
(1)Image对象 <=> <img>
(2)Table对象 <=> <table border="" width="">
特别的属性： rows 类数组型属性
特别的方法：
insertRow( ) 为表格对象添加一个tr子对象
deleteRow( ) 从表格对象中删除一个tr子对象
(3)TableRow对象 <=> <tr>
特别的属性：
rowIndex : number，返回当前tr在table中序号
cells：类数组对象，返回当前tr中所有的td集合
特别的方法：
insertCell( ) 在tr中的插入一个新的td
deleteCell( ) 在tr中删除一个td元素
(4)TableCell对象 <=> <td>
(5)Form对象 <=> <form action="" method="" enctype="">
特殊的方法：
submit( ) 提交表单中的内容
reset( ) 重置表单中的内容
|
<form id="form1" action="user.php"> <input ...> <input type="button" onclick="if(...){ form1.submit( );}" > <input type="button" onclick="form1.reset( );" > </form> |
(6)表单中的输入域对象： Text Password Checkbox....
常用的属性：
name
value
常用的方法：
focus( ) 申请获取输入焦点
select( ) 选中输入框中的所有文本
(7)Select对象 <=> <select multiple="true" size="3">
特别的属性：
multiple： boolean，是否允许多选，注意！与HTML中的类型不同！！！！
size： number，显示出来的选项的数量
value：string，当前选中的option的值
selectedIndex：number，当前选中的option的下标
options：类数组对象，包含所有的option
特别的方法：
add(option) 添加一个新option
remove(index) 删除一个option
(8)Option对象 <=> <option value="">
创建新的Option： new Option(txt, value)
new Option(‘北京‘, ‘110‘); <=> <option value="110">北京</option>
特别的属性：
index：
text： 开始标签和结束标签之间的文本
value：
selected：boolean 读取/设置当前option是否被选中
练习：有如下的数据：
var data = [
{id: 110, pname: ‘北京市‘},
{id: 210, pname: ‘天津市‘},
{id: 310, pname: ‘上海市‘}
];
把上述数据盛放到一个select中，并让最后一个选项默认选中
四个阶段的重点
(1)JS
(2)DOM操作
(3)jQuery
(4)AJAX
挑战性作业：
(1)完成计算器的加减乘除功能。
(2)无限级联下拉菜单
标签：off listen att 保存 font checkbox insert pen dev
原文地址：http://www.cnblogs.com/handsomeboyyyyyy/p/6854379.html
