详解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 相关文章推荐
js 省地市级联选择
Feb 07 Javascript
腾讯的ip接口 方便获取当前用户的ip地理位置
Nov 25 Javascript
使用非html5实现js板连连看游戏示例代码
Sep 22 Javascript
Javascript中innerHTML用法实例分析
Jan 12 Javascript
AngularJS语法详解(续)
Jan 23 Javascript
jQuery文字提示与图片提示效果实现方法
Jul 04 Javascript
AngularJS过滤器详解及示例代码
Aug 16 Javascript
javascript使用 concat 方法对数组进行合并的方法
Sep 08 Javascript
原生JavaScript制作计算器
Oct 16 Javascript
Bootstrap图片轮播效果详解
Oct 17 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
Feb 20 Javascript
js实现多个标题吸顶效果
Jan 08 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
VFP与其他应用程序的集成
2006/10/09 PHP
在线竞拍系统的PHP实现框架(二)
2006/10/09 PHP
Wordpress php 分页代码
2009/10/21 PHP
yii使用activeFileField控件实现上传文件与图片的方法
2015/12/28 PHP
确保Laravel网站不会被嵌入到其他站点中的方法
2019/10/18 PHP
PHP7 新增常量
2021/03/09 PHP
jQuery 常见操作实现方式和常用函数方法总结
2011/05/06 Javascript
用jquery模仿的a的title属性(兼容ie6/7)
2013/01/21 Javascript
nodejs教程之异步I/O
2014/11/21 NodeJs
JavaScript移除数组内重复元素的方法
2015/03/18 Javascript
怎么引入(调用)一个JS文件
2016/05/26 Javascript
使用Ajax与服务器(JSON)通信实例
2016/11/04 Javascript
微信小程序 本地存储及登录页面处理实例详解
2017/01/11 Javascript
基于JavaScript实现轮播图原理及示例
2020/04/10 Javascript
Vue声明式渲染详解
2017/05/17 Javascript
快速解决vue-cli不能初始化webpack模板的问题
2018/03/20 Javascript
详解使用React.memo()来优化函数组件的性能
2019/03/19 Javascript
vue实现一拉到底的滑动验证
2019/07/25 Javascript
js实现跟随鼠标移动的小球
2019/08/26 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
2019/09/18 Javascript
Javascript查看大图功能代码实现
2020/05/07 Javascript
tornado框架blog模块分析与使用
2013/11/21 Python
Python实现好友全头像的拼接实例(推荐)
2017/06/24 Python
python编写微信公众号首图思路详解
2019/12/13 Python
TensorFlow2.0:张量的合并与分割实例
2020/01/19 Python
Python库skimage绘制二值图像代码实例
2020/04/10 Python
CSS3对图片照片进行边缘模糊处理的实现
2018/08/08 HTML / CSS
远程Wi-Fi宠物监控相机:Petcube
2017/04/26 全球购物
递归实现回文判断(如:abcdedbca就是回文,判断一个面试者对递归理解的简单程序)
2013/04/28 面试题
一套C++笔试题面试题
2012/06/06 面试题
linux面试题参考答案(10)
2013/11/04 面试题
小学数学教研活动总结
2014/07/01 职场文书
挂靠协议书
2015/01/27 职场文书
HDFS免重启挂载新磁盘
2022/04/06 Servers
Win11无法访问设备和打印机 如何解决页面空白
2022/04/09 数码科技
浅析JavaScript中的变量提升
2022/06/01 Javascript