详解javascript脚本何时会被执行


Posted in Javascript onFebruary 05, 2021

javascript脚本可以嵌入在html内的任意地方,但它何时被调用呢?当浏览器打开HTML文件后,会直接运行不是声明函数的脚本或通过事件调用脚本函数,下面分析这几种情况。

1.浏览器在打开页面时执行脚本

当浏览器打开一个HTML文件时,它会从头开始解释整个文件,包括html标签和脚本。如果脚本中有可以直接执行的语句,则会在遇到的时候马上解释执行。主要有以下2种情形:

1).程序启动(这里指浏览器加载页面)这个alert这类函数就会被触发执行

<html>
  <head>
    <title>demo</title>
    <script type="text/javascript">
      alert("dare you click me once again");  
    </script>
  </head>
  <body onLoad="display()">
  </body>
</html>

2).随着浏览器加载解析js函数被自动调用(并不是用户点击等行为触发)

详解javascript脚本何时会被执行

2.利用onLoad事件执行脚本(相当于监听**发生,然后执行)

onLoad事件是一个页面在浏览器中被打开时发生的,该方法常用于在打开一个页面的同时向用户显示一些消息。
下面例子利用标签的onLoad事件进行演示:

<html>
  <head>
    <title>demo</title>
    <script type="text/javascript">
      //insert javascript code here.
      function display()
      {
        alert("dare you click me once again")  
      }
    </script>
  </head>
  <body onLoad="display()">
  </body>
</html>

3.利用用户事件执行脚本

用户在使用浏览器时经常会使用鼠标和键盘进行一些操作,比例移动鼠标、点击链接或按钮,这些操作都会产生相应的事件。我们可以利用这些事件来调用脚本函数。
下面例子利用一个点击按钮事件来调用display()函数。

<html>
  <head>
    <title>demo</title>
    <script type="text/javascript">
      //insert javascript code here.
      function display(){
        alert("you click me ,it is so pain")
        }
    </script>
  </head>
  <body>
    <center><br>
    <form>
      <input type="button" value="onclick" onclick="display()">
    </form>
  </center>
  </body>
</html>

以上就是详解javascript脚本何时会被执行的详细内容,更多关于javascript脚本何时会被执行的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
jquery 表单进行客户端验证demo
Aug 24 Javascript
学习ExtJS border布局
Oct 08 Javascript
Jquery Ajax.ashx 高效分页实现代码
Oct 20 Javascript
javascript 全等号运算符使用说明
May 31 Javascript
浏览器脚本兼容 文本框中,回车键触发事件的兼容
Jun 21 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
Apr 24 Javascript
Bootstrap CSS组件之输入框组
Dec 17 Javascript
JavaScript对象封装的简单实现方法(3种方法)
Jan 03 Javascript
用Axios Element实现全局的请求loading的方法
Mar 15 Javascript
详解小程序退出页面时清除定时器
Apr 28 Javascript
详解Vue 如何监听Array的变化
Jun 06 Javascript
微信小程序自定义弹窗实现详解(可通用)
Jul 04 Javascript
前端如何实现动画过渡效果
Feb 05 #Javascript
原生js拖拽功能制作滑动条实例代码
Feb 05 #Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 #jQuery
如何在JavaScript中使用localStorage详情
Feb 04 #Javascript
vue浏览器返回监听的具体步骤
Feb 03 #Vue.js
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 #Vue.js
详解React中共享组件逻辑的三种方式
Feb 02 #Javascript
You might like
php中用文本文件做数据库的实现方法
2008/03/27 PHP
PHP实现的连贯操作、链式操作实例
2014/07/08 PHP
PHP+apc+ajax实现的ajax_upload上传进度条代码
2016/01/25 PHP
基于php判断客户端类型
2016/10/14 PHP
PHP实现简单的计算器
2020/08/28 PHP
JS 动态加载脚本的4种方法
2009/05/05 Javascript
JavaScript 对象链式操作测试代码
2010/04/25 Javascript
Node.js实战 建立简单的Web服务器
2012/03/08 Javascript
JQuery for与each性能比较分析
2013/05/14 Javascript
jquery ajax 局部刷新小案例
2014/02/08 Javascript
JavaScript中的原型链prototype介绍
2014/12/30 Javascript
jQuery实现预加载图片的方法
2015/03/17 Javascript
深入探究使JavaScript动画流畅的一些方法
2015/06/30 Javascript
Bootstrap模态框调用功能实现方法
2016/09/19 Javascript
setTimeout学习小结
2017/02/08 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
2017/06/16 Javascript
在vue-cli 3中给stylus、sass样式传入共享的全局变量
2019/08/12 Javascript
vue实现五子棋游戏
2020/05/28 Javascript
vue 防止页面加载时看到花括号的解决操作
2020/11/09 Javascript
[01:52]PWL S2开团时刻第四期——DOTA2成语故事
2020/12/03 DOTA
Python中的descriptor描述器简明使用指南
2016/06/02 Python
python对DICOM图像的读取方法详解
2017/07/17 Python
python+pandas生成指定日期和重采样的方法
2018/04/11 Python
PyQt5实现下载进度条效果
2018/04/19 Python
python利用requests库进行接口测试的方法详解
2018/07/06 Python
python使用threading.Condition交替打印两个字符
2019/05/07 Python
python输出电脑上所有的串口名的方法
2019/07/02 Python
pytorch GAN伪造手写体mnist数据集方式
2020/01/10 Python
美国一家专业的太阳镜网上零售商:Solstice太阳镜
2016/07/25 全球购物
社团文化节邀请函
2014/01/10 职场文书
幼儿园家长评语大全
2014/04/16 职场文书
大学军训的体会
2014/11/08 职场文书
求职自我评价范文
2015/03/09 职场文书
创业的9条正确思考方式
2019/08/26 职场文书
导游词之南昌滕王阁
2019/11/29 职场文书
vue项目支付功能代码详解
2022/02/18 Vue.js