[Javascript]：DOM绑定事件、事件流机制、事件委托、事件对象

本章节涉及到的知识点都是以DOM标准为主，所以可能会和IE浏览器不兼容，请见谅。

事件

        事件是指发生的事情。在网页中，事件通常是指用户或浏览器自身执行的某种动作，也可以表示为文档和浏览器窗口发生的交互行为。

事件处理程序

        也叫事件句柄、事件处理函数。它用于表示事件发生时要执行的操作。响应事件的处理函数就是事件处理程序。例如触发一个按钮的onclick事件，浏览器便会执行相应的事件处理程序，执行什么完全取决于你的Javascript代码。

简单的事件实例

 <script>
        function test(){
            alert("警告一下");
            if(confirm("想关闭网页吗")){
                window.close(); //关闭当前窗口
            }
        }        
 </script>
    <button οnclick="test()">点击我</button>

当单击按钮时，触发onclick事件，然后执行它的事件处理程序：test()。这种添加事件方式就像HTML元素中的样式属性一样，和HTML标签耦合度太高。怎么改变呢？这里就需要提到绑定事件的几种方式和DOM事件模型。

DOM事件模型和绑定事件

• DOM的事件模型分为DOM0、DOM2、和DOM3三个级别。因为DOM1没有定义和事件相关的内容，所以DOM1不存在。DOM3则是在DOM2的基础上，给事件做了一些分类，还提供了自定义事件，当然，我这里的只是提供大概知识，至于它们的具体细节还需要你自己去查阅相关资料。
• 绑定事件：事件和事件处理程序建立联系，触发事件，则执行相应事件处理函数。 也可以叫事件处理程序和事件监听，虽然它们的说法和写法不同，但本质都是让一个事件绑定一个事件处理函数，所以我更喜欢用绑定这个词汇。在后面会提及以上各种说法，别把它们搞成不同概念。

DOM0的两种绑定事件方式

一. HTML属性绑定事件

事件作为DOM元素节点的属性，属性值是事件处理程序。

 <button οnclick="alert('HTML属性绑定事件');">点击</button>

这里，字符串形式的事件处理程序的就是Javascript代码，只要符合规定，就会被执行。就像eval()函数一样。如有多个语句，就用分号隔开。

HTML属性绑定事件的缺点

        JS代码和HTML代码紧密相连，修改其中之一，另一个也要修改；存在页面加载问题，当页面数据过多，如有大量图片，而<script>脚本放在页面底部，页面还没加载完成时就触发事件，引发错误。所以，这种方式已经被基本淘汰了。能不用就不用。

二. Javascript绑定事件

把一个函数名赋值给一个事件属性。也就是把函数指针赋值给事件。
格式：elementNode.event = 函数名/匿名函数。

    <button id="btn">点击我</button>
    <script>
        var btn = document.getElementById("btn"); //获取元素节点
        function test1(){
            alert("单击按钮");
        }
        btn.onclick = test1; //函数名后别加括号，那相当于执行该函数然后返回函数值。
        //匿名函数形式 
        btn.onmouseout = function(){
            alert("鼠标离开按钮");
        }
    </script>

除了上面使用普通函数声明和匿名函数来绑定事件，还能用Function对象的构造函数来动态编译函数并执行，但绑定事件时不推荐使用。