JavaScript事件机制

事件机制

一、事件绑定方式

<button onclick="alert('hello')" onmouseout="alert('worry')">login</button>

 btn.onclick = function (){}//使用dom0级事件，多次绑定后面的方法覆盖前面的方法

dom2级的事件绑定方式

btn.addEventListener('click',function(){
    console.log('111')
})//dom2级的事件绑定方式，可以多次绑定相同事件，不会被覆盖
btn.addEventListener('click',function(){
    console.log('222')
})
btn.addEventListener('click',f1,false)//默认为false，为true是是捕获阶段触发
btn.removeEventListener('click',f1，false)//移除事件
bth.attachEvent() //2个参数（事件，function(){}）如果是IE8会识别这个时间绑定方法dom2
bth.detachEvent()//IE8中移除事件的方法dom2

二、事件的三要素（面试）

2.1事件源：

发生事件的源头

2.2事件类型

1.load：元素加载完毕后触发，适用于window或者文件加载

2.unload：当页面完全卸载后在window触发，当所有框架都卸载后在框架集上触发

3.select：当用户选择文本框（ , 和）中的一个或者多个字符时

4.change：当控件的值发生更改的时候触发，控件失去焦点时触发

5.input：当控件的值发生更改是触发

6.resize：当浏览器被调整到一个新的高度或宽度时，会触发

7.scroll：当用户滚动带滚动条的元素中的内容时，在该元素上触发resize，scroll会在变化期间重复被激发，尽量保持代码简单

8.blur：元素失去焦点时触发

9.focus：元素获得焦点的时候触发，不支持冒泡//IE支持

10.focusin：与focus等价，支持冒泡

11.focusout：与blur等价支持冒泡

12.click：点击主鼠标按钮或者按下回车按键的时候触发。只有在一个元素上相继发生mousedown，mouseup事件，才会触发click事件

13.dbclick：双击主鼠标按钮时触发

14.mousedown：任意鼠标按钮按下时触发

15.mouseup：释放鼠标按钮触发

16.mousemove：鼠标在元素内部移动的时候触发

17.mousewheel：滚轮事件

18.mouseleave：在位于元素上方的鼠标光标移动到元素范围之外时触发，不冒泡（不支持子元素）

19.mouseenter：鼠标光标从元素外部首次移动到元素范围内激发，不冒泡（不支持子元素）

20.mouseover：鼠标位于元素外部，将其移入另一个元素边界之内时触发（支持子元素）

21.mouseout：在位于元素上方的鼠标光标移入到另外一个元素中（支持子元素）在被选元素上与.mouseleave效果相同

22.keydown：按下键盘任意键时触发，如果按住不放重复触发此事件

23.keypress：按下键盘字符键时触发，如果按住不放会重复触发次事件

24.keyup：释放键盘上键时触发

当键盘事件发生时，event对象的keyCode属性中会包含一个代码与键盘上的特定键对应，对数字字母键，keyCode属性的值与ASCII码中对应的小写字母和数字编码相同

2.3事件驱动程序：

发生事件类型时，触发什么功能

三、事件流

描述事件发生的流程

3.1三个阶段

3.1.1事件捕获

document->html->body

3.1.2处理目标

事件处理

3.1.3事件冒泡：

body->html->document

IE 事件流被称为事件冒泡，这是因为事件被定义为从最具体的元素（文档树中最深的节点）开始触发，然后向上传播至没有那么具体的元素，有询问机制

阻止冒泡：

a3.onclick=function(e){
    e.stopPropagation()
    console.log('a3')
}

四、事件对象event

e.preventDefault()：取消事件的默认行为

e.stopPropagation()：阻止冒泡

a3.onclick=function(e){
    e.stopPropagation()
    console.log('a3')
}

e.bubbles：是否冒泡

a1.onclick=function(e){
    console.log(e.bubbles)//true
}

e.cancelable：是否取消事件的默认行为

a1.onclick=function(e){
    console.log(e.cancelable)//true
}

e.currentTarget：绑定事件的那个元素

a1.onclick=function(e){
    console.log(e.currentTarget)//<div id="a1">
}

e.eventPhase：事件的阶段

a1.onclick=function(e){
    console.log(e.eventPhase)//
}

e.target：实际触发事件的元素

a3.onclick=function(e){
    console.log(e.target)//a3
}

e.type：事件的类型

a3.onclick=function(e){
    console.log(e.type)//click
}