详解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 强制类型转换函数
May 17 Javascript
jquery ready(fn)事件使用介绍
Aug 21 Javascript
js生成动态表格并为每个单元格添加单击事件的方法
Apr 14 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
Mar 20 Javascript
浅析2种JavaScript继承方式
Dec 04 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
Mar 01 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
Apr 17 Javascript
javascript 判断页面访问方式电脑或者移动端
Sep 19 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
Feb 06 Javascript
解决Extjs下拉框不显示的问题
Jun 21 Javascript
Vue注册组件命名时不能用大写的原因浅析
Apr 25 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
Aug 27 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
星际中一些鲜为人知的详细资料
2020/03/04 星际争霸
php类中private属性继承问题分析
2012/11/01 PHP
PHP单例模式模拟Java Bean实现方法示例
2018/12/07 PHP
Laravel 读取 config 下的数据方法
2019/10/13 PHP
PHP程序员必须知道的两种日志实例分析
2020/05/14 PHP
层序遍历在ExtJs的TreePanel中的应用
2009/10/16 Javascript
js替换字符串的所有示例代码
2013/07/23 Javascript
node.js中使用socket.io制作命名空间
2014/12/15 Javascript
JQuery页面地址处理插件jqURL详解
2015/05/03 Javascript
深入理解jQuery.data() 的实现方式
2016/11/30 Javascript
js实现前端分页页码管理
2017/01/06 Javascript
jQuery+koa2实现简单的Ajax请求的示例
2018/03/06 jQuery
解决vue数组中对象属性变化页面不渲染问题
2018/08/09 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
2018/09/15 Javascript
对vue v-if v-else-if v-else 的简单使用详解
2018/09/29 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
2018/10/10 Javascript
详解webpack4.x之搭建前端开发环境
2019/03/28 Javascript
JavaScript 接口原理与用法实例详解
2020/05/12 Javascript
python共享引用(多个变量引用)示例代码
2013/12/04 Python
将pandas.dataframe的数据写入到文件中的方法
2018/12/07 Python
Python实现将HTML转成PDF的方法分析
2019/05/04 Python
Python实现钉钉订阅消息功能
2020/01/14 Python
小 200 行 Python 代码制作一个换脸程序
2020/05/12 Python
详解Python 中的容器 collections
2020/08/17 Python
python 还原梯度下降算法实现一维线性回归
2020/10/22 Python
德国前卫设计师时装在线商店:Luxury Loft
2019/11/04 全球购物
大学生物业管理求职信
2013/10/24 职场文书
大学生毕业自我鉴定
2013/11/06 职场文书
初中数学教学反思
2014/01/16 职场文书
运动会邀请函范文
2014/01/31 职场文书
万年牢教学反思
2014/02/15 职场文书
中国好声音华少广告词
2014/03/17 职场文书
计算机求职信
2014/07/02 职场文书
机关中层领导干部群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
PHP实现rar解压读取扩展包小结
2021/06/03 PHP
python自动获取微信公众号最新文章的实现代码
2022/07/15 Python