javascript - 关于html中form标签的奇怪现象（目测能上每周推荐）-PHP中文网问答

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

javascript - 关于html中form标签的奇怪现象（目测能上每周推荐）

PHP中文网 2017-04-11 10:08:54

[JavaScript讨论组]

484

<html>
<head>
    <script>
        alert(window.selectType.value);
        function selectType() {
            alert("change");
        }

    </script>
</head>

<body>
<form>
     <input type="text" id="selectType" value="1" onchange="selectType();"/>
</form>
<script>
    alert(window.selectType.value);
    //    function selectType() {
    //        alert("change");
    //    }

</script>
</body>
</html>

一次偶尔的机会，写了id和方法名一样，于是后出现了奇葩现象，onchange的时候会报错说selectType不是一个方法。
经过各种调试后，终于发现，如果把form标签删掉，就能正常触发onchange方法。不过window.selectType.value还是依然有错。
可有大神能解释解释这里form标签究竟干了什么？

PHP中文网

认证0级讲师

全部回复(4)

怪我咯2017-04-11 10:10:54 4楼

摘自：《JavaScript权威指南（第6版）》

17.3.3　事件处理程序的作用域
另一方面，HTML事件处理程序中修改的作用域链是陷阱之源，因为作用域链中每个对象的属性在全局对象中都有相同名字的属性。例如，由于Document对象定义（很少使用）open()方法，因此HTML事件处理程序想调用Window对象的open()方法就必须显式地写window.open而不是open。表单有类似的问题但破坏性更大，因为表单元素的名字和ID在包含的表单元素上定另一方面，HTML事件处理程序中修改的作用域链是陷阱之源，因为作用域链中每个对象的属性在全局对象中都有相同名字的属性。例如，由于Document对象定义（很少使用）open()方法，因此HTML事件处理程序想调用Window对象的open()方法就必须显式地写window.open而不是open。表单有类似的问题但破坏性更大，因为表单元素的名字和ID在包含的表单元素上定义属性（见15.9.1节）。例如，如果表单包含一个ID是"location"的元素，那么要是表单的所有HTML事件处理程序想引用window的location对象，就必须使用window.location而不能是location。

http://www.cnblogs.com/realwa...

赞 +0

添加回复

PHP中文网2017-04-11 10:10:54 3楼

<html>
<head>
    <script>
        function selectType() {
            alert("change");
        }

    </script>
</head>

<body>
<form>
     <input type="text" id="selectType" value="1" onchange="window.selectType();console.log(selectType);"/>
</form>
</body>
</html>

试了一下应该是form标签下的id都被声明为局部变量指向了标签，想访问外面的得用window.selectType。

赞 +0

添加回复