Question

所以这是我的js代码http://jsfiddle.net/f653jnm0/

<body>
<button id="textChanger">change first div text</button>

<div id="firstdiv"> this is some text</div>

<script type="text/javascript">

document.getElementById("textChanger").onclick=function() {document.getElementById("firstdiv").innerHTML='blabla'};

</script>

单击按钮时，它会更改文本。我想知道为什么我们需要使用匿名函数才能使它工作？我们没有它运行代码？如下所示。

http://jsfiddle.net/hjavw3h5/1/

<body>
<button id="textChanger">change first div text</button>

<div id="firstdiv"> this is some text</div>

<script type="text/javascript">

document.getElementById("textChanger").onclick=document.getElementById('firstdiv').innerHTML='bla bla bla';

</script>

在这种情况下，js代码默认运行，文本更改而不与按钮交互。我刚开始学习js，所以你的帮助将不胜感激。谢谢:)）

Answer 1

我想知道为什么我们需要使用匿名函数来使其工作？

因为您必须为浏览器/引擎提供可在事件发生时执行的内容。功能允许你这样做。

注意：该功能不必是匿名的，也可以命名为：

function handler() {
    // handler code here
}

document.getElementById('target').onclick = handler;

我们不能在没有它的情况下运行代码吗？

否（至少不点击）。

Answer 2

你的陈述只有一半。

您需要函数，因为（我假设）您希望在单击时更改文本，而不是在定义事件处理程序时。由于计算机仍然无法阅读程序员的想法，因此需要使用语法糖来区分这两种情况：

这里有一些代码，现在就运行
这里有一些代码，稍后再运行

几乎所有语言中都已存在函数（或类似结构），因为代码重用是编写任何复杂软件的基础。能够传递函数引用是一个干净而有用的扩展，可以解决这个需求。

但它并非必须匿名。

Answer 3

感谢您的回复。如果得到它，在Javascript中，因为.onclick是EVENT HANDLER，浏览器希望（仅）FUNCTION接下来，定义该事件处理程序触发的内容。
但是如果我们编写像这样的内联脚本，则不会出现这种情况。 http://jsfiddle.net/he0rspdz/ p.s下面的代码没有正确显示使用jsfille链接。

        <body>
<button onclick="document.getElementById('firstdiv').innerHTML='bla bla bla';" id="textChanger">change first div text</button>
<div id="firstdiv"> this is some text</div>
</body>

在不使用匿名函数的情况下运行此代码

3 个答案: