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

事件流的起源：就是在浏览器发展到第四代的时候，浏览器开发团队遇到一个问题：页面的哪一部分会拥有某个特定的事件？要明白这个问题问的是什么，可以想象画在一张纸上的一组同心圆。如果你把手指放在圆心上，那么你的手指指向的不是一个圆，而是纸上的所有圆。也就是说如果单击了页面的某个按钮，同时也单击了按钮的容器元素，甚至单击了整个页面。不过呢，IE提出的是冒泡流，而网景提出的是捕获流。

事件冒泡：子元素事件向上传播到父元素身上。而事件冒泡则是相反。使用事件冒泡有很多好处，1.子元素太多。2.后插入元素。这两种情况下都可以通过事件代理来解决。那么什么是事件代理呢，利用事件冒泡，把子元素的事件绑定到父元素身上。

在给事件添加事件监听的时候，标准浏览器有 3个参数

addEventListener(事件类型click，事件处理function( e） {

e.stopPropagation(); //阻止事件传播，点击子元素就不会冒泡到父元素上了

}, // 事件冒泡false／ 事件捕获true );

IE：2个参数，不支持第3个参数，只能是事件冒泡     attachEvent(事件类型onclick ， 事件处理函数function(){

window.event.cancelBubble = true;  //  阻止事件传播，点击子元素就不会冒泡到父元素上了

} ) ;

移除事件监听：

标准浏览器：removeEventListener(事件类型 ,  事件处理函数 ,  false );

 IE：detachEvent(事件类型，事件处理函数);

函数封装:

function addEvent(obj,ev,fn) //obj为要绑定事件的元素，ev为要绑定的事件，fn为绑定事件的函数

{      if(obj.addEventListener){

           obj.addEventListener(ev,fn,false);

            }else if(obj.attachEvent){

             obj[ev+fn] = function(){

               fn.call(obj);

               }

obj.attachEvent("on" + ev,obj[ev+fn]);

         }else {

         obj['on'+type]=fn;

}

function removeEvent(obj,ev,fn)

{

if(obj.removeEventListener){

obj.removeEventListener(ev,fn);

}else if(obj.detachEvent){

obj.detachEvent("on" + ev, obj[ev+fn]);

}

}else {

obj['on'+type]=null;

}

}