使用事件的基本结构：事件源+事件类型=执行的指令
事件源
事件
事件处理程序
事件源
事件类型
驱动程序----匿名函数
事件
onclick:鼠标单击
ondblckick:双击鼠标
onkeyup:按下并释放键盘上的一个键是出发
onchange:文本内容或下拉菜单中的选项发生改变
onfocus:获得焦点,表示文本框等获得鼠标光标
onblur:失去焦点,表示文本框等失去鼠标光标
onmouseover:鼠标移除.即鼠标停留在图片等的上方
onmouseout:鼠标移除,即离开图片等所在的区域
onload:网页文档加载事件
onunload:关闭网页时
onsubmit:表单提交事件
案例
东京广告栏
京东狗
JS的三个组成部分
核心（ECMAScript）欧洲计算机制造商协会
描述了JS的语法和基本对象。
文档对象模型（DOM）
处理网页内容的方法和接口
浏览器对象模型（BOM）
与浏览器交互的方法和接口
1、什么是DOM和节点
由结构图中我们可以看到，整个文档就是一个文档节点。
而每一个HMTL标签都是一个元素节点。
标签中的文字则是文字节点。
标签的属性是属性节点。
一切都是节点……
2、获取节点
直接获取
访问关系获取
操作节点，必须首先找到该元素。有三种方法来做这件事：
通过 id 找到 HTML 元素
document.getElementById("demo");
通过标签名找到 HTML 元素
document.getElementsByTagName("div")
通过类名找到 HTML 元素
document.getElementsByClassName("a");
通过类名查找 HTML 元素在 IE 5,6,7,8 中无效
3、节点操作(3种)
节点的创建、添加、删除
1.创建节点
createElement()
var createDiv = document.createElement("div");
2.插入节点
1.appendChild（）
appendChild() 方法向节点添加最后一个子节点
3.插入子节点
2.insertBefore(插入的节点，参照节点)
insertBefore() 方法 ，如果不是在末尾插入节点，而是想放在特定的位置上，用这个方法.
该方法接受2个参数，第一个是要插入的节点，第二个是参照节点。如果 第二个参数 为null（不是不写），则默认插入到后面
可以给某个id 的前面
删除节点
removeChild（）
父节点.removeChild（子节点）；
不知道父级的情况下，可以这么写：node.parentNode.removeChild(node)
复制节点
cloneNode()
var newNode = oldNode.cloneNode() ;
用于复制节点， 接受一个布尔值参数， true 表示深复制（复制节点及其所有子节点）， false 表示浅复制（复制节点本身，不复制子节点）
社直接点属性
获取：getAttribute(名称)
设置：setAttribute(名称, 值)
删除：removeAttribute(名称)
4、属性操作（2种）
getAttribute()/setAttribute()/removeAttribute()
节点中的父子兄弟访问关系
父节点
parentNode
兄弟节点
nextSibling
nextElementSibling
previousSibling
previousElementSibling
子节点
firstChild
firstElementChild
lastChild
lastElementChild
所有子节点
childNodes
children
childNodes和children区别
childNodes：它是标准属性，它返回指定元素的子元素集合，包括HTML节点，所有属性，文本节点
火狐 谷歌等高本版会把换行也看做是子节点
nodeType==1时才是元素节点
nodeType == 1 表示 的是 元素节点 记住 元素就是标签
nodeType == 2 表示是属性节点 了解
nodeType == 3 是文本节点 了解
children：非标准属性，它返回指定元素的子元素集合。
但它只返回HTML节点，甚至不返回文本节点，虽然不是标准的DOM属性，但它和innerHTML方法一样，得到了几乎所有浏览器的支持。
children在IE6/7/8中包含注释节点
获得所有的兄弟节点
function siblings(elm) {
var a = [];
var p = elm.parentNode.children;
for(var i =0,pl= p.length;iDOMCore—可以用在任何DOM文档中
getElementById() //根据id属性获取一个DOM对象，区分大小写，符合代码规范
getElementsByTagName() //根据标签返回多个DOM对象
HTML-DOM—仅仅能够用在HTML文档中
getElementsByName()
HTML5中新增
getElementsByClassName()
DOM对象的属性和HTML的标签属性几乎是一致的
src、title、className、href
练习：
切换图片
点击按钮隐藏显示div
关闭二维码
美女相册
DOM初体验案例
1.切换图片（a连接+图片）
2.显示和隐藏盒子
3.美女相册
innerHTML—会把内容解析到DOM树上
获取标签之间的内容
设置标签之间的内容
innerText (FF中textContent)—会对内容转义
获取标签之间的内容
设置标签之间的内容
表单元素的属性
type、value、checked、selected、disabled
练习：
点击按钮禁用文本框
搜索文本框
检测用户名是否是3-6位，密码是否是6-8位，如果不满足要求高亮显示文本框
设置下拉框中的选中项（水果）
给文本框赋值，获取文本框的值
全选反选
getAttribute()
setAttribute()
removeAttribute()
直接使用.属性的方式不可以设置自定义属性(IE除外)，getAttribute()什么时候都可以用，推荐使用
练习：
Tab切换
nodeType 节点的类型
1 元素节点
2 属性节点
3 文本节点
nodeName 节点的名称(标签名称)
nodeValue 节点值
元素节点的nodeValue始终是null
设置样式的两种方式
className
style
获取样式
DOM的style属性只能获取标签中使用style设置的样式，无法获取
嵌入或外部样式
style.cssText 获取style里面的字符串
设置样式
无论设置还是获取只能操作行内式
1.样式少的时候使用
2.style是对象（其他大部分是字符串）
3.值是字符串，没有设置值是“”；
4.命名规则，驼峰命名。和css不一样
5.设置了类样式不能获取。（只和行内式交互，和内嵌和外链无关）
6.box.style.cssText = “字符串形式的样式”；
backgroundColor
backgroundImage
color
width
height
border
opacity (IE8以前filter: alpha(opacity=xx))
注意DOM对象style的属性和标签中style内的值不一样，因为在JS中-不能作为标识符
backgroundColor DOM中
background-color CSS中
当前输入的文本框高亮显示
改变div的大小
表格隔行变色、高亮显示（做过）
百度皮肤
显示隐藏/关闭广告/显示二维码（隐藏方法）
提高层级
隐藏显示
display
元素隐藏后，不占位置，页面上的元素会重新排列
visibility
元素隐藏后，占位置
hidden
visible
opacity、position
位置
position
left
top
right
bottom
z-index
练习：祝愿墙
动态创建元素的三种方式
方式一：
document.write()
方式二：
innerHTML
方式三：
createElement()
appendChild()
removeChild()
insertBefore()
replaceChild()
案例
动态创建列表，高亮显示（四大美女）
选择水果
模拟百度搜索文本框
动态创建在线人员列表
动态创建祝愿墙
动态创建表格
方式1
createElement()
方式2
rows (只读，table和textarea能用)
insertRow() (只有table能调用)
deleteRow() (只有table能调用)
cells (只读，table和textarea能用)
insertCell() (只有tr能调用)
deleteCell() (只有tr能调用)
使用onclick注册多个事件处理程序
//注册多个事件处理程序
function addEvent(element,event,fn) {
var oldfn = element[event];
if (typeof oldfn != "function") {
element[event] = fn;
}else{
element[event] = function() {
oldfn();
fn();
}
}
}
注册事件的两种方式
onclick
DOM0
几乎所有的浏览器都支持
addEventListener
DOM2
现代浏览器支持，IE9+
可以给同一个事件注册多个事件处理程序
可以选择捕获或者冒泡
IE9以前使用attachEvent
移除事件的两种方式
element.onclick = null;
removeEventListener
IE9以前detachEvent
如果注册的时候使用的是匿名函数，则无法移除
给多个DOM对象注册事件的话是使用命名函数还是匿名函数？
比如 给多个文本框注册事件，获取文本框的值
innerHTML在清空内容的时候和事件相关的地方
addEventLisener和attachEvent
区别：
事件名称的区别
addEventLisener中第一个参数type是click、load，不带on
attachEvent中一个参数type是onclick、onload
this的区别
addEventLisener：事件处理程序会在当前对象的作用域运行，因此，时间处理程序的this就是当前对象
attachEvent：事件处理程序是在全局作用域下运行因此this就是window
冒泡事件
btn.addEventListener("click",handle,false);
事件捕获
btn.addEventListener("click",handle,true);
事件对象的获取方式
标准DOM的事件对象
在事件处理程序中传入事件对象
IE中的事件对象
window.event
跨浏览器的解决方案
event = event ? event : window.event;
事件对象
获取当前对象(只读)
target 触发事件的元素
currentTarget 始终是当前执行事件处理程序的对象
IE中对应的属性 srcElement == target
事件类型(只读)
type click、mouseover。。。
事件处于哪个阶段(只读)
eventPhase
取消默认行为
preventDefault()
IE中对应的 returnValue = false
取消冒泡和捕获
stopPropagation() 取消冒泡和捕获
IE中对应的 cancelBubble=true 取消冒泡(IE中不支持捕获)
事件委托
利用事件冒泡，把多个DOM对象的事件，注册到父容器上
鼠标事件
mousedown、mouseup、mousemove、mouseover、mouseout、click、dblclick
事件对象的属性
clientX/clientY 所有浏览器都支持，窗口位置
pageX/pageY IE8以前不支持，页面位置
screenX/screenY 屏幕位置
shiftKey/ctrlKey/altKey 同时按下组合键
button
案例
跟着鼠标飞的天使
鼠标点哪图片飞到哪里
拖拽效果
弹出登录窗口
模拟滚动条
获取鼠标在div内的坐标
放大镜效果
祝愿墙拖动
键盘事件
keydown、keypress、keyup
事件对象的属性
keyCode 键盘码，只有数字和字母对应ASCII码
charCode 对应ASCII码，只有keypress才有效，IE9+
案例
按回车切换到下一个文本框
按esc隐藏登录框
检测密码强度
BOM
浏览器对象模型
window对象
window对象是JavaScript中的顶级对象
所有定义在全局作用域中的变量、函数都会变成window对象的属性和方法
window对象下的属性和方法调用的时候可以省略window
系统的对话框
alert() //不同浏览器中的外观是不一样的
confirm()//兼容不好
prompt() //不推荐使用
打开窗口
window.open(url,target,param)
url 要打开的地址
target新窗口的位置 _blank _self _parent(父框架)
param 新窗口的一些设置
返回值，新窗口的句柄
window.close() 关闭窗口
新窗口.moveTo(5,5) 新窗口.moveBy()
新窗口.resizeTo() window.resizeBy()
定时器
循环执行（等待时间过去之后执行）
var timerId = setInterval(code,interval);
clearInterval(timerId);
间隔时间执行，不是特别精确
定时执行（立刻执行）
var timerId = setTimeout(code,interval);
clearTimeout(timerId);
location对象
window.location
location相当于浏览器地址栏
可以将url解析成独立的片段
location对象的属性
href
hash 返回url中#后面的内容，包含#
host 主机名，包括端口
hostname 主机名
pathname url中的路径部分
protocol 协议 一般是http、https
search 查询字符串
location.assign() 改变浏览器地址栏的地址，并记录到历史中
设置location.href 就会调用assign()。一般使用location.href 进行页面之间的跳转
location.replace() 替换浏览器地址栏的地址，不会记录到历史中
location.reload() 重新加载
window.navigator 的一些属性可以获取客户端的一些信息
userAgent (系统，浏览器)
platform (浏览器支持的系统，win/mac/linux)
历史记录管理
后退
history.back()
history.go(-1) 0是刷新
前进
history.forward()
history.go(1)