事件

如何繫結事件

• ele.onxxx = function(event) { }
  
  • 相容性好, 但是一個元素的同一個事件上只能繫結一個處理程式
  • 基本等同於寫在HTML行間
• obj.addEventListener(type, function( ){ }, flase);
  
  • IE9以下不相容, 可以為一個事件繫結多個處理程式
• obj.attachEvent(‘on’ + type, fn);
  
  • IE獨有, 一個事件同樣可以繫結多個處理程式

事件處理程式的執行環境

• ele.onxxx = function(event) { }
  
  • 程式this指向是dom元素本身
• obj.addEventListener(type, fn, false);
  
  • 程式this指向是dom元素本身
• obj.attachEvent(‘on’ + type, fn);
  
  • 程式this指向window
• 封裝相容性的addEvent(elem, type, handle);方法

function addEvent(elem, type, handle) {
    if(elem.addEventListener) {
        elem.addEventListener(type, handle, false);
    }else if(elem.attachEvent) {
         elem['temp'] = function() {
            handle.call(elem);
        }
        elem.attachEvent('on'
 
 + type, elem['temp']);
    }else{
        elem['on' + type] = handle;
    }
}

解決事件處理程式

• ele,.onclick = flase/ ’ ‘/ null;
• ele.removeEventListener(type, fn, false);
• ele.detachEvent(‘on’ + type, fn);
• 注: 若繫結匿名函式, 則無法解除
• 封裝的相容方法

function removeEvent(elem, type, handle) {
    if(elem.removeEventListener) {
        elem.removeEventListener(type, handle, false
 
);
    }else if(elem.detachEvent) {
        elem.detachEvent('on' + type, handle);
    }else{
        elem['on' + type] = null;
    }
}

事件處理模型–事件冒泡 \ 捕獲

事件冒泡

• 結構上(非視覺上)巢狀的元素, 會存在事件冒泡的功能, 即同一個事件, 自子元素冒泡向父元素(自底向上)

Tips: addEventListener中的第三個引數false/true, 當為true是事件變為捕獲機制 , flase時為冒泡機制

事件捕獲

• 結構上(非視覺上)巢狀關係的元素, 會存在事件捕獲的功能, 即同一個事件, 自父元素捕獲至子元素(事件源元素). (自頂向下)
• IE沒有捕獲事件

EG:

• 當為捕獲機制時: 當點選黃色方塊時(結構巢狀, 黃色為裡面的div, 紅色為父級), 先出發的是紅色點選事件, 之後是綠色, 黃色;
• 當為冒泡機制時, 先觸發黃色事件, 然後依次向父級冒泡, 為綠色, 紅色.

即使兩個都有, 觸發順序, 先捕獲, 後冒泡

focus(滑鼠聚焦), blur(滑鼠失去焦點), change, submit, reset, select等事件不冒泡

取消冒泡和阻止預設事件

取消冒泡:

• W3C標準event.stopPropagation( );但不支援ie9以下版本
  eg:

var div = document.getElementsBYTagName('div')[0];
div.onClick = function() {
    console.log('a');
    e.stopPropagation();
}

• IE獨有event.cancelBubble = true;
• 封裝取消冒泡的函式

阻止預設事件:

• 預設事件—表單提交, a標籤跳轉, 右鍵選單等.
• return flase; 以物件屬性的方式註冊的事件才生效
• event.preventDefault( ); W3C標準, IE9以下不相容
• event.returnValue = false; 相容IE
• 封裝阻止預設事件的函式cancelHandler(event);

事件物件

• event || window.event 用於IE
  eg:

div.onclick  = function(e) {
    var event = e || window.event;
}

• 事件源物件
  
  • event.target 火狐只有這個
  • event.srcElement IE只有這個
    eg1:在HTML中有100個li, 要求點選任意li, 打印出li中的內容
    

注意:又稱事件委託!!!!!!!!!

eg2:

var wrapper = document.getElementsByClassName('wrapper')[0];
var content = document.getElementsByClassName('content')[0];
wrapper.onClick = function(e) {
    var event = e || window.event;
    var target = event.target || event.srcElement//獲取事件源物件, 就是找到吹泡泡的人
}

• 以上chrome都有