代码之家 › 专栏 › 技术社区 › rb612

引号中的javascript onclick处理程序给出了不同的行为?

javascript

rb612 · 技术社区 · 7 年前

我今天在编写演示代码时注意到了这种奇怪的行为,我很好奇发生了什么。”按钮“不工作,虽然”按钮2“是的,即使他们是以不同的方式设置。我知道这和引用有关,但我很好奇为什么会这样。类似地,如果我用引号将函数传递给按钮3,而直接将其附加到按钮4,则按钮4可以工作,但按钮3不行。

另外,我认为如果按钮2起作用,它将对 console.log("test") 立即(类似于没有引号的情况下的工作方式),但它会延迟,直到真正点击按钮。我知道这不是最好的方法,但出于好奇,我很好奇到底发生了什么。

document.getElementById("app").innerHTML = `
<h1>Testing Sandbox</h1>
<div>
  <button id='hello'>Button</button>
  <button id='hello2' onclick='console.log("test")'>Button 2</button>
  <button id='hello3' onclick='(e) => console.log("test")'>Button 3</button>
  <button id='hello4'>Button 4</button>

</div>
`;

document.getElementById("hello").onclick = 'console.log("test")';
document.getElementById("hello4").onclick = (e) => console.log("test");

<!DOCTYPE html>
<html>

<head>
	<title>Sandbox</title>
	<meta charset="UTF-8" />
</head>

<body>
	<div id="app"></div>

	<script src="src/index.js">
	</script>
</body>

</html>

2 回复 | 直到 7 年前

CertainPerformance 7 年前

当您分配给 onclick ,调用setter,它执行与调用 addEventListener 使用指定的表达式。但两者 加法器 和 点击 如果传递的表达式不是函数,则将自动失败:

document.getElementById("app").innerHTML = `
<h1>Testing Sandbox</h1>
<div>
  <button id='hello'>Button</button>
`;

document.getElementById("hello").onclick = 'console.log("test")';
// nearly the same thing as:
document.getElementById("hello").addEventListener('click', 'console.log("test")');

<div id="app"></div>

字符串不会被隐式强制为函数。

在第三个示例中,内联处理程序声明了一个函数,但从未执行它:

<button id='hello3' onclick='(e) => console.log("test")'>Button 3</button>

就像

button.addEventListener('click', function(event) {
  (e) => console.log("test")
});

监听器运行,但监听器除了未使用的函数表达式外不包含任何内容,因此单击时看不到任何内容。如果添加日志语句,这可能会更清楚:

<button id='hello3' onclick='console.log("listener running;"); (e) => console.log("test")'>Button 3</button>

总的来说,你应该从未使用内联处理程序;它们需要全局污染,很难管理,有字符串和HTML转义问题,并且被普遍认为是一种不好的做法。相反,使用 加法器 ,并且总是通过它功能 ,而不是字符串,以便正确添加侦听器。

Code Maniac 7 年前

为什么按钮2工作?

可以将一个动作与一定数量的事件关联起来当用户与用户代理交互时发生。每一个上面列出的“内在事件”接受一个脚本值。这个每当该元素发生事件时都会执行脚本。这个脚本数据的语法取决于脚本语言。 HTML Specs

所以 onclick = script [CT] 将在用户交互时调用,在本例中是鼠标单击事件

为什么按钮不工作?

document.getElementById("hello").onclick 在传递字符串时需要一个函数