JavaScript OnChange Listener在HTML标记中的位置

JavaScript OnChange Listener position in HTML markup

本文关键字：位置 HTML OnChange Listener JavaScript      更新时间：2023-09-26

我在使OnChnage侦听器工作时遇到问题，如果我将脚本放在</form>标记之后，侦听器工作正常，但如果我将该脚本放在<head>标记中，则无法工作。

在我的网站上，我只能将脚本放在<head>标记中。我能做些什么让脚本在<head>标记中运行吗？

在该配置中，脚本不起作用

<head>
<script type="text/javascript">
if(window.addEventListener) {
    document.getElementById('address').addEventListener('change', loadXMLDoc, false);
} else if (window.attachEvent){
    document.getElementById('address').attachEvent("onchange", loadXMLDoc);
}
function loadXMLDoc(){
   alert('worked');
}
</script>
</head>
<body>
<form>
<input id="address" name="address" type="text"/>
<input id="test" name="test" type="text"/>
 </form>

这样说：

<head>
<script type="text/javascript">
window.onload= function () {
    if(window.addEventListener) {
        document.getElementById('address').addEventListener('change', loadXMLDoc, false);
    } else if (window.attachEvent){
        document.getElementById('address').attachEvent("onchange", loadXMLDoc);
    }
    function loadXMLDoc(){
       alert('worked');
    }
}
</script>
</head>

将代码放入window.onload函数：

<head>
<script>
    window.onload = function() {
        if(window.addEventListener) {
            document.getElementById('address').addEventListener('change', loadXMLDoc, false);
        } else if (window.attachEvent){
            document.getElementById('address').attachEvent("onchange", loadXMLDoc);
        }
        function loadXMLDoc(){
            alert('worked');
        }
    }
</script>
<body>
    ...
</body>

当您将脚本放置在<head>中时，使用document.getElementById获得的元素还不存在。等待窗口加载后再添加事件侦听器。

您需要等待窗口加载jQuery $(document).ready，或者向窗口添加一个加载的侦听器：

window.addEventListener('load',addListener,false);
function addListener() {
    //your code here
}
相关文章：