事件

事件流

描述的是从页面中接收事件的顺序。

• IE——事件冒泡流
• Netscape——事件捕获流

事件冒泡流：即事件最开始由具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播至最不具体的那个节点（文档）。
事件捕获：不太具体的节点应该更早接受到事件，而最具体的节点最后接收到事件。

---

使用事件处理程序

1.HTML事件处理程序
缺点：HTML和JS代码紧密的耦合在一起，需要同时修改

<input type="button" value="按钮" id="btn1" onclick='alert("hello")'/>
或封装在一个函数内：
<input type="button" value="按钮2" id="btn2" onclick='showMes()'/>
<script>
    function showMes(){
        alert("hello world");
    }
</script>

2.DOM0级事件处理程序
实际上DOM0级是不存在的，DOM0级指的是IE4和网景4.0最初支持的DHTML
较传统的方式：把一个函数赋值给一个事件的处理程序属性

<input type="button" value="按钮3" Id="btn3" />
btn3.onclick=function(){
    alert("这是DOM0级事件处理程序");
}
//删除事件：
btn3.onclick=null;

3.DOM2级事件处理程序
DOM2级事件定义了两个方法：用于处理指定和删除事件处理程序的操作addEventListener()和removeEventListener()
接收三个参数：要处理的事件名、作为事件处理程序的函数和布尔值（true表示事件捕获，false表示事件冒泡，一般为false，为了兼容各种浏览器）

<input type="button" value="按钮4" Id="btn4" />

var btn4=document.getElementById("btn4");
btn4.addEventListener('click',showMes2,false);
//删除事件
btn4.removeEventListener('click',showMes2,false);

---

跨浏览器解决

初步接触js封装思想
有关IE兼容内容暂时没看

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;
                    }
                }

            }

            eventUtil.addHandler(btn3,'click',showMes);

---

事件对象event

在触发DOM上的事件时都会产生一个对象

1.DOM中的事件对象
（1）type属性，用于获取事件类型
（2）target属性，用于获取事件目标
（3）stopPropagation()方法 ，用于阻止事件冒泡
（4）preventDefault()方法，阻止事件的默认行为

function showMes(event){
    alert("event是DOM事件上的对象！");
    alert(event.target.nodeName);//event.type
    event.stopPropagation();
            }

事件冒泡与事件捕获要是同时进行怎么办

我们的浏览器更“喜爱”事件捕获：它会先把useCapture为false的元素绑定事件放到一边，按照事件捕获正常的顺序执行useCapture为true的元素绑定事件，最后在按照事件冒泡顺序执行useCapture为false。