Question

我在使OnChnage Listener工作时遇到问题，如果我在</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>

Answer 1

这样说：

<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>

Answer 2

将您的代码放入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>

Answer 3

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

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

window.addEventListener('load',addListener,false);
function addListener() {
    //your code here
}

HTML OnChange侦听器在HTML标记中的位置

3 个答案: