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(this)" />
function showValue(this) {
    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元素本身
//相当于
input.onclick=function(){
alert(this.value)
}

注意： 这里是直接执行！ 点击之后直接执行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.onclick=function(){
 showValue()
}

<input id="name" type="text" value="name" value="Laruence" onclick="showValue(this)" />
通过showValue执行点击事件处理,把this形参传了过去
function showValue(this) {
    alert(this.value);//name
};

//相当于
input.onclick=function(this){
 showValue(this)
}

从上面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！