事件流：IE是事件冒泡流，往上，Netscape事件捕获流，往下
DOM0:所有浏览器都支持
DOM2：ie9，Firefox，Opera,Safari,Chrome支持
DOM1与DOM2区别：解耦合
DOM2事件：事件捕获阶段，处于目标阶段，事件冒泡阶段
事件：click，load
事件处理程序：onclick，onload
表单元素作用域 this-this.form-document,this可取得该Input任何特性,可通过name访问其他表单元素,可通过事件event对象访问事件类型等
<form method='post'>
<input type='text' name='username' value='' onclick="alert(event.type)">
<input type='button' value='Echo' onclick="alert(username.value)">
</form>
DOM0事件处理程序：在元素作用域内，this可取得任何特性,通过事件event对象访问事件类型等，不能通过name访问其他表单元素，冒泡时处理
var btn = document.getElementById('myBtn')
btn.onclick = function(){
alert(this.id);
}
删除：btn.onclick = null;
DOM2级事件处理程序：addEventListener() ，removeEventListener()，可通过true:捕获，false：冒泡处理事件，也是在元素作用域内
var btn = document.getElementById('myBtn');
var handler = function(){
alert(this.id)
}
btn.addEventListener('click',handler,false);//添加事件监听
btn.removeEventListener('click',handler,false)//移除事件监听，一定要把handler单独写，不然写匿名函数，无法移除
冒泡：键盘，鼠标事件 捕获：表单事件
IE事件处理程序：IE8及以下，attachEvent(),detachEvent(),接受事件处理程序名称，比如onclick，处理程序函数，其中事件处理程序函数作用域是全局，冒泡时处理
var btn = document.getElementById('myBtn');
var handler = function(e){
alert(this === window)//true
}
btn.attachEvent('onclick',handler);
btn.detachEvent('onclick',handler);
DOM事件对象：event
btn.onclick = function(event){}//事件处理程序传入
属性与方法：
- currentTarget: 当前处理事件的元素 ==this
- target: 事件的目标<=currentTarget,可能是内部某个具体元素
- preventDefault(): 取消事件默认行为
- stopPropagation(): 取消事件冒泡
- type: 触发事件的类型,click
- eventPhase: 调用事件处理程序阶段：1：捕获，2：处于目标，3：冒泡
IE事件对象：event：浏览器IE9以下
btn.onclick = function(){
var event = window.event;
}//window对象一个属性
btn.attachEvent ('onclick',function(event){
alert(event.type)//click
}//event也可以与window来取
属性与方法
- type：触发事件类型
- srcElement: ==target
- returnValue:true/false,设为false可取消事件默认行为
- cancelBubble:true/false ,设为true可取消事件冒泡
事件类型:HTML事件
1 UI事件：用户与页面的元素交互触发事件
- load事件：页面完全加载后在window上触发，所有框架加载完再框架集上触发，图像加载完再<img>上触发，嵌入内容加载完在<object>上触发
- unload,卸载触发，与load相同
- abort ,停止下载时，嵌入内容没有加载完，在<object>上触发
- error,发生错误时触发，场景与load相同
- select，选择文本框<input>/<textarea>字符触发，
- resize，框口或框架大小变化时在window或框架上重复触发
- scroll，用户滚动带滚动条内容时，在该元素上重复触发，
2 焦点事件：页面元素获得或失去焦点时触发
- blur：元素失去焦点触发，不冒泡
- focus ：元素获得焦点触发，不冒泡
- focusin：元素获得焦点触发，冒泡
- focusout：元素失去焦点触发，冒泡
3 鼠标与滚轮事件
- click,左键单击或按下回车，一次mousedown，mouseup
- dbclick,双击左键，DOM3,两次click
- mousedown，按下鼠标
- mouseup，释放鼠标
- mouseenter,鼠标从元素外部移入元素范围内（移到子元素不触发），不冒泡，DOM3
- mouseleave,鼠标从元素内移入元素范围外（移到子元素不触发），不冒泡，DOM3
- mousemove,鼠标在元素内部移动时重复触发
- mouseout: 鼠标从元素内移入元素范围外（移到子元素触发），
- mouseover：鼠标从元素外部首次移到元素内触发，
4 坐标，修改建 -鼠标与触摸属性
- 1浏览器视口中客户区坐标 ：clientX,clientY
- 2 页面坐标：pageX,pageY 页面没有滚动，与clientX,clientY相等
页面有滚动，，e.pageX=e.clientX+document.body.scrollLeft || document.documentElement.scrollLeft
e.pageY=e.clientY+document.body.scrollTop || document.documentElement.scrollTop
- 3 屏幕坐标：screenX,screenY,鼠标指针相对于屏幕的位置
- 1 shiftKey :true/false，是否按下shift键
- 2 ctrlKey
- 3 altKey
- 4 metaKey：是否按下meta键
5 键盘与文本事件，DOM3，IE9及以上
- keydown :按下键盘任意键，按住不放，重复触发
- keypress 按下键盘字符键
- keyup 释放键盘键
keydown，keyup事件，event对象的keyCode属性是对应键的ASCII码，
e.keyode == 13,回车，
6 触摸与手势事件 ，触摸设备
- touchstart:手指触摸屏幕时发生
- touchmove:手指在屏幕上滑动连续触发
- touchend,手指从屏幕上移开触发
- touchcancel,系统停止跟踪触摸
事件对象Touch,有三个跟踪属性
- touches，当前跟踪触摸操作的Touch对象数组
- targetTouches,特定与事件目标的Touch对象的数组
- changeTouches,上次触摸以来发生了什么改变的Touch对象的数组
其数组属性
- clientX:触摸目标在视口中x坐标
- clientY
- identifier:标识触摸的唯一ID
- pageX:触摸目标在页面中的x坐标
- pageY
- screenX：触摸目标在屏幕中的X坐标
- screenY
- target 触摸的DOM节点目标
- 1 shiftKey :true/false
- 2 ctrlKey
- 3 altKey
- 4 metaKey
用法：e.touches[0].clientX
7模拟事件
模拟鼠标事件：
var btn = document.getElementById('myBtn');
var event = document.createEvent('MouseEvents');//创建鼠标事件
event.initMouseEvent()//传入事件参数，
btn.dispatchEvent(event);//触发事件，绑定event
Comments | NOTHING