事件

如何綁定事件

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

事件處理程序的運行環(huán)境

• 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);
• 注: 若綁定匿名函數(shù), 則無法解除
• 封裝的兼容方法

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中的第三個參數(shù)false/true, 當為true是事件變?yōu)椴东@機制 , flase時為冒泡機制 **

事件捕獲

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

EG:

例子

• 當為捕獲機制時: 當點擊黃色方塊時(結構嵌套, 黃色為里面的div, 紅色為父級), 先出發(fā)的是紅色點擊事件, 之后是綠色, 黃色;
• 當為冒泡機制時, 先觸發(fā)黃色事件, 然后依次向父級冒泡, 為綠色, 紅色.

即使兩個都有, 觸發(fā)順序, 先捕獲, 后冒泡

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;
• 封裝取消冒泡的函數(shù)

阻止默認事件:

• 默認事件---表單提交, a標簽跳轉(zhuǎn), 右鍵菜單等.
• return flase; 以對象屬性的方式注冊的事件才生效
• event.preventDefault( ); W3C標準, IE9以下不兼容
• event.returnValue = false; 兼容IE
• 封裝阻止默認事件的函數(shù)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中的內(nèi)容

    
    
    這里寫圖片描述

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

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都有