详解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 源码分析笔记(3) Deferred机制
Jun 19 Javascript
setInterval()和setTimeout()的用法和区别示例介绍
Nov 17 Javascript
JavaScript中的迭代器和生成器详解
Oct 29 Javascript
Javascript中数组sort和reverse用法分析
Dec 30 Javascript
js实现仿Windows风格选项卡和按钮效果实例
May 13 Javascript
js实现向右横向滑出的二级菜单效果
Aug 27 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
Jul 12 Javascript
原生JS实现图片左右轮播
Dec 30 Javascript
jQuery实现级联下拉框实战(5)
Feb 08 Javascript
js实现数组去重方法及效率?Ρ? target=
Feb 14 Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
关于JavaScript数组去重的一些理解汇总
Sep 10 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
晋城吧对DiscuzX进行的前端优化要点
2010/09/05 PHP
PHP的mysqli_query参数MYSQLI_STORE_RESULT和MYSQLI_USE_RESULT的区别
2014/09/29 PHP
教大家制作简单的php日历
2015/11/17 PHP
详解WordPress中用于合成数组的wp_parse_args()函数
2015/12/18 PHP
php生成word并下载代码实例
2019/03/15 PHP
Jquery 实现图片轮换
2015/01/28 Javascript
js实现最短的XML格式化工具实例
2015/03/12 Javascript
javascript实现数独解法
2015/03/14 Javascript
js比较日期大小的方法
2015/05/12 Javascript
JavaScript中的toDateString()方法使用详解
2015/06/12 Javascript
jQuery实现鼠标经过事件的延时处理效果
2020/08/20 Javascript
javascript中错误使用var造成undefined
2016/03/31 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
2016/05/03 Javascript
jQuery Tags Input Plugin(添加/删除标签插件)详解
2016/06/20 Javascript
JSON 对象未定义错误的解决方法
2016/09/29 Javascript
原生js编写焦点图效果
2016/12/08 Javascript
Bootstrap缩略图与警告框学习使用
2017/02/08 Javascript
AngularJS ionic手势事件的使用总结
2017/08/09 Javascript
Angular将填入表单的数据渲染到表格的方法
2017/09/22 Javascript
[03:26]回顾2015国际邀请赛中国区预选赛
2015/06/09 DOTA
python对html代码进行escape编码的方法
2015/05/04 Python
Python实现Windows和Linux之间互相传输文件(文件夹)的方法
2017/05/08 Python
python中的变量如何开辟内存
2018/06/26 Python
在linux系统下安装python librtmp包的实现方法
2019/07/22 Python
python求一个字符串的所有排列的实现方法
2020/02/04 Python
pandas参数设置的实用小技巧
2020/08/23 Python
Python偏函数实现原理及应用
2020/11/20 Python
解决pycharm 格式报错tabs和space不一致问题
2021/02/26 Python
HTML5单页面手势滑屏切换原理
2016/03/21 HTML / CSS
美特斯邦威官方商城:邦购网
2016/10/13 全球购物
美国运动鞋和运动服零售商:Footaction
2017/04/07 全球购物
韩国现代百货官网:Hmall
2018/03/21 全球购物
恶意软件的定义
2014/11/12 面试题
小学生差生评语
2014/12/29 职场文书
感恩教育观后感
2015/06/17 职场文书
详解MySQL的半同步
2021/04/22 MySQL