DOM事件綁定的this問題

先上幾道面試題（我們公司面試前端的）
1

<input id="name" type="text" value="name" onclick="alert(this.value);" />

2

<input id="name" type="text" value="name" value="Laruence" />
function showValue() {
    alert(this);
};
document.getElementById('name').onclick = showValue;
document.getElementById('name').addEventListener('click',showValue);
document.getElementById('name').attachEvent('click',showValue)

3

<input id="name" type="text" value="name" value="Laruence" onclick="showValue()" />
function showValue() {
    alert(this.value);
};

如果你都答對了！那麼請關閉網頁！

JavaScript中事件綁定的幾種方式

1.內聯模式 (行內綁定)

<標籤 屬性列表 事件=”事件的處理程序” />

<input id="name" type="text" value="name" onclick="alert(this.value);" />
<input id="name" type="text" value="name" onclick="test();" />

這種js和html不分離耦合性高不利於後期維護，不推薦使用。

2.動態模式

瀏覽器廠商推出了新的事件註冊模式。由於網景最先推出該模式，從而成爲事實上的標準，後續包括 IE 在內的所有瀏覽器都支持該標準。寫法如下：

// 添加點擊事件
element.onclick  = function(){
	console.log("動態模式點擊事件")
};
// 移除點擊事件
element.onclick = null;

3.事件監聽

//添加一個事件處理函數
element.addEventListener("click", function(){
    console.log("監聽點擊事件");
}, false);
// 移除事件處理函數
element.removeEventListener("click", function(){
    console.log("移除監聽點擊事件");
}, false);
//IE的
element.attachEvent("onclick", function(){
    console.log("監聽點擊事件")
});
element.detachEvent("onclick", function(){
    console.log("移除監聽點擊事件")
}));

3 個參數，分別爲事件類型、事件處理函數和事件處理階段（true=事件捕獲，false=事件冒泡），this 爲元素本身，IE只能冒泡，不能捕獲；事件處理函數是被引用，而不是複製，所以 this 關鍵字總是 window。當事件冒泡時，我們無法知道當前是哪個元素在處理該事件。

4.this的問題

一.內聯模式 (行內綁定)
1.直接執行事件，當this被內聯函數調用時，它的this默認指向監聽器所在的DOM元素。

<input id="name" type="text" value="name" onclick="alert(this.value);" /> // name,this指向 input元素本身

注意： 這裏是直接執行！ 點擊之後直接執行alert(this.value)，這樣this肯定元素本身
2.通過函數調用執行事件

<input id="name" type="text" value="name" value="Laruence" onclick="showValue()" />
////通過showValue執行點擊事件處理
function showValue() {
    alert(this.value);//underfined,this指向window
};

<input id="name" type="text" value="name" value="Laruence" onclick="obj.showValue(this)" />
////通過showValue執行點擊事件處理
function showValue() {
    alert(this.value);//underfined,this指向window
};

從上面2道題看，調用javascript函數，指向window或者調用的對象！如果你想改變this的指向可以用call,apply,bind都可以！
二.動態模式

<input id="name" type="text" value="name" value="Laruence" />
function showValue() {
   alert(this);
};
document.getElementById('name').onclick = showValue;

document.getElementById(‘name’) 是dom對象，dom對象上添加一個onclick 方法，那麼調用對象方法，所以this指向DOM元素。
三.事件監聽
修改下上面的例子

<input id="name" type="text" value="name" value="Laruence" />
document.getElementById('name').addEventListener('click',function(){
   alert(this);//元素本身
})；
//IE的
document.getElementById('name').attachEvent('click',function(){
   alert(this);//window
})

這裏this指向的是調用addEventListener的對象！如果是IE的監聽，attachEvent函數指向window！