详解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 相关文章推荐
dojo 之基础篇(二)之从服务器读取数据
Mar 24 Javascript
几个高效,简洁的字符处理函数
Apr 12 Javascript
return false;和e.preventDefault();的区别
Jul 11 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
Sep 16 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
Dec 15 Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
Jun 20 Javascript
详解JS中的柯里化(currying)
Aug 17 Javascript
微信小程序模板和模块化用法实例分析
Nov 28 Javascript
Angular实现的table表格排序功能完整示例
Dec 22 Javascript
vue2.0项目实现路由跳转的方法详解
Jun 21 Javascript
JS实现自定义弹窗功能
Aug 08 Javascript
微信小程序使用map组件实现路线规划功能示例
Jan 22 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 面向对象 PHP5 中的常量
2010/05/05 PHP
codeigniter教程之上传视频并使用ffmpeg转flv示例
2014/02/13 PHP
Smarty模板变量调节器用法分析
2016/05/23 PHP
php自定义函数实现二维数组排序功能
2016/07/20 PHP
解析javascript 数组以及json元素的添加删除
2013/06/26 Javascript
jquery选择器之属性过滤选择器详解
2014/01/27 Javascript
jquery实现点击消失的代码
2014/03/03 Javascript
Bootstrap简单表单显示学习笔记
2016/11/15 Javascript
微信小程序 页面跳转如何实现传值
2017/04/05 Javascript
Jquery中attr与prop的区别详解
2017/05/27 jQuery
JavaScript实现shuffle数组洗牌操作示例
2019/01/03 Javascript
react-native滑动吸顶效果的实现过程
2019/06/03 Javascript
layui操作列按钮个数和文字颜色的判断实例
2019/09/11 Javascript
JavaScript实现捕获鼠标坐标
2020/04/12 Javascript
你准备好迎接vue3.0了吗
2020/04/28 Javascript
Vue组件跨层级获取组件操作
2020/07/27 Javascript
Python中的一些陷阱与技巧小结
2015/07/10 Python
Python实现读取文件最后n行的方法
2017/02/23 Python
python检查URL是否正常访问的小技巧
2017/02/25 Python
利用python爬取散文网的文章实例教程
2017/06/18 Python
Python中存取文件的4种不同操作
2018/07/02 Python
python 格式化输出百分号的方法
2019/01/20 Python
对python读取zip压缩文件里面的csv数据实例详解
2019/02/08 Python
selenium框架中driver.close()和driver.quit()关闭浏览器
2020/12/08 Python
使用CSS3的ruby-position固定注音位置的用法示例
2016/07/05 HTML / CSS
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
2021/03/05 HTML / CSS
初中生三年学习生活的自我评价
2013/11/03 职场文书
工伤赔偿协议书范本
2014/04/15 职场文书
客户经理竞聘演讲稿
2014/05/15 职场文书
幼儿园爱国卫生月活动总结
2014/06/30 职场文书
党的群众路线教育实践活动总结大会主持词
2014/10/30 职场文书
小学生优秀评语
2014/12/29 职场文书
安娜卡列尼娜观后感
2015/06/11 职场文书
2016新春团拜会致辞
2015/08/01 职场文书
JS实现简单控制视频播放倍速的实例代码
2021/04/18 Javascript
科学家测试在太空中培育人造肉,用于未来太空旅行
2022/04/29 数码科技