事件流分为事件冒泡流和事件捕获流。其中事件捕获流是由natScape浏览器独自开发的一种事件流结构，后来也被火狐、chrome、IE9及以上等主流浏览器支持。而支持事件冒泡流结构的浏览器则涵盖了当下基本所有的浏览器，包括IE8及以前版本。

给某个Dom对象(比如某个按钮等)添加事件处理程序的方法主要分为三种：HTML事件处理程序、Dom0级事件处理程序和Dom2级处理程序。各个版本的浏览器对这三种写法的支持程度是不同的。其中Dom0级事件处理程序被支持度最为广泛，涵盖了IE系列浏览器。

这三种方法的主要写法和示例如下(以点击事件为例)：

1. HTML事件处理程序

   首先body中的Dom对象中直接添加onclick方法

   <input type="button" id="btn1" onclick="showMessage()">

   然后再js文件或者js代码段内添加事件处理程序定义

   function showMessage(){

       alert("hello world");
   

   }

2. Dom0级事件处理程序

   假设要给btn2按钮添加点击事件处理程序

   <input type="button" id="btn2">

   在js代码区添加事件处理程序和绑定关系

   var btn2 = document.getElementById("btn2");

   btn2.onclick = function showMessage(){

       alert("hello world");

   }

   如果要移除该点击事件处理程序

   btn2.onclick = null;

3. Dom2级事件处理程序

   body中的按钮对象为btn3

   <input type="button" id="btn3">

   js区添加事件处理程序和绑定关系

   function showMessage(){

       alert("hello world");

   }

   (1)在IE8及以下中的写法, IE9、IE10也支持，IE11不再支持
   

   var btn3 = document.getElementById("btn3");

   btn3.attachEvent("onclick", showMessage)；

   btn3.detachEvent("onclick", showMessage);

   (2)在Chrome浏览器中的写法，IE9及以上版本也支持

        btn3.addEventListener("click", showMessage, false);

        btn3.removeEventListener("click", showMessage, false);

        注意这里的第一个参数和IE8浏览器第一参数的区别，方式1中为“onclick”, 方式2中为“click”。方式2中需要将我们平常习惯的事件处理方法名前面的 'on'去掉。

        方式2中的第三个参数，true标示事件捕获流，false标示事件冒泡流。