事件流、事件对象

1、事件流

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

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

2、事件对象

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

一、得到事件对象

 

①主流浏览器(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；

 

二、得到鼠标的坐标信息

 

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

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

 

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

 

三、阻止事件流

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

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

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

 

四、阻止浏览器默认动做

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

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

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

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

 

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

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

　　经过事件触发时候得到的keyCode数值码信息能够对应键盘的键子信息。