详解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 获取json数据实现代码
Apr 27 Javascript
javascript客户端解决方案 缓存提供程序
Jul 14 Javascript
javascript实现在线客服效果
Jul 15 Javascript
javascript实现动态标签云
Oct 16 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
Jun 17 Javascript
JS实现两周内自动登录功能
Mar 23 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
Aug 31 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
Dec 18 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
Mar 25 Javascript
浅谈对于“不用setInterval,用setTimeout”的理解
Aug 28 Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
Sep 10 Javascript
js计算最大公约数和最小公倍数代码实例
Sep 11 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
Laravel中扩展Memcached缓存驱动实现使用阿里云OCS缓存
2015/02/10 PHP
PHP实现字符串翻转功能的方法【递归与循环算法】
2017/11/03 PHP
javascript 动态添加表格行
2006/06/22 Javascript
Js base64 加密解密介绍
2013/10/11 Javascript
php读取sqlite数据库入门实例代码
2014/06/25 Javascript
AngularJS基础 ng-model-options 指令简单示例
2016/08/02 Javascript
AngularJS之依赖注入模拟实现
2016/08/19 Javascript
原生js仿jquery实现对Ajax的封装
2016/10/04 Javascript
BACKBONE.JS 简单入门范例
2017/10/17 Javascript
nodejs简单抓包工具使用详解
2019/08/23 NodeJs
layui 上传图片 返回图片地址的方法
2019/09/26 Javascript
[59:08]Ti4 冒泡赛第二天 NEWBEE vs Titan 2
2014/07/15 DOTA
Python使用Socket(Https)Post登录百度的实现代码
2012/05/18 Python
简单介绍Python中利用生成器实现的并发编程
2015/05/04 Python
在Linux下使用Python的matplotlib绘制数据图的教程
2015/06/11 Python
Python标准库之collections包的使用教程
2017/04/27 Python
python正则表达式re之compile函数解析
2017/10/25 Python
查找python项目依赖并生成requirements.txt的方法
2018/07/10 Python
深入理解Django-Signals信号量
2019/02/19 Python
对Python中TKinter模块中的Label组件实例详解
2019/06/14 Python
如何实现更换Jupyter Notebook内核Python版本
2020/05/18 Python
检测浏览器对HTML5和CSS3支持度的方法
2015/06/25 HTML / CSS
英国天然保健品网站:Simply Supplements
2017/03/22 全球购物
软件生产职位结构化面试主要考察要素及面试题库
2015/06/12 面试题
4s店机修工岗位职责
2013/12/20 职场文书
房地产促销活动方案
2014/03/01 职场文书
2014年百日安全生产活动总结
2014/05/04 职场文书
自我查摆剖析材料
2014/10/11 职场文书
普通党员整改措施
2014/10/24 职场文书
2014年林业工作总结
2014/12/05 职场文书
雨花台导游词
2015/02/06 职场文书
音乐课《小猫钓鱼》教学反思
2016/02/18 职场文书
争做文明公民倡议书
2019/06/24 职场文书
Golang二维数组的使用方式
2021/05/28 Golang
用Python selenium实现淘宝抢单机器人
2021/06/18 Python
分享几个简单MySQL优化小妙招
2022/03/31 MySQL