11、JavaScript-事件

每天一句：一個人現在某一個領域達到極致，往往需要一萬小時的積累。現在的你就是需要努力先讓自己成為一個領域的高手，然後去獲取更好的機會。[10時/天 * 30 = 300時/月 * 12 = 3600時/年 * 3 = 10800小時]

元素.style.width: 樣式寬
元素.clientWidth: 可視寬度(樣式寬 + padding)
元素.offsetWidth: 佔位寬(樣式寬 + padding + border)

一、獲取元素CSS大小

• 通過style內聯獲取元素的大小

  oBox.style.width      // 空
  oBox.style.height     // 空

注: style只能獲取到內聯style屬性的CSS中的寬度和高度，如果有即獲取到；如果沒有則返回空;

• 通過計算獲取元素的大小

  var width = window.getComputedStyle ? getComputedStyle(oBox).width : oBox.currentStyle.width;     // width: 100px;  => 100px
  var height = window.getComputedStyle ? getComputedStyle(oBox).height : oBox.currentStyle.height;      // height: 100px;  => 100px

注: 通過計算獲取元素的大小，不管是內聯、內部、外部樣式，它都經過計算後得到結果。如果本身設定有大小，即返回元素的大小；如果沒有設定，非IE會返回預設大小，IE返回auto;

二、獲取元素實際大小

• clientWidth和clientHeight 【可視區域大小: width+padding】
  獲取元素可視區域的大小，可以得到元素內容以及內邊距的空間大小,即width+padding(height+padding);

  oBox.clientWidth;     // width: 100px;  + padding: 10px;  => 120
  oBox.clientHeight;    // height: 100px;  + padding: 10px; => 120

注: 返回元素大小是沒有單位的，預設單位就是px

• offsetWidth和offsetHeight 【實際大小即佔位大小: width + padding + border】

  oBox.offsetWidth      // width: 100px;  + padding: 10px; + border: 5px;   =>  130
  oBox.offsetHeight     // height: 100px;  + padding: 10px; + border: 5px;  =>  130

• scrollWidth和scrollHeight 【滾動內容大小】

  oBox.scrollWidth      // 120
  oBox.scrollHeight     // 滾動內容的大小

三、獲取元素周邊大小

• clientLeft和clientTop 【元素邊框大小】

  oBox.clientLeft       // border-left: 5px;  => 5
  oBox.clientTop        // border-top: 5px;   => 5

注: 目前只提供left和top，如果四條邊框大小不一，可以通過計算得到；
右邊框: oView.offsetWidth - oView.clientWidth - oView.clientLeft

• offsetLeft和offsetTop 【相對於父元素的位置】

  oBox.offsetLeft       // left:30  + margin-left:10  => 40
  oBox.offsetTop        // top:30 + margin-top:10 => 40

注: 獲取元素當前相對於父元素的位置，最好設定有定位position: absolute;否則不同的瀏覽器會有不同的解釋； 加上邊框和邊距不會影響它的位置，但加上外邊界會累加;

四、焦點事件

焦點，使瀏覽器能夠區分使用者輸入的物件，當元素有焦點時，就可以接受使用者的輸入，不是所有元素都能夠接收焦點的，能響應使用者操作的元素才有焦點；

        // onfocus: 當元素獲取焦點時觸發
        oText.onfocus = function(){
            this.value = '';
        }
        
        // onblur: 當元素失去焦點時觸發
        oText.onblur = function(){
            this.value = '請輸入密碼';
        }
    
        oText.focus();  // 獲取焦點
        oText.blur();   // 獲取焦點

五、事件物件

• event物件
  Event物件，當一個事件發生的時，和當前物件發生的相關資訊，都會臨時儲存在這個物件中；
  IE/谷歌: event是一個內建全域性物件；
  火狐: 事件物件是通過事件函式的第一個引數傳入；

        function fn2(ev){
            // 相容的寫法
            ev = ev || event;   
            // 遍歷事件物件
            for (att in ev){
            document.write(att + '=' + ev[att] +'<br/>');
            }
        }

foo = foo || bar ，這行程式碼是什麼意思？為什麼要這樣寫？
  這種寫法稱之為短路表示式
答案：if(!foo) foo = bar;  //如果foo存在，值不變，否則把bar的值賦給foo。

• 事件源: 即觸發該事件的節點

        IE: event物件只有srcElement屬性，而沒有target屬性；
        火狐: event物件只有target屬性，而沒有srcElement屬性;
        谷歌/Safari: target和srcElement都可以使用；
        oBox.onclick = function(ev){
            ev = ev || event;
            // 相容的寫法(在此表示的就是oBox物件)
            var self = ev.target || ev.srcElement;
            alert(ev.srcElement.id);
        };

注意: 獲取對應事件源後，最好要判斷型別是否匹配；例如if(self.tagName.toLowerCase() === 'li'){...} ;

• offsetX和offsetY 【滑鼠相對於事件源的位置】

        ev.offsetX      // 水平方向，距離事件源的左邊位置
        ev.offsetY      // 垂直方向，距離事件源的頂部位置

• clientX和clientY 【滑鼠相對於瀏覽器頁面的位置】

         ev.clientX   // 水平方向，距離左邊的位置
         ev.clientY   // 垂直方向，距離頂部的位置

案例: 跟隨滑鼠移動效果

六、事件型別

• onclick: 單擊事件
• ondbclick: 雙擊事件
• onmousedown: 滑鼠按下事件
• onmouseup: 滑鼠釋放(彈起)事件
• onmousemove: 滑鼠移動事件
• onmouseover: 滑鼠移入事件
• onmouseout: 滑鼠移出事件
• onfocus: 獲取焦點事件
• onblur: 失去焦點事件

注: onclick是滑鼠點選彈起之後觸發的事件，即一次完整的滑鼠點選過程；而onmousedown是滑鼠按下後觸發，無需等待滑鼠釋放；即onclick = onmousedown + onmouseup;

七、事件冒泡

• 事件冒泡
  當一個元素接收到事件以後，會將接收到的事件傳遞給父級元素，一直傳遞給頂層window；可以利用事件冒泡，可以減少事件的繫結，有利於效能優化

注意: 事件傳遞給某個元素，並不一會觸發該事件；會不會觸發該事件，和你是否新增該事件有關；

• 阻止事件冒泡

  非IE: stopPropagation()
  IE: ev.cancelBubble = true;
  // 相容寫法
  ev.stopPropagation ? ev.stopPropagation() : ev.cancelBubble = true;

案例: 輸入框的提示列表 (事件冒泡的使用)
案例: 下拉選單效果(阻止事件冒泡)
案例: 分享到 效果 (事件冒泡的使用)
案例: 表格的編輯(冒泡的利用-效能優化)

作業: 模擬select控制元件效果