两种事件处理程序赋值的区别

Question

两种事件处理程序赋值的区别

3

假设我们有一个简单的HTML页面，其中只有一个脚本：

<html> 
<script type="text/javascript"> 
window.onpopstate=function(event) 
{   alert("hi"); } 
</script> 
<body > 
<h1> Hi, 2 </h1> 
<a href="h3.htm">next</a> 
</body> 
</html>

它不能正常工作（我在Chrome和FF下尝试过）。但是当我将脚本代码写成：

<script type="text/javascript"> 
function pp(event) {      alert("hi");    }
window.onpopstate=pp()
</script>

它工作了！就我而言，这两段代码仅在函数定义上有所不同，但在实践中并非如此。

顺便说一下，即使触发onpopstate事件，event仍然未定义。这是对我来说更加不清楚的事情。谢谢你的帮助。

- Miamy

2

第二个示例立即执行 pp，试图将返回值（在本例中为 undefined）分配给 window.onpopstate。 - Sampson

1

使用 target.addEventListener(type, handler)，不要使用 neither。 - Paul S.

@Sampson，现在我更清楚了，谢谢！ - Miamy

@Paul S，谢谢，我明天会尝试做的 :) - Miamy

2个回答

0

首先，在第二个片段中，您有一个函数调用pp()，您可能想要使用window.onpopstate=pp。

其次，当您手动执行history.pushState({page: 1}, "title 1", "?page=1");然后执行history.back();或者只是点击返回按钮时，它可以工作。不知道为什么单击链接不会在历史记录中添加条目。

- Alexander

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Andre Pena · Accepted Answer

如@Sampson所述...它们不一样...

在第二个例子中，window.onpopstate被填充了pp执行的结果。在这种情况下，该函数返回未定义，因此在此之后window.onpopstate为未定义。当然，你会看到alert，但window.onpopstate是undefined。

在第一个例子中，window.onpopstate被填充了函数本身，这实际上是预期的内容。如果你查看文档，onpopstate需要一个funcRef，这正是你作为参数传递的内容。

底线：在第二个例子中，你会看到alert，因为你调用了该函数，但第一个是正确的。为了实际看到onpopstate被触发，你应该添加到浏览器历史记录中，但那是另一回事...