事件流、事件对象

一、事件流

多个彼此嵌套元素，他们拥有相同的事件，最内部元素事件被触发后，外边多个元素的同类型事件也会被触发，多个元素他们同类型事件同时执行的效果称为“事件流”。

事件流分类：true 捕捉型、false 冒泡型

二、事件对象

事件对象，每个事件(包括鼠标、键盘事件)触发执行的过程中，都有对应的事件对象，通过事件对象可以获得鼠标相对页面的坐标信息、通过事件对象也可以感知什么键子被 触发执行、通过事件对象还可以阻止事件流产生、阻止浏览器默认动作。

1、获得事件对象

①主流浏览器(IE9以上版本浏览器)：

    node.onclick = function(evt){evt就是事件对象}

    addEventListener(类型,function(evt){}/函数名字);

        function 函数名称(evt){}

    事件处理函数的第一个形参就是事件对象

② IE(6/7/8)浏览器

    node.onclick = function(){window.event事件对象}

    全局变量event就是事件对象

兼容：var evnt = evt ? evt : window.event；

2、获得鼠标的坐标信息

　　event.clientX/clientY;    //相对dom区域坐标

　　event.pageX/pageY;        //相对dom区域坐标，给考虑滚动条位置

　　event.screenX/screenY;    //相对屏幕坐标

3、阻止事件流

　　event.stopPropagation();  //主流浏览器

　　event.cancelBubble = true; // IE浏览器

　　冒泡型、捕捉型都可以进行阻止,为了浏览器兼容处理，只考虑冒泡型。

4、阻止浏览器默认动作

    浏览器默认动作，注册form表单页面，提交表单的时候，浏览器的页面会根据action属性值进行跳转，这个动作称为“浏览器默认动作”。

    event.preventDefault();    //主流浏览器   

    event.returnValue = false;     //IE浏览器

    return  false;              //dom1级事件设置起作用

5、感知被触发键盘键子信息

　　event.keyCode  获得键盘对应的键值码信息

　　通过事件触发时候获得的keyCode数值码信息可以对应键盘的键子信息。