javascript-BOM-页面加载事件

DOM文档流一般是从上到下执行，所以我们一般将标签放在最下面，有了元素之后，才能对元素进行操作，放在了元素前的话，js就不会执行额

但是如果想要将放在其他位置，元素上面，也可以执行；- - -可以使用：load事件，或者DOMContentLoaded事件

load事件，DOMContentLoaded事件相同点和不同点：

相同点：
将放在两者中，都可以达到页面加载完成后，再执行js

不同点：
load事件- - -dom页面所有内容加载完后，再执行js语句，包含图片、flash、css等
DOMContentLoaded- - -dom页面加载完毕，不包含图片、flash、css等就可以执行js语句

代码示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>页面加载事件</title><script>/* window.onload = function() {var btn = document.querySelector('button');btn.addEventListener('click', function() {alert('弹弹弹，弹走鱼尾纹！');})} */window.addEventListener('load', function() {var btn = document.querySelector('button');btn.addEventListener('click', function() {alert('弹弹弹，弹走鱼尾纹！');})})window.addEventListener('DOMContentLoaded', function() {alert('dom加载完毕，不包含图片 flash css 等就可以执行 加载速度比较快');})</script>
</head><body><button>点我弹弹弹</button><!-- <script>var btn = document.querySelector('button');btn.addEventListener('click', function() {alert('弹弹弹，弹走鱼尾纹！');})</script> -->
</body></html>

javascript-BOM-页面加载事件相关推荐

jQuery的页面加载事件
window.οnlοad=function(){...}作用是当页面加载的时候可以调用某些函数,例如: window.onload = function() {alert("加载成功&qu ...
js 写html加载中的效果,基于javascript实现页面加载loading效果
本文实为大家分享了javascript实现页面加载loading效果,供大家参考,具体内容如下效果图: 正在载入正在载入首页,请稍候. var line = "||" var ...
JavaScript获取页面加载时间和页面停留时间
JavaScript获取页面加载时间和页面停留时间 var duration = 0; //停留时间 var loadingTime = 0; //加载时间 var startTime = Math. ...
页面加载事件html5,JavaScript页面加载事件实例讲解
一.onload 加载事件 onload 是 window 对象的一个事件,也可以省略 window 直接使用. 常用方式: 这个事件是等待页面加载完成之后,再执行注意:该事件相比于在中的
Javascript在页面加载时的执行顺序
一.在HTML中嵌入Javasript的方法直接在Javascript代码放在标记对<script>和</script>之间由<script />标记的src属 ...
Javascript在页面加载时的执行顺序(转载）
原文:http://dancewithnet.com/2007/03/22/order-of-execution-of-javascript-on-web/ 一.在HTML中嵌入Javasript的方 ...
JavaScript实现页面加载成功后刷新一遍当前页面（二）
/*** 页面加载完毕后刷新一遍当前页面*/ function reurl(){ url = location.href; //把当前页面的地址赋给变量 url var times = url.spl ...
jQuery与JavaScript 页面加载事件
参考菜鸟教程 window.onload 与 jQuery ready() 区别 // JavaScript window.onload = function () {}; // jQuery $(d ...
JavaScript实现页面加载成功后刷新一遍当前页面（一）
<SCRIPT LANGUAGE="JavaScript"> function fresh(){ if(location.href.indexOf("?rel ...
vue生命周期函数，页面加载事件
<script>export default {data() {return {};},methods: {toIndex() {//跳转页面this.$router.push(" ...

javascript-BOM-页面加载事件

load事件，DOMContentLoaded事件相同点和不同点：

代码示例：

javascript-BOM-页面加载事件相关推荐

最新文章

热门文章