JavaScript事件详解事件，是文档或者浏览器窗口中发生的一些特定的交互瞬间，事件流描述的是页面中接受事件的顺序。

一事件流

事件，是文档或者浏览器窗口中发生的一些特定的交互瞬间，事件流描述的是页面中接受事件的顺序。

目前事件流通常指的是DOM2事件流，它规定了触发一个事件需要经历三个阶段：

事件捕获阶段 -----> 处于目标阶段 -----> 事件冒泡阶段

事件冒泡

事件冒泡最初是由IE团队提出来的，即事件开始时由目标元素接受，然后逐级向上传播直至顶部，在此期间父级同类事件将被触发。

<script type="text/javascript">
        var div=document.getElementById("myDiv");
        div.onclick=function(event){
            alert("div");
        };
        document.body.onclick=function(event){
            alert("body");
        };    
</script>

//  div  --->   body

兼容：IE，chrome，Firefox，Opera，Safari都支持事件冒泡，并将事件冒泡到window对象。

事件捕获

事件捕获与事件冒泡相反，即事件开始时从根元素触发，然后逐级向下传播直至目标元素，在此期间同类事件将被触发。

<script type="text/javascript">
        var div=document.getElementById("myDiv");    
        div.addEventListener("click",function(event){
            alert("div");
        },true);
        document.body.addEventListener("click",function(event){
            alert("body");
        },true);
        
</script>
//  body  --->   div

兼容：IE，chrome，Firefox，Opera，Safari都支持事件冒泡，并将事件冒泡到window对象,IE8及以下只支持事件冒泡。

二事件处理程序（添加事件方式）

HTML事件处理

通过将事件作为html属性来处理。

//1
<input type="button" value="confirm" onclick="alert('confirm')" />//2
<script type="text/javascript">
        function showMessage() {
            alert("confirm");
        }
</script>
<input type="button" value="confirm" onclick="showMessage()"/>

DOM0级事件(直接添加)

通过Javascript指定事件处理程序的传统方式，所有浏览器均支持。每个元素（包括window，document）都有自己的事件处理程序属性，但是必须在DOM节点加载完之后才会有效。

<script type="text/javascript">
        var div = document.getElementById("myDiv");
        div.onclick = function(event) {
            alert("div");
        };
</script>

DOM2级事件（事件监听）

IE9，chrome，Firefox，Opera，Safari均实现了DOM2级事件处理程序，监听目标元素的事件。

addEventListener(element,fn,boolean)：接收三个参数：事件名称，事件处理函数和一个布尔值。布尔值为true，则表示在捕获阶段调用事件处理程序；如果为false，则表示在冒泡阶段调用事件处理程序,默认为false。

removeEventListener(element,fn,boolean) : 移出事件

IE事件： attachEvent(element,fn) , deleteEvent(element,fn)

封装通用事件监听函数

<input type="button" value="click me" id="btn5"> 
//绑定监听事件
function addEventHandler(target,type,fn){ 
    if(target.addEventListener){ 
        target.addEventListener(type,fn); 
    }else{ 
        target.attachEvent("on"+type,fn); 
    }
} 
//移除监听事件
function removeEventHandler(target,type,fn){
    if(target.removeEventListener){
        target.removeEventListener(type,fn); 
    }else{ 
        target.detachEvent("on"+type,fn); 
    }
}

事件委托

事件委托就是利用冒泡的原理，把事件加到父元素或祖先元素上，触发执行效果。

<input type="button" value="click me" id="btn">

var btn = document.getElementById("btn");
document.onclick = function(event){ 
    event = event || window.event; var target = event.target || event.srcElement; 
    if(target.tagName === 'INPUT'){
         alert(b"我是input"); 
    }
}

优点：

1.提高了JavaScript的性能，时间委托显著地提高了时间的处理速度，减少了内存占用率。

2.动态的添加DOM元素时，不需要因为元素的修改而修改绑定事件，只需给上级元素添加/监听事件即可。

三阻止事件冒泡和浏览器默认行为

1.event.stopProgation(): 阻止了事件冒泡，但不会阻击浏览器默认行为

2.event.preventDefault(): 阻止了浏览器默认行为，但不会阻止事件冒泡

3.return false: 即阻止了事件冒泡，也阻止了事件冒泡

JavaScript事件详解

一 事件流