事件绑定中的this（包含addEventListener）

HTML事件绑定

能够直接经过 html 事件属性来绑定 js 执行代码，属性由 "on" 后面跟着事件名组成。onclick、onchange、onload、onmouseover等。注意这些属性名是区分大小写的，全部都是小写，即便事件类型是由多个词组成。

定义的事件处理程序能够包含要执行的具体动做，也能够调用在页面其余地方定义的脚本。这段代码应该是事件处理程序函数的主体，而非完整的函数声明。也就是说，这段代码不该该用大括号包围且使用function关键字做为前缀。

<button onclick="console.log(this)">click</button>
// 这里的 this 是button元素

--------

<button onclick="say()">click</button>

function say() {
    console.log(this)
}
// 这里的 this 是window
// html 事件绑定的函数在执行时，有权访问全局做用域中的任何代码。也即咱们能够在 html 中能够直接调用 script 标签中定义的函数。

--------

<button onclick="obj.say()">click</button>

let obj = {
	say: function() {
		console.log(this)
	}
}
// 这里的 this 是obj
复制代码

总结：当绑定的函数是一个直接执行的语句（第一种），而且显示的传入一个this时，此时 this 指向该调用元素，若是是其余状况，根据 this 的定义肯定便可。

缺点：

• 不利于表现层和逻辑层代码分离
• 用户可能会在HTML元素一出如今页面上就触发相应的事件，但当时的事件处理程序有可能尚不具有执行条件。之前面的例子来讲明，假设 showMessage() 函数是在按钮下方、页面的最底部定义的。若是用户在页面解析 showMessage() 函数以前就单击了按钮，就会引起错误。

DOM元素事件绑定

给 DOM 元素绑定事件至关因而从 attribute 改为了 property，浏览器的兼容性异常优异，方法就是将这种属性的值设置为一个函数。

<button id="btn">click</button>

let oBtn = document.getElementById('btn');
oBtn.onclick = say; // 这里的 this 是button元素
function say() {
    console.log(this)
}

--------

let obj = {
	say: function() {
		console.log(this)
	}
}
oBtn.onclick = obj.say;
// 这里的 this 也是button元素

oBtn.onclick = null;  
// 删除事件处理程序
// html 上绑定的事件也能够经过这种方式来解绑
复制代码

总结：绑定的事件处理程序被附值给了元素的方法，也即 this 指向该目标元素。

缺点：一个元素只能绑定一个处理函数

addEventListener 绑定函数

这里不说使用方法了，很简单

<button id="btn">click</button>

let oBtn = document.getElementById('btn');
oBtn.addEventListener('click', function(){
	console.log(this) // 这里的 this 是button元素
}, false)

--------

oBtn.addEventListener('click', say, false)
function say() {
    console.log(this) // 这里的 this 也是button元素
}

--------

let obj = {
	say: function() {
		console.log(this)
	}
}
oBtn.addEventListener('click', obj.say, false)
// 这里的 this 也是button元素
复制代码

总结：addEventListener 参数中回调函数的this指向目标元素。

经常使用的解决办法：

oBtn.addEventListener('click', obj.say.bind(obj), false);
// 经过使用bind，为回调函数绑定指定的 this
复制代码