javascript event this
Javascript Event this：深入理解this关键字
在学习Javascript编程的过程中，this是一个非常重要的关键字，尤其是当我们要操作HTML页面的事件时，非常频繁地用到this。在开始深入解析this之前，我们可以先看一组源代码，来说明在Javascript事件中，this到底是做了什么。
当我们在页面中点击"点击我"这个按钮时，会弹出一个对话框，显示出按钮内部的文字内容。这里this指的是按钮本身，而不是我们的Javascript事件。这是因为当我们在HTML页面中声明一个事件时（此处为onclick事件），浏览器会默认在执行相应函数之前，把事件元素作为函数中的this参数传递进去。
在使用Javascript编写事件时，我们可以通过this获取与事件关联的对象。下面是一个简单的例子，通过this获取鼠标悬停的li节点。
<ul> <li onmouseover="console.log(this.innerHTML)">项目1</li> <li onmouseover="console.log(this.innerHTML)">项目2</li> <li onmouseover="console.log(this.innerHTML)">项目3</li> </ul>
在这种情况下，this指的是当前鼠标悬停的li节点。当鼠标指针移动到某个li上方时，console将输出该li节点的innerHTML内容。
下面是另一个使用鼠标事件的例子，可以看到我们在事件函数中输出的this指向的是绑定事件的元素本身：
document.getElementById("my-btn").addEventListener("click", function() {
console.log(this);
});
在这种情况下，我们使用addEventListener()方法通过ID获取了一个HTML element，来绑定一个click事件。当我们在页面中点击这个按钮时，console的输出结果是该按钮的DOM节点。
在实际开发中，this的指向不仅限于DOM节点。在Javascript中，可以使用call()和apply()方法来改变this的指向，使其指向我们所需要的对象。下面是一个显示的使用例子：
var person1 = {firstName: "Tom", lastName: "Hanks"};
var person2 = {firstName: "Jim", lastName: "Carry"};
function displayName() {
console.log(this.firstName + " " + this.lastName);
}
displayName.call(person1); // 输出内容为：Tom Hanks
displayName.call(person2); // 输出内容为：Jim Carry
在这种情况下，我们通过使用call()方法来改变displayName函数中的this指向。而且，通过巧妙地使用call()和apply()方法，我们能够在Javascript编程中实现很多惊人的功能。
总结一下，Javascript中的this关键字始终指向当前调用函数的对象，最常使用的情况是在处理HTMLElement的事件时。但是，在实际代码中，我们可以使用call()和apply()方法来改变this指向，以实现更复杂的操作。如果你想掌握JavaScript编程，理解this关键字是非常重要的一步。