Question

我希望在文档完全加载时使用body标签的子元素。就像我有

<body>
    Country: <br>
    <div>
        <datalist id="country"></datalist>          
        <input type="text" list="country" id="search" onmouseover = 'populate("country")'/>         
    </div>  
</body>

在input元素中，我使用onmouseover事件来调用javascript函数。但我希望在所有元素完全加载时启用该功能。

到目前为止，我在网上看到有一个 onload 事件可以在body标签中用来调用任何特定的函数。但是我不想在onload事件上调用任何函数，只是想确保在body完全加载时触发输入元素的onmouseover事件。

Answer 1

您可以使用jQuery监听window加载事件，然后在所有媒体完全加载时在输入上创建mouseover侦听器：

$(window).on("load", function() {
    $("#search").on("mouseover", function() {
        populate("country");
    });
});

而不是window.load您甚至可以使用document.ready。第一个甚至会等到所有其他东西（如图像）都被加载。最后一个只会等到DOM完成...

// $(function() {}) is a shorthand for $(document).ready(function() {});
$(function() {
    $("#search").on("mouseover", function() {
        populate("country");
    });
});

Answer 2

你可以使用jQuery来实现这个

您的HTML代码

<body>
    Country: <br>
    <div>
        <datalist id="country"></datalist>          
        <input type="text" list="country" id="search" />         
    </div>  
</body>

在你的javascript代码中

$(document).ready(function(){
    $("#search").hover(function(){
        populate('country');
    });
});

Answer 3

在jquery中使用

＆＃13;

$(document).ready(function(){
        $('#search').on('mouseenter', function(){
             console.log('mouse over');
          })
    })

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Country: <br>
    <div>
        <datalist id="country"></datalist>          
        <input type="text" list="country" id="search" />         
    </div>

＆＃13;

在HTML

3 个答案: