详解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 相关文章推荐
自适应高度框架 ----属个人收藏内容
Jan 22 Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
Feb 04 Javascript
javascript写的异步加载js文件函数(支持数组传参)
Jun 07 Javascript
JavaScript实现N皇后问题算法谜题解答
Dec 29 Javascript
jQuery实现折叠、展开的菜单组效果代码
Sep 16 Javascript
理解javascript封装
Feb 23 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
Aug 17 Javascript
简单实现jquery隔行变色
Nov 09 jQuery
Vue 页面切换效果之 BubbleTransition(推荐)
Apr 08 Javascript
JS常用的几种数组遍历方式以及性能分析对比实例详解
Apr 11 Javascript
Vue axios设置访问基础路径方法
Sep 19 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
Sep 21 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从csv文件读取数据并输出到网页的方法
2015/03/14 PHP
一个加载js文件的小脚本
2007/06/28 Javascript
jquery关于页面焦点的定位(文本框获取焦点时改变样式 )
2010/09/10 Javascript
打开新窗口关闭当前页面不弹出关闭提示js代码
2013/03/18 Javascript
js浏览器本地存储store.js介绍及应用
2014/05/13 Javascript
JS弹出可拖拽可关闭的div层完整实例
2015/02/13 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
2015/07/28 Javascript
js淡入淡出焦点图幻灯片效果代码分享
2015/09/08 Javascript
基于jquery实现简单的分页控件
2016/03/17 Javascript
如何用js实现鼠标向上滚动时浮动导航
2016/07/18 Javascript
详解在Vue中通过自定义指令获取dom元素
2017/03/04 Javascript
Vue Socket.io源码解读
2018/02/07 Javascript
NodeJs搭建本地服务器之使用手机访问的实例讲解
2018/05/12 NodeJs
node.js使用express框架进行文件上传详解
2019/03/03 Javascript
JS面向对象编程——ES6 中class的继承用法详解
2020/03/03 Javascript
21行Python代码实现拼写检查器
2016/01/25 Python
Python算法应用实战之队列详解
2017/02/04 Python
Python初学时购物车程序练习实例(推荐)
2017/08/08 Python
快速了解Python中的装饰器
2018/01/11 Python
解决Python的str强转int时遇到的问题
2018/04/09 Python
python 调用有道api接口的方法
2019/01/03 Python
python中dict()的高级用法实现
2019/11/13 Python
Django模板标签中url使用详解(url跳转到指定页面)
2020/03/19 Python
Pytorch实现WGAN用于动漫头像生成
2021/03/04 Python
欧洲最大的笔和书写专家:The Pen Shop
2017/03/19 全球购物
NARS化妆品官方商店:美国彩妆品牌
2017/08/26 全球购物
美国首屈一指的高品质珠宝设计师和零售商:Allurez
2018/01/23 全球购物
联想马亚西亚官方网站:Lenovo Malaysia
2018/09/19 全球购物
Furla官网:意大利著名的皮革品牌
2019/08/06 全球购物
出国导师推荐信
2014/01/16 职场文书
企业军训感想
2014/02/07 职场文书
道德演讲稿
2014/05/21 职场文书
校庆口号
2014/06/20 职场文书
2014年酒店工作总结范文
2014/11/17 职场文书
面试通知邮件
2015/04/20 职场文书
vue+elementui 实现新增和修改共用一个弹框的完整代码
2021/06/08 Vue.js