详解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 相关文章推荐
JavaScript 应用类库代码
Jun 02 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
Aug 02 Javascript
javascript使用onclick事件改变选中行的颜色
Dec 30 Javascript
js中实现多态采用和继承类似的方法
Aug 22 Javascript
使用javascript获取页面名称
Dec 23 Javascript
jQuery的end()方法使用详解
Jul 15 Javascript
基于Css3和JQuery实现打字机效果
Aug 11 Javascript
js获取Html元素的实际宽度高度的方法
May 19 Javascript
angular-cli修改端口号【angular2】
Apr 19 Javascript
js实现关闭网页出现是否离开提示
Dec 07 Javascript
vue 获取url参数、get参数返回数组的操作
Nov 12 Javascript
基于vue的video播放器的实现示例
Feb 19 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将会员数据导入到ucenter的代码
2010/07/18 PHP
一个简单的网页密码登陆php代码
2012/07/17 PHP
php中Y2K38的漏洞解决方法实例分析
2014/09/22 PHP
分享一则PHP定义函数代码
2015/02/26 PHP
CodeIgniter框架数据库基本操作示例
2018/05/24 PHP
php数组函数array_push()、array_pop()及array_shift()简单用法示例
2020/01/26 PHP
用js生产批量批处理执行命令
2008/07/28 Javascript
JQuery autocomplete 使用手册
2010/04/01 Javascript
Javascript Object.extend
2010/05/18 Javascript
基于jquery的高性能td和input切换并可修改内容实现代码
2011/01/09 Javascript
firefox下input type=&quot;file&quot;的size是多大
2011/10/24 Javascript
JavaScript初学者应注意的七个细节详细介绍
2012/12/27 Javascript
jquery实现的网页自动播放声音
2014/04/30 Javascript
js中substring和substr的定义和用法
2014/05/05 Javascript
JS中的Replace方法使用经验分享
2015/05/20 Javascript
js+html5绘制图片到canvas的方法
2015/06/05 Javascript
基于JavaScript实现的插入排序算法分析
2017/04/14 Javascript
nodeJS微信分享
2017/12/20 NodeJs
详解Node 定时器
2018/02/26 Javascript
微信小程序实现购物车代码实例详解
2019/08/29 Javascript
基于Vue实现微前端的示例代码
2020/04/24 Javascript
Python 获取当前所在目录的方法详解
2017/08/02 Python
python: 判断tuple、list、dict是否为空的方法
2018/10/22 Python
解决Python中list里的中文输出到html模板里的问题
2018/12/17 Python
Opencv+Python实现图像运动模糊和高斯模糊的示例
2019/04/11 Python
python实现简单五子棋游戏
2019/06/18 Python
python3.7 的新特性详解
2019/07/25 Python
python opencv进行图像拼接
2020/03/27 Python
python 5个实用的技巧
2020/09/27 Python
日本著名的服饰鞋帽综合类购物网站:MAGASEEK
2019/01/09 全球购物
副校长竞聘演讲稿
2014/09/01 职场文书
铁路安全反思材料
2014/12/24 职场文书
2015年乡镇工会工作总结
2015/05/19 职场文书
辩护词范文大全
2015/05/21 职场文书
导游词之神仙居景区
2019/11/15 职场文书
Docker 镜像介绍以及commit相关操作
2022/04/13 Servers