事件
2.什么是事件？
onchange内容发生改变的时候触发
1）鼠标事件MouseEvent
1. onclick 鼠标点击事件，多用在某个对象控制的范围内的鼠标点击
2. ondblclick 鼠标双击事件
3. onmousedown 鼠标按下事件
4. onmouseup 鼠标抬起事件
5. onmouseover 鼠标移入事件
6.onmouseout 鼠标移出事件
7. onmousemove 鼠标移动时事件
8. onmouseenter鼠标移动到元素上时触发(通常与 onmouseleave 事件一同使用)
9. onmouseleave 鼠标移除元素时触发(事件不支持冒泡)
10.oncontextmenu 鼠标右键
11:onmousewheel 鼠标滚轮事件
- wheelDelta 可以查看滚轮的滑动的距离
2)系统事件
1.onload 事件会在页面或图像加载完成后，在执行 dom 0级事件，私有属性
调用多次，只执行最后一次
- document.ready()是DOM结构加载完成后，在执行（不代表所有文件都加载完）
调用多次，执行多次
document.ready()的缩写：
$(function(){
})()
2.onscroll 浏览器的滚动条位置发生变化时触发的事件
3.onerror 加载过程中发生错误时被触发
4.onresize 当浏览器的窗口大小被改变时触发的事件
3)键盘事件keyboardEvent
1. onKeyDown 按下键盘按键
2. onKeyUp 放开键盘按键
3. onKeyPress 当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象]
4)表单事件
1.onfocus 当某个元素获得焦点时触发的事件
2.onblur 当前元素失去焦点时触发的事件 [鼠标与键盘的触发均可]
3.onChange 当前元素失去焦点并且元素的内容发生改变而触发的事件[鼠标与键盘的触发均可
4.onReset 当表单中RESET的属性被激发时触发的事件
5.onSubmit 一个表单被递交时触发的事件
DOM0级事件和DOM2级事件的区别
DOM0级事件和DOM2级事件的区别：
1）DOM0级事件是元素身上的私有属性 2）DOM0级事件，当给同一个元素，同一个行为上绑定多个不同的方法的时候，后面的方法会“覆盖”前面的方法； 事件传播机制只有冒泡阶段
2）DOM2级事件是元素身上的公有属性，存放在元素所属的eventTarget这个类的原型上；2）DOM2级事件，可以给同一个元素的同一个行为上绑定多个不同的方法；执行顺序按照绑定顺序执行；addEventListener 的第三个参数指定true 捕获阶段，false冒泡阶段
事件对象
事件对象：就是描述了当前所触发行为的详细信息； 是一个对象数据类型，里面保存着事件的相关信息
1）标准浏览器下，通过形参e来得到事件对象
2）IE6-8下的事件对象，跟形参没有任何关系；通过window.event来获取
兼容处理：e=e||window.event;
- e.type事件类型 是点击事件还是移动事件？
4.关于事件对象的详细信息：
1）clientX/clientY:当前鼠标落脚点距离可视区(能看见)左上角的坐标位置；--兼容
2) pageX/pageY:当前鼠标落脚点距离第一屏左上角的坐标位置；--不兼容； 针对于整个文档
var pagey = e.clientY + (document.documentElement.scrollTop || document.body.scrollTop);
var pagex = e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft);
var pageY = e.pageY || pagey;
var pageX = e.pageX || pagex;
(3)event.offsetX、event.offsetY 鼠标位置距离事件源（自身的元素）的xy轴
鼠标相对于事件源元素（srcElement）的X,Y坐标，只有IE事件有这2个属性，标准事件没有对应的属性。
(4)event.screenX、event.screenY 针对于显示器的整个屏幕
鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性
事件源
- 事件源：（查看事件的源头是哪个标签）var target=e.target||e.srcElement;当前发生事件的这个元素--不兼容
兼容处理：e.target||e.srcElement;
tagName:标签名
nodeName:标签名
- 阻止事件冒泡： return false 也可以阻止默认行为- 阻止默认事件:e.preventDefault?e.preventDefault():e.returnValue=false;- 取消冒泡：e.stopPropagation?e.stopPropagation():e.cancelBubble=true- setCapture 聚焦 releaseCapture 释放焦点- e.relatedTarget|| e.fromElement;阻止冒泡 阻止让的子元素往上冒泡- if(this.contains(oTo)) return 如果遇到oTo的时候组织冒泡
事件委托
- 事件委托：一个容器内document多个元素div相关行为click绑定的时候，可以采用事件委托方式进行绑定，执行和性能上提升很多； 利用时间会进行冒泡传播的机制，我们给最外层元素的相关行为时间触发；- 事件流 也就是：利用冒泡的原理，把事件加到父级上，触发执行效果。- 事件冒泡:当前元素相关行为click触发的时候，会导致当前元素的所有上级元素都有相关行为
事件传播
1；事件传播包括两个阶段：
1）捕获阶段（从外向里）:从外面开始，最先执行的
2）冒泡阶段（从里向外）：当前目标元素，相关行为触发，他的所有上级元素的相关行为也会触发，一直到document（一些浏览器 一直到windouw）
- 先捕获，在冒泡
2：事件传播包含三阶段；
1）捕获阶段 从外向内 先绑定哪一个，就先执行哪一个
2）目标阶段 执行到目标元素时，停止捕获，执行完目标阶段后，在冒泡
3）冒泡阶段 从内向外，当前目标元素相关行为触发，他的所有上级元素的相关行为都会触发
ctrl+r替换
ctrl+f查找
- 事件池可以有多个函数
关于事件库封装
1）addEventListener 标准浏览器下 DOM2级事件绑定 点击
1；可以按照绑定的先后顺序，顺序调用
2；this指向当前绑定這个元素
3：不会出现重复绑定情况
dom2级事件
* 第一个参数是事件类型
* 第二个参数是处理函数
* 第三个参数是布尔类型 true捕获阶段 false冒泡阶段
* bTn.addEventListener('click',
function()
{
}
,false)
- 移除的时候，要保证三者一致，事件行为，处理函数阶段
- 捕获阶段绑定的，一定要写true冒泡阶段绑定的要移除false'
removeEventListenner('click',fn,false)
2)attachEvent() IE 浏览器下 添加事件
bTn.attachEvent('onclick',function()
{
}
)
1;
顺序问题
2：this指向window 而当不是当前這个元素
3：有重复绑定问题
4:detachEvent 解除绑定事件