Question

以下是我的代码，但不起作用。在我将“click（）”重命名为“click1（）”后，它有效，为什么？

<html>
<head>
    <title></title>
    <script type="text/javascript">
        function click() {
            document.getElementById("content").innerHTML = "abc";
        }
    </script>
</head>

<body>
    <button onclick="click()">try it</button><br />
    <div id="content"></div>
</body>
</html>

Answer 1

“onfoo”处理程序属性的字符串值被解释为处理函数的主体。换句话说，就好像将属性的字符串值传递给new Function("event", str)，结果是使用的处理函数。

此外，该函数的词法范围如下所示，取自HTML5规范（我仅以浏览器行为的综合描述的方式参考）：

词汇环境范围
   *让范围成为NewObjectEnvironment（元素的Document，全局环境）的结果。
   *如果元素具有表单所有者，请将 Scope 作为NewObjectEnvironment（元素的表单所有者， Scope ）的结果。
   *让范围成为NewObjectEnvironment（元素的对象，范围）的结果。

因此，就好像最多有两个嵌套with块隐式包裹在代码中。因此，在这种情况下，效果就是调用它：

var handler = new Function("event", "with (this) { click(); }");

因为对应于<button>的DOM元素上存在“click”方法，所以该函数是处理程序调用的函数，而不是脚本标记建立的全局函数。如果“onclick”属性设置为“window.click（）;”页面正常工作。

Answer 2

已经有一个名为click的函数，负责调用事件处理程序。通过声明另一个，您覆盖第一个，因此事件不再起作用。

Answer 3

click（）是javascript按钮对象的内置。

Answer 4

点击（）HTML5 http://www.w3.org/TR/html5/webappapis.html

中使用的方法的保留名称

Answer 5

单击是预定义事件。您不应该使用预定义的事件。

Answer 6

您应该考虑使用jQuery来重构代码：

<html>
<head>
    <title></title>
</head>

<body>
    <button id="button1">try it</button><br />
    <div id="content"></div>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#button1").click(function() {
                $("#content").html("abc");
            });
        });
    </script>
</body>
</html>

javascript函数名称不能设置为click？

6 个答案: