详解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的消息提示插件之旅 DivAlert(三)
Apr 01 Javascript
容易被忽略的JS脚本特性
Sep 13 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
Apr 02 Javascript
JavaScript中数据结构与算法(二):队列
Jun 19 Javascript
JS结合bootstrap实现基本的增删改查功能
Jul 22 Javascript
浅谈js多维数组和hash数组定义和使用
Jul 27 Javascript
angularjs定时任务的设置与清除示例
Jun 02 Javascript
JavaScript门面模式详解
Oct 19 Javascript
AngularJS集合数据遍历显示的实例
Dec 27 Javascript
vue与原生app的对接交互的方法(混合开发)
Nov 28 Javascript
JavaScript中构造函数与原型链之间的关系详解
Feb 25 Javascript
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
前端如何实现动画过渡效果
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输出缓存ob系列函数详解
2014/03/11 PHP
使用PHP实现下载CSS文件中的图片
2015/12/06 PHP
yii2中添加验证码的实现方法
2016/01/09 PHP
关于php中一些字符串总结
2016/05/05 PHP
PHP HTTP 认证实例详解
2016/11/03 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
PDO::setAttribute讲解
2019/01/29 PHP
YII2框架中添加自定义模块的方法实例分析
2020/03/18 PHP
Extjs学习笔记之三 extjs form更多的表单项
2010/01/07 Javascript
js实现在页面上弹出蒙板技巧简单实用
2013/04/16 Javascript
select多选 multiple的使用示例
2014/06/16 Javascript
浅谈js 闭包引起的内存泄露问题
2015/06/22 Javascript
Javascript对象字面量的理解
2016/06/22 Javascript
遍历json获得数据的几种方法小结
2017/01/21 Javascript
jQuery实现拼图小游戏(实例讲解)
2017/07/24 jQuery
JavaScript你不知道的一些数组方法
2017/08/18 Javascript
react配合antd组件实现的管理系统示例代码
2018/04/24 Javascript
IE11下处理Promise及Vue的单项数据流问题
2019/07/24 Javascript
JS正则表达式常见函数与用法小结
2020/04/13 Javascript
js实现弹幕飞机效果
2020/08/27 Javascript
Nginx搭建HTTPS服务器和强制使用HTTPS访问的方法
2015/08/16 Python
Swift中的协议(protocol)学习教程
2016/07/08 Python
python3.5 tkinter实现页面跳转
2018/01/30 Python
Python中asyncio与aiohttp入门教程
2018/10/16 Python
Python人脸识别第三方库face_recognition接口说明文档
2019/05/03 Python
python字符串分割及字符串的一些常规方法
2019/07/24 Python
解决python彩色螺旋线绘制引发的问题
2019/11/23 Python
Pytorch mask_select 函数的用法详解
2020/02/18 Python
Python字符串函数strip()原理及用法详解
2020/07/23 Python
Python爬虫分析微博热搜关键词的实现代码
2021/02/22 Python
财务工作者先进事迹材料
2014/01/17 职场文书
护士毕业自我鉴定
2014/02/07 职场文书
安全保证书格式
2015/02/28 职场文书
Redis遍历所有key的两个命令(KEYS 和 SCAN)
2021/04/12 Redis
java Nio使用NioSocket客户端与服务端交互实现方式
2021/06/15 Java/Android
详解Mysql事务并发(脏读、不可重复读、幻读)
2022/04/29 MySQL