簡單總結焦點事件、Event事件對象、冒泡事件

每學習一些新的東西，要學會複習，總結和記錄。

今天來簡單總結一下學到的幾個事件：焦點事件、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中的事件對象，是通過事件函數的第一個事件參數傳入的

　　　　相容性處理：

1 function fn1(ev){   
2     var ev=ev || event;    
3     alert(ev);
4 }
5 
6 document.onclick = fn1;        //通過點擊調用事件

　　　　註意：事件對象必須在一個事件調用下才生成事件函數，也就是說，不能夠fn1();這樣直接調用，要通過 obj.onclikc = fn1;這種類型的調用方法。

3.冒泡事件：

　　3.1概念：

　　　　當一個元素接收到一個事件時，會將這個事件傳給它的父級，直到最頂層window

 1 <div id="div1">
 2         <div id="div2">
 3             <div id="div3"></div>   //已經為div3設置了絕對定位到div1和div2外面
 4     </div>
 5     
 6    <script>
 7     var oDiv1 = document.getElementById('div1');
 8     var oDiv2 = document.getElementById('div2');
 9     var oDiv3 = document.getElementById('div3');
10     function fn1(){
11          alert(this.id);
12     }
13     oDiv1.onclick = fn1;    //點擊div1會同時觸發div2、3的onclck事件（冒泡）
14     oDiv2.onclick = fn1;
15     oDiv3.onclick = fn1;
16     </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';    
    };