详解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的一行代码轻松实现拖动效果
Dec 28 Javascript
映彩衣的js随笔(js图片切换效果)
Jul 31 Javascript
javascript 表格内容排序 简单操作示例代码
Jan 03 Javascript
JavaScript实现的简单烟花特效代码
Oct 20 Javascript
JS上传组件FileUpload自定义模板的使用方法
May 10 Javascript
jQuery实现字符串全部替换的方法【推荐】
Mar 09 Javascript
Vue中的v-for循环key属性注意事项小结
Aug 12 Javascript
教你如何编写Vue.js的单元测试的方法
Oct 17 Javascript
vue的列表交错过渡实现代码示例
May 05 Javascript
微信小程序 Storage更新详解
Jul 16 Javascript
iSlider手机端图片滑动切换插件使用详解
Dec 24 Javascript
vue实现简单瀑布流布局
May 28 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模拟SQL Server的两个日期处理函数
2006/10/09 PHP
hessian 在PHP中的使用介绍
2010/12/13 PHP
yii2中结合gridview如何使用modal弹窗实例代码详解
2016/06/12 PHP
PHP中new static()与new self()的比较
2016/08/19 PHP
PHP封装的mysqli数据库操作类示例
2019/02/16 PHP
jQuery基于图层模仿五星星评价功能的方法
2015/05/07 Javascript
jQuery 选择器(61种)整理总结
2016/09/26 Javascript
JS数字千分位格式化实现方法总结
2016/12/16 Javascript
深入理解JavaScript中的for循环
2017/02/07 Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
2017/02/18 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
2019/09/06 Javascript
vue 父组件通过v-model接收子组件的值的代码
2019/10/27 Javascript
javascript实现评分功能
2020/06/24 Javascript
vue使用require.context实现动态注册路由
2020/12/25 Vue.js
javascript代码实现简易计算器
2021/01/25 Javascript
Python深入学习之装饰器
2014/08/31 Python
python通过pil将图片转换成黑白效果的方法
2015/03/16 Python
在Python中使用pngquant压缩png图片的教程
2015/04/09 Python
使用python和Django完成博客数据库的迁移方法
2018/01/05 Python
python scatter散点图用循环分类法加图例
2019/03/19 Python
Python:Numpy 求平均向量的实例
2019/06/29 Python
python并发编程 Process对象的其他属性方法join方法详解
2019/08/20 Python
python中p-value的实现方式
2019/12/16 Python
如何定义TensorFlow输入节点
2020/01/23 Python
Python通过正则库爬取淘宝商品信息代码实例
2020/03/02 Python
pyinstaller打包成无控制台程序时运行出错(与popen冲突的解决方法)
2020/04/15 Python
用于ETL的Python数据转换工具详解
2020/07/21 Python
python 写一个性能测试工具(一)
2020/10/24 Python
英国伦敦的睡衣品牌:Asceno
2019/10/06 全球购物
Vertbaudet西班牙网上商店:婴儿服装、童装、母婴用品和儿童家具
2019/10/16 全球购物
Opodo意大利:欧洲市场上领先的在线旅行社
2019/10/24 全球购物
岗位廉洁从政承诺书
2014/03/27 职场文书
精彩的演讲稿开头
2014/05/08 职场文书
村长党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2014年社区计生工作总结
2014/11/18 职场文书
浅谈sql_@SelectProvider及使用注意说明
2021/08/04 Java/Android