20170611-事件

JavaScript与HTML之间的交互是通过事件实现的，事件，就是文档或者浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器(或者处理程序)来预定事件，以便事件发生时执行相应的代码。

事件流

事件流描述的是从页面中接受事件的顺序

事件冒泡

IE的事件流叫做事件冒泡，即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接受，然后逐级向上传播到较为不具体的节点

事件捕获

Netscape的事件流叫做事件捕获。事件捕获的思想是不太具体的节点应该更早接受到事件，而最具体的节点应该最后接受到事件，其用意在于在事件到达预定目标之前就捕获它。

DOM事件流

DOM2级事件规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段，事件冒泡阶段。

事件处理程序

HTML事件处理程序

<script type='text/javascript'>
    function showMessage(){
        alert('Hello World')
    }
</script>
<input type="button" value="click me" onclick="showMessage()" />

DOM0 级事件处理程序

var btn = document.getElementById('myBtn')
btn.onclick = function(){
    alert('Clicked')
}

DOM2 级事件处理程序

var btn = document.getElementById('myBtn')
btn.addEventListener('click', function(){
    alert('Clicked')
}, false)

跨浏览器的事件处理程序

var EventUtil = {
    addHandler: function(element, type, handler){
        if(element.addEventListener){
            element.addEventListener(type, handler, false)
        }else if(element.attachEvent) {
            element.attachEvent("on"+type, handler)
        }else {
            element["on"+type] = handler
        }
    },
    removeHandler: function(element, type, handler){
        if(element.removeEventListener){
            element.removeEventListener(type, handler, false)
        }else if(element.detachEvent){
            element.detachEvent("on"+type, handler)
        }else {
            element["on"+type] = null
        }
    }
}

事件对象

事件对象常用的一些属性和方法

• event.preventDefault():取消事件的默认方法，例如取消a元素的点击事件

• event.stopPropagation(): 取消事件的进一步捕获或冒泡

• event.target : 事件的目标(触发事件的真实目标)

事件类型

UI事件

• load事件：当页面完全加载后再window上面触发，当所有框架都加载完毕后再框架集上触发，当图像加载完毕时再<img>元素上触发

• unload事件：当页面完全卸载后再window上触发

• select事件：当用户选择文本框(input和textarea)中的一或多个字符时触发

• resize事件：当窗口或者框架的大小变化时在window上面触发

• scroll事件：当用户滚动带滚动条的元素中的内容时，在该元素上触发。

焦点事件

• blur：在元素失去焦点时触发

• focus:在元素获得焦点时触发

鼠标事件

• click

• dbclick

• mousedown

• mouseup

键盘与文本事件

• keydown

• keypress

• keyup

...

contextmenu事件

在浏览器页面中，点击鼠标右键可以调出上下文菜单。contextmenu事件用以表示何时应该显示上下文菜单，以便开发人员取消默认的上下文菜单而提供自定义的菜单。

为某一元素设置contextmenu事件处理程序，在事件处理程序中调用event.preventDefault()方法，就可以在该元素上阻止上下文菜单的出现。

• 使整个页面都阻止上下文菜单的出现

document.body.addEventListener('contextmenu', function(event){
    event.preventDefault()
})

事件委托 事件代理

假设现在要处理多个具有并列关系元素的click事件，当点击这些元素中的任何一个元素，则事件一定会通过冒泡的方式，冒泡到他的上层的父节点元素然后一直冒到window，所以这个时候就可以在他的上层元素中添加事件处理程序，来统一处理这些事件，在处理的过程中可以通过获取target来知道是点击的哪个具体的元素。这种方式就称之为事件委托。

• 在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与dom节点进行交互，会延长整个页面的交互就绪时间，而使用事件委托则可以大大减少对dom节点的访问

• 为每个子节点都添加事件处理程序，会造成内存空间的浪费

• 新添加的子元素不需要添加被委托事件的处理程序