在DOM中完全加载html时使用元素
[英]Use elements when DOM is fully loaded in html
问题描述
I want my child elements of body tag to be used when document is fully loaded. 
我希望在文档完全加载后使用body标签的子元素。 like I have 就像我有
<body>
Country: <br>
<div>
<datalist id="country"></datalist>
<input type="text" list="country" id="search" onmouseover = 'populate("country")'/>
</div>
</body>
In the input element, i am using onmouseover event to call javascript function. 在输入元素中，我正在使用onmouseover事件来调用javascript函数。 But I want that thing to be enabled when all element are fully loaded. 但是我希望在所有元素完全加载后启用该功能。
Up till now, I have seen online that there is an onload event that can be used in body tag to call any particular function. 到目前为止，我在线上看到有一个onload事件，可以在body标签中使用它来调用任何特定功能。 But I don't want to call any function on onload event, just want to make sure that onmouseover event of input element should fired when body is fully loaded. 但是我不想在onload事件上调用任何函数，只是想确保在正文完全加载后，应触发输入元素的onmouseover事件。
3 个解决方案
解决方案1
2 已采纳 2016-07-25 10:40:09
You can use jQuery to listen on the window load event and then create your mouseover listener on the input whenever all media is fully loaded: 您可以使用jQuery监听window加载事件，然后在所有媒体完全加载时在输入上创建mouseover监听器：
$(window).on("load", function() {
$("#search").on("mouseover", function() {
populate("country");
});
});
Instead of window.load you could even use document.ready . 甚至可以使用document.ready代替window.load 。 The first will even wait until all other things, like images, are loaded. 第一个甚至会等到所有其他东西（如图像）都加载完后再进行。 The last will only wait until the DOM is finished ... 最后一个只会等到DOM完成...
// $(function() {}) is a shorthand for $(document).ready(function() {});
$(function() {
$("#search").on("mouseover", function() {
populate("country");
});
});
解决方案2
1 2016-07-25 10:40:16
you can use jQuery for this 您可以为此使用jQuery
Your HTML code 您的HTML代码
<body>
Country: <br>
<div>
<datalist id="country"></datalist>
<input type="text" list="country" id="search" />
</div>
</body>
in you javascript code 在你的JavaScript代码
$(document).ready(function(){
$("#search").hover(function(){
populate('country');
});
});
解决方案3
1 2016-07-25 10:40:34
In jquery use the 在jQuery中使用
$(document).ready(function(){ $('#search').on('mouseenter', function(){ console.log('mouse over'); }) })
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.