JavaScript“ this”和事件处理程序-CSDN博客

如果有一个理由依赖jQuery之类的JavaScript库，那就是事件处理。大多数库将事件抽象为在大多数现代浏览器中均可使用的统一对象和处理程序集。但是我们不需要库-我们是核心的JavaScript开发人员！

活动101

没有事件和处理程序，我们将永远无法创建漂亮的客户端Web应用程序。通过事件，JavaScript可以检测用户何时执行了特定操作，例如，将鼠标悬停在元素上，单击链接，滚动页面，调整窗口大小，拖动对象或任何其他活动。

您的JavaScript代码可以注册一个处理程序函数，该函数在发生特定事件时触发。大多数浏览器将单个对象传递给该函数，该对象包含有关事件的信息，即，按下了哪些键，光标的位置等。然后可以采取某些动作，例如为元素设置动画，进行Ajax调用或阻止浏览器的默认操作。

另外，可以设置“ this”。通常，您可以期望它是引发事件的元素，但并非总是如此……

内联事件

这些是第一个受支持的事件处理程序浏览器：


<p><a id="link" href="#" onclick="EventHandler();">click me</a></p>

<script>
function EventHandler() {
	console.log(this);
}
</script>

在这种情况下，当onclick事件发生时，我们仅运行一个函数，而'this'将是全局窗口对象。我们可以对内联处理程序进行较小的更改，以便传递<a>元素：


<p><a id="link" href="#" onclick="return EventHandler(this);">click me</a></p>

请注意，我们还添加了“返回”。如果我们的EventHandler返回false，则单击事件将被取消。

重要提示：切勿使用内联事件处理程序！

我之前已经说过，但是需要重复。内联事件处理程序是有限的，笨拙的，并且会增加您的HTML代码。由于在不同位置定义了事件及其处理程序的调用，因此它们导致维护复杂化。最后，脚本标记必须放在HTML的顶部而不是底部，因为在页面加载时可以调用一个事件。

传统DOM0事件

这是使用传统事件处理的示例：


<p><a id="link" href="#">click me</a></p>

<script>
var link = document.getElementById("link");
link.onclick = EventHandler;

function EventHandler() {
	console.log(this.id);
}
</script>

在EventHandler（）中，每个浏览器都将“ this”设置为触发事件的元素-我们的锚标记。它是可靠的，但有一个主要缺点：我们只能为每种事件类型分配一个处理程序。

注意：删除括号！

注意不要使用link.onclick = EventHandler(); — EventHandler将立即运行，并将返回的值（未定义）分配给#link节点的onclick属性。它可能不会引发错误，但是单击事件发生时将永远不会调用您的处理程序。

现代DOM2事件

最后，我们拥有现代的事件处理功能，可以为同一事件指定多个处理程序。不幸的是，Microsoft和W3C在实现方面存在一些意见分歧，只有IE9支持addEventListener（）。但是，我们可以使用少量对象检测来创建跨浏览器事件附加功能，该功能可在所有浏览器中使用：


<p><a id="link" href="#">click me</a></p>

<script>
var link = document.getElementById("link");
AttachEvent(link, "click", EventHandler);

function AttachEvent(element, type, handler) {
	if (element.addEventListener) element.addEventListener(type, handler, false);
	else element.attachEvent("on"+type, handler);
}

function EventHandler(e) {
	console.log(this);
}
</script>

与DOM0一样，所有浏览器都将'this'设置为触发事件的元素……除了一个。 Internet Explorer 8.0及更低版本仅引用事件处理程序，因此“ this”始终是全局窗口对象。

幸运的是，我们可以改为从事件对象确定目标元素：


function EventHandler(e) {
	e = e || window.event;
	var target = e.target || e.srcElement;
	console.log(target);
}

ew 您想知道为什么jQuery如此流行！

From: https://www.sitepoint.com/javascript-this-event-handlers/