onload事件 - 秒客网

onload事件：页面加载（文本和图片）完毕的时候，

onload的作用：

JS加载时和html是同步加载的，如果使用元素在定义元素之前易报错；

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Document</title>

        <script>

            var btn=document.getElementById("btn");

            btn.onclick=function(){

                alert("Hello JavaScript!");

            };

        </script>

    </head>

    <body>

        <button id="btn">点击</button>

    </body>

</html>

onload事件

整个页面上所有元素加载完毕后再执行js的内容

window.onload可以预防使用标签在定义之前，即实现ＪＳ代码于html页面的异步加载

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Document</title>

        <script>

            window.onload=function(){

                var btn=document.getElementById("btn");

                btn.onclick=function(){

                    alert("Hello Javascript!");

                }

            }

        </script>

    </head>

    <body>

        <button id="btn">点击</button>

    </body>

</html>

同步与异步：

1.生活中同步是所有的事一起执行，异步是事件一件一件的执行

2.web中同步是事件一件一件的执行，异步是所有的事一起执行

onload事件的更多相关文章

JavaScript 中 onload 事件绑定多个方法
当需要调用的方法较多时,我们可以进一步优化,编写一个专门用于绑定 onload事件的方法: function addLoadEvent(func) { //把现有的 window.onload 事件处 ...
jQuery &dollar;(document)&period;ready()和JavaScript onload事件
jQuery $(document).ready()和JavaScript onload事件 Why we need a right time? 对元素的操作和事件的绑定需要等待一个合适的时机,可以看 ...
onload事件-----addLoadEvent函数
在给网页加一些特效时经常要在<body>中加入“onload”事件,即在网页加载完后执行某事件,例如:<body onload=”alert(‘欢迎光临!')”,但这样做有个大的缺陷 ...
共享onload事件
在做前端工作中,我们想要设置某个函数prepare,让它在网页加载完毕后执行,会触发一个onload事件,这个事件与windows对象相关联,必须把prepare函数绑定到这个时间上,语法如下:win ...
javascript中onload事件如何绑定及执行顺序
onload事件,顾名思义就是为了js程序能够在网页加载成功过后进行执行.对于放在head里面的js来说,非常必要. 如何给网页绑定onload,主要有三种方式: window.onload=func ...
jQuery的document ready与 onload事件——你真的思考过吗？
在进行实验和资料查询时,我遇到了几个关键问题: 1. window.onload到底是什么加载完触发? 2. body为什么会有onload事件? 3. 为什么是window.onload,而不是do ...
【HTML】Iframe中的onload事件
当iframe.src重新指定一个url时会重新执行iframe的onload事件 <iframe id="indexFrame" name="index&quot ...
学习JQuery的&dollar;&period;Ready()与OnLoad事件比较
$(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法接触JQuery一般最先学到的是何时启动事件.在曾经很长一段时间里,在页面载入后引发的事件 ...
&dollar;(document)&period;Ready()方法 VS OnLoad事件 VS &dollar;(window)&period;load()方法
$(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法接触JQuery一般最先学到的是何时启动事件.在曾经很长一段时间里,在页面载入后引发的事件 ...
（js有关图片加载问题）dom加载完和onload事件
引用旺旺的话...哈哈哈DOMContentLoaded事件表示页面的DOM结构绘制完成了,这时候外部资源(带src属性的)还没有加载完.而onload事件是等外部资源都加载完了就触发的.$.read ...

随机推荐

洛谷10月月赛Round&period;1| P3400 仓鼠窝[单调栈]
题目描述萌萌哒的Created equal是一只小仓鼠,小仓鼠自然有仓鼠窝啦. 仓鼠窝是一个由n*m个格子组成的行数为n.列数为m的矩阵.小仓鼠现在想要知道,这个矩阵中有多少个子矩阵!(实际上就是有 ...
State（状态）
props和state.props是在父组件中指定,而且一经指定,在被指定的组件的生命周期中则不再改变. 对于需要改变的数据,我们需要使用state.般来说,你需要在constructor中初始化st ...
Android Gradle 技巧之一： Build Variant 相关
Build Variant android gradle 插件,允许对最终的包以多个维度进行组合. BuildVariant = ProductFlavor x BuildType 两个维度最常见的 ...
Codeforces Round &num;336 (Div&period; 2) B&period; Hamming Distance Sum 计算答案贡献+前缀和
B. Hamming Distance Sum Genos needs your help. He was asked to solve the following programming pro ...
iOS 之微信开发流程
第1阶段注册开放平台帐号注册成为微信开放平台开发者立即注册认证开发者资质开发者资质认证通过后才可申请微信支付,申请审核服务费:300元/次立即认证创建APP并提交审核提交你的APP基本 ...
Java IO流思维导图
数学——Euler方法求解微分方程详解（python3）
算法的数学描述图解实例用Euler算法求解初值问题 \[ \frac{dy}{dx}=y+\frac{2x}{y^2}\] 初始条件$y(0)=1$,自变量的取值范围\(x \in [0, 2 ...
doc转html
Doc2Html li标签没闭合在线Word转HTML style样式
数据库与ORM
一.数据库的配置 1 django默认支持sqlite,mysql, oracle,postgresql数据库. <1> sqlite django默认使用sqlite的数据库,默认自带 ...
20145127 《Java程序设计》第一周学习总结
通过第一周的Java程序设计的学习,听了娄老师的第一堂课,虽然课堂上老师并没有一开始就讲许多专业的知识,而是带领着我们对于Java这门语言,并不仅仅是一门语言,经行了初步的认识与了解,并且对于Java ...