Javascript的事件对象

事件流概念：

1、 事件流：事件的流向，事件的执行顺序。
    当子元素和父元素都定义了相同的事件，比如都定义了onclick事件，
    点击子元素时，父元素的onclick事件也会被触发。
    JS里称这种事件连续发生的机制为事件冒泡或者事件捕获。
    IE：事件从里向外发生，事件从最精确对象(target)开始触发，然后到最不精确的对象(document)触发，即事件冒泡
    网景：事件从外向里发生，事件从最不精确的对象(document)开始触发，然后到最精确对象(target)触发，即事件捕获
    W3C将两者进行中和，在任何W3C的事件模型中，事件先进入捕获阶段，再进入冒泡阶段。

事件模型：

JavaScript中的两种事件模型：DOM0，DOM2。
 
1、DOM0级事件模型
    DOM0级事件模型是早期的事件模型，所有的浏览器都支持。
    注册事件：在事件类型前面加on，如：onclick、onmouseover ......
    解除事件：dom.onclick = null;
    每个DOM对象只能注册一个相同类型的事件，注册多个则会发生覆盖，只执行最后一个事件函数。

2、DOM2级事件模型
    DOM2级事件模型是较新的事件模型，IE8及以下是不支持的。
    注册事件：
    addEventListener(type,fn,useCapture) 事件监听器
    参数：type----事件类型，例：click、mouseover...
              fn----事件处理函数
              useCapture----布尔值true或false
             ( true表示事件捕获，false表示事件冒泡 )
    为了兼容浏览器，第三个参数一般设置为false
    解除事件：removeEventListener(type, fnName, useCapture)
    每个DOM对象可以注册多个相同类型的事件，不会发生覆盖，会依次的执行各个事件函数。
    因为IE678只支持事件冒泡，不支持事件捕获，所以它也不支持addEventListener( )方法
    IE提供了另一个函数attachEvent( type , fn )
    参数：type----事件类型，例：onclick、onmouseover
          fn----事件处理函数
          没有第三个参数
    解除事件：detachEvent( type , fn )
    封装事件监听函数（兼容）
    
3、事件监听与事件移除的例子：
	注：移除事件监听时传入的参数要与添加事件监听时使用的参数相同。先把监听后执行的方法封装成一个函数，这样直接在 eventListener 里写函数名称即可保证参数相同。
    function say1(){
       console.log('这是第二个点击事件');
    }
    box2.addEventListener('click',say1);
    box2.removeEventListener('click',say1);
     
    

事件对象：

1、event概念及作用： 
事件通常与函数结合使用，函数不会在事件发生前被执行
    event事件对象只在事件发生的过程中才有效
    event对象中包含了所有与事件相关的信息(私有的、共有的属性和方法)
    在需要获取和事件相关的信息时使用，如：
    获取键盘按下的按键码
    获取鼠标的位置坐标
    获取事件名称
    获取事件生成的时间
    获取事件的类型
2、获取event对象
	所有浏览器都支持event对象，只是支持的方式不一样
FireFox、Chrome等浏览器要获取到event对象，需要从函数中传入，参数名随意
	而IE在浏览器中event作为window对象的一个属性存在，可以直接使用 event 或 window.event 获取到
    例如：
    document.onmousedown = function(e){
        var ev = e || event;   //兼容各个浏览器
        console.log(ev);
    }
	

常用的事件API：

1、鼠标/键盘相关属性:
	clientX/clientY属性:返回当事件被触发时，鼠标指针的坐标（到浏览器窗口的坐标）
	offsetX/offsetY:返回当事件被触发时，鼠标指针的坐标(在事件源元素中的坐标)
	pageX/pageY:返回当事件被触发时，鼠标指针的坐标（整个页面中的坐标）
	button属性：返回触发事件的鼠标按键
	which属性：返回触发事件中的按键码(针对键盘和鼠标事件)IE678不支持keyCode属性：返回键盘按键的按键码
2、在火狐中获得触发事件的元素
	使用:event.target
	在IE中获得触发事件的元素
	使用：event.srcElement
	//兼容写法
	var target = evnet.target || event.srcElement;
	event.relatedTarget  火狐获取触发事件的目标源，与target相仿
	event.fromElement IE获取触发事件的目标源，与srcElement相反
	在mouseover事件中，它指向鼠标来自哪个元素(mouserenter)相反
	var from = event.relatedTarget || event.fromElement相反
	在mouseout事件中，它指向鼠标去往哪个元素(mouseleave)
	var to = event.relatedTarget || event.toElement;
	阻止默认行为
	event.preventDefault() //火狐
	event.returnValue = false //IE
	event.returnDefault ? event.preventDefalult():(event.returnValue = false);
	阻止事件传播
	event.stopPropagation()   //火狐
	event.cancelBubble = true  //IE
	event.stopProgation ? event.stopPropagation():
	(event.cancelBubble = true);