详解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 相关文章推荐
学习ExtJS table布局
Oct 08 Javascript
jquery 简单的进度条实现代码
Mar 11 Javascript
不使用中间变量,交换int型的 a, b两个变量的值。
Oct 29 Javascript
一个简单的js树形菜单
Dec 09 Javascript
json数据与字符串的相互转化示例
Sep 18 Javascript
有关jquery与DOM节点操作方法和属性记录
Apr 15 Javascript
jQuery事件处理的特征(事件命名机制)
Aug 23 Javascript
JS自定义混合Mixin函数示例
Nov 26 Javascript
Jquery EasyUI $.Parser
Jun 02 jQuery
node使用UEditor富文本编辑器的方法实例
Jul 11 Javascript
微信小程序实现全国机场索引列表
Jan 31 Javascript
require.js 加载过程与使用方法介绍
Oct 30 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入门速成(2)
2006/10/09 PHP
PHPThumb PHP 图片缩略图库
2012/03/11 PHP
php中ftp_chdir与ftp_cdup函数用法
2014/11/18 PHP
php图片添加文字水印实现代码
2016/03/15 PHP
学习JavaScript的最佳方法分享
2011/10/21 Javascript
javascript实现别踩白块儿小游戏程序
2015/11/22 Javascript
vue mint-ui学习笔记之picker的使用
2017/10/11 Javascript
vue2.0 datepicker使用方法
2018/02/04 Javascript
使用rollup打包JS的方法步骤
2018/12/05 Javascript
使用form-create动态生成vue自定义组件和嵌套表单组件
2019/01/18 Javascript
Vue使用localStorage存储数据的方法
2019/05/27 Javascript
vue配置文件实现代理v2版本的方法
2019/06/21 Javascript
vue控制多行文字展开收起的实现示例
2019/10/11 Javascript
vue 中的动态传参和query传参操作
2020/11/09 Javascript
vue 解决IOS10低版本白屏的问题
2020/11/17 Javascript
利用Python画ROC曲线和AUC值计算
2016/09/19 Python
python方向键控制上下左右代码
2018/01/20 Python
python生成ppt的方法
2018/06/07 Python
python+splinter自动刷新抢票功能
2018/09/25 Python
python 将json数据提取转化为txt的方法
2018/10/26 Python
django的聚合函数和aggregate、annotate方法使用详解
2019/07/23 Python
如何利用python给图片添加半透明水印
2019/09/06 Python
解决tensorflow由于未初始化变量而导致的错误问题
2020/01/06 Python
用python写PDF转换器的实现
2020/10/29 Python
Appium+Python实现简单的自动化登录测试的实现
2021/01/26 Python
CSS3使用transition实现的鼠标悬停淡入淡出
2015/01/09 HTML / CSS
美国体育用品商店:Paragon Sports
2017/10/08 全球购物
Spartoo比利时:欧洲时尚购物网站
2017/12/06 全球购物
网络事业创业计划书范文
2014/01/09 职场文书
运动会通讯稿100字
2014/01/31 职场文书
爸爸的花儿落了教学反思
2014/02/20 职场文书
旅行社优秀创业计划书
2014/08/16 职场文书
放飞梦想演讲稿800字
2014/08/26 职场文书
2014年就业工作总结
2014/11/26 职场文书
2014年公路养护工作总结
2014/12/04 职场文书
Python中递归以及递归遍历目录详解
2021/10/24 Python