每学习一些新的东西，要学会复习，总结和记录。
今天来简单总结一下学到的几个事件：焦点事件、Event事件对象、冒泡事件
其实这几个事件应该往深的说是挺难的，但今天主要是以一个小菜的角度去尝试理解一些基本的知识点。
1.焦点事件：
1.1概念理解：
想象场景：当一堆text文本框出现在面前，当点击其中一个文本框，它就会响应用户，并出现光标闪动（这时，点击令它获得焦点）。
所以说：焦点事件是用来让浏览器区分哪一个对象是用户要进行操作（输入值、选择、跳转）的。
总结===》 浏览器（区分）哪一个对象（是）用户（要） 操作（的）
回到场景来说，就是出现光标那个，它被点击后，与其他文本框不一样，提示用户此文本框是可以操作（输入）的！
1.2设置方式：
点击设置、Tab键切换、JS来设置
（注意：不是所有元素都能接受焦点的：DIV、P等就不能，只有能够响应用户的才可以设置焦点）
1.3.焦点事件（）
Obj.onfocus = function ( ){ };：当元素获取时触发事件
Obj.onblur = function( ){ } ：当元素失去焦点时触发
1.4.焦点方法
Obj.onfocus(); 给指定元素设置焦点
Obj.onblur (); 给指定元素失去焦点
Obj.select(); 选择指定元素里面的文本内容
2.Event 事件：
在理解冒泡事件和捕获事件前，先来理解一下什么叫做 Event 事件。
2.1概念：
Event：事件对象（事件发生的状态）
想象场景：当用鼠标点击一个按钮时，当前点击按钮的（激活状态、鼠标的位置）等信息，都是点击事件的事件对象
也就是说：事件对象是指 当一个事件发生时，当前对象 发生这个事件 的 有关信息
2.2兼容性：
event具有兼容性问题。
标准下：IE/chrome里event是一个内置全局对象 ，也就是已经进行定义了 var event
非标准下：FF中的事件对象，是通过事件函数的第一个事件参数传入的
兼容性处理：
function fn1(ev){
var ev=ev || event;
alert(ev);
} document.onclick = fn1; //通过点击调用事件
注意：事件对象必须在一个事件调用下才生成事件函数，也就是说，不能够fn1();这样直接调用，要通过 obj.onclikc = fn1;这种类型的调用方法。
3.冒泡事件：
3.1概念：
当一个元素接收到一个事件时，会将这个事件传给它的父级，直到最顶层window
<div id="div1">
<div id="div2">
<div id="div3"></div> //已经为div3设置了绝对定位到div1和div2外面
</div> <script>
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3');
function fn1(){
alert(this.id);
}
oDiv1.onclick = fn1; //点击div1会同时触发div2、3的onclck事件（冒泡）
oDiv2.onclick = fn1;
oDiv3.onclick = fn1;
</script>
3.2冒泡事件的阻止：
event.cancleBubble = true; //阻止当前对象的当前事件的冒泡
function fn1(){
alert(this.id);
event.cancleBubble = true;
}
3.3冒泡事件的简单应用：
冒泡效应会将对象当前发生的事件传递传递到父级，这乍一看让人感觉非常不好，但总的来说， 冒泡还是利大于弊的。接下来讨论一个有关利方面的例子。
应用例子：如下图，鼠标滑动到分享到时，紫色Div会出来；离开紫色div或者分享到div时，紫色div消失。
思路：学习了冒泡我们知道，具有事件传递的效果，当我们鼠标滑动到”分享到“时，自动就有一个onmouserover事件发生了（鼠标事件），这时这个事件会传递到他的父级，因此我们只要去设置父级的onmouseover事件就可以了，分别是鼠标移入left为0px；移出left=-100px;
<div id="div1">
<div id="div2">分享到</div>
</div>
<script>
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2'); //根据事件冒泡机制,oDiv2.onmouseover是发生的只是没有写出来，
//因此会触发父级的onmouseover事件，即使没有碰到父级，也可以通过div2的事件传给父级元素
oDiv1.onmouseover = function(){
oDiv1.style.left = 0+'px';
};
oDiv1.onmouseout = function(){
oDiv1.style.left = -100+'px';
};
