JS代码的位置
      我们可以将JavaScript代码放在html文件中任何位置，但是我们一般放在网页的head或者body部分。
   放在<head>部分
最常用的方式是在页面中head部分放置<script>元素，浏览器解析head部分就会执行这个代码，然后才解析页面的其余部分。
  放在<body>部分
JavaScript代码在网页读取到该语句的时候就会执行。
☢ 注意
      Javascript作为一种脚本语言可以放在html页面中任何位置，但是浏览器解释html时是按先后顺序的，所以前面的script就先被执行。

比如进行页面显示初始化的js必须放在head里面，因为初始化都要求提前进行（如给页面body设置css等）；而如果是通过事件调用执行的function那么对位置没什么要求的。

事件响应代码块的封装
★  事件响应代码的不同封装其页面响应效果也有所不同
△ 测试 1 放在标签<head>中，或紧接着标签<body>的下方
  1. <script>
  2. /* document.onclick = function () {
  3. alert("You have clicked in the document!");
  4. };
  5. var img = document.getElementById("mainImage");
  6. img.onclick = function () {
  7. alert("You have clicked on the picture!");
  8. };*/
  10. /* 若将document.onclick放在img onclick事件之前，那么只会提示document的onclick */
  11. /* 若将img onclick放在document.onclick事件之前，那么无任何提示*/
  12. </script>
△ 测试 2 放在内容标签之后
  1. <body>
  2. <img src="data:images/image.jpg" id="mainImage">
  4. document.onclick =function(){
  5. alert("You have clicked in the document!");
  6. };
  7. var img = document.getElementById("mainImage");
  8. img.onclick =function(){
  9. alert("You have clicked on the picture!");
  10. };
  11. //此时document.onclick与img.onclick的顺序不影响执行结果
  12. </body>
 

推荐做法（正确的姿势...）

       将事件响应代码封装为函数，然后在window.onload中完成挂接工作。
  1. <script>
  2. functionDemo(){
  3. document.onclick =function(){
  4. alert("You have clicked in the document!");
  5. };
  6. var img = document.getElementById("mainImage");
  7. img.onclick =function(){
  8. alert("You have clicked on the picture!");
  9. };
  10. }
  11. window.onload =function(){
  12. Demo();
  13. }
  14. </script>
这样子，script的代码块无论在head中还是body中，或者是body的不同位置，最终的执行结果都是一样的。
 

JS代码的位置与事件响应代码块的封装问题的更多相关文章

  1. 二、JavaScript语言--JS基础--JavaScript进阶篇--事件响应

    1.什么是事件 JavaScript 创建动态页面.事件是可以被 JavaScript 侦测到的行为. 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件. 比如说,当用户 ...

  2. 查找和定位Android应用的按钮点击事件的代码位置基于Xposed Hook实现

    本文博客地址:https://blog.csdn.net/QQ1084283172/article/details/80956455 在进行Android程序的逆向分析的时候,经常需要通过Androi ...

  3. JS事件调试 - 查找HTML元素绑定的事件以及绑定代码所在位置

    日常的网页开发调试工作中,经常需要知道指定的某个网页元素绑定了哪些事件以及绑定代码的位置,下面介绍三种用来跟踪页面中的事件的方法. 1.使用firefox调试 我们可以使用firefox的debug工 ...

  4. 【iOS 开发】iOS 开发 简介 (IOS项目文件 | MVC 模式 | 事件响应机制 | Storyboard 控制界面 | 代码控制界面 | Retina 屏幕图片适配)

    一. iOS 项目简介 1. iOS 文件简介 创建一个 HelloWorld 项目, 在这个 IOS 项目中有四个目录 : 如下图; -- HelloWorldTests 目录 : 单元测试相关的类 ...

  5. JS代码放置位置、变量与数据类型、运算符与逻辑表达运算符

    内容简要: 1.JS代码放置位置的问题: 2.变量与数据类型: 3.运算符与逻辑表达式的运算符   我的位置 全局问题:为何在网页推荐位置(一般在<head></head>内部 ...

  6. WEB开发：如何用js来模拟服务器的ajax响应，不依赖服务器来编写前端代码

    一.问题的提出 目前web前端开发,主流的思路是: 1)编写静态的html文件(不使用模板技术,与服务器无关) 2)页面通过ajax与服务器交互,进行数据的传输,数据格式为json格式 这里存在一个问 ...

  7. js模拟点击事件实现代码

    js模拟点击事件实现代码 类型:转载 时间:2012-11-06 在实际的应用开发中,我们会常常用到JS的模事件,比如说点击事件,举个简单的例子,点击表单外的"提交"按钮来提交表单 ...

  8. 通过js或jq增加的代码，点击事件或其他一些事件不起作用时

    通过js或jq增加的代码,点击事件或其他一些事件不起作用时,可使用 $(document).on("click",".noshow",function() { ...

  9. js代码点击触发事件

    js触发按钮点击事件 function load(){ //下面两种方法效果是一样的 document.getElementById("target").onclick(); do ...

随机推荐

  1. 使用ClipboardUtils兼容API LEVEL 11以下实现复杂粘贴

    实现功能:复杂粘贴内容 问题描述:android.content.ClipboardManager在APILevel 11之后才可以使用,而我们目前还要兼容API Level 10(2.3.3) 解决 ...

  2. JS区别不同浏览器（微信、手机等）

    最近一直在忙于自己公司的旅游产品,设计方面太广并且要兼容各种设备和场景,包括PC.Mobile.Pad.还有各种支付.由于微信支付和支付宝存在竞争,所以需要区别不同的浏览器,并且WEB项目还要出现在A ...

  3. 使用ueditor小结

    1. 导入 js: ueditor.config.js ueditor.all.js css/images/plugin: themes lang dialog(可选) third-party(可选) ...

  4. WCF实例上下文模式与并发模式对性能的影响

    实例上下文模式 InstanceContextMode 控制在响应客户端调用时,如何分配服务实例.InstanceContextMode 可以设置为以下值: •Single – 为所有客户端调用分配一 ...

  5. 15.6.8-sql小技巧

    取月头月尾: declare @someDay datetime,@firstDay datetime,@endDay datetime set @someDay='2015.2.2' ,) ,) s ...

  6. 即将放出ITSEC第一期所有培训视频

    课程大概被分为三个章节 客户端安全培训 安全工具培训 服务端安全培训   部分PPT                         详细课程表 FireBug代码调试工具使用:工具介绍 FireBu ...

  7. Etl之HiveSql调优(union all)

    相信在Etl的过程中不可避免的实用union all来拼装数据,那么这就涉及到是否并行处理的问题了. 在hive中是否适用并行map,可以通过参数来设定: set hive.exec.parallel ...

  8. 图解 & 深入浅出 JavaWeb：Servlet 再说几句

    Writer      :BYSocket(泥沙砖瓦浆木匠) 微         博:BYSocket 豆         瓣:BYSocket FaceBook:BYSocket Twitter   ...

  9. linux下批量查找/替换文本内容

    一般在本地电脑上批量替换文本有许多工具可以做到,比如sublime text ,但大多服务器上都是无图形界面的,为此收集了几条针对linux命令行 实现批量替换文本内容的命令: 1.批量查找某个目下文 ...

  10. 安卓开发笔记——关于照片墙的实现（完美缓存策略LruCache+DiskLruCache）

    这几天一直研究在安卓开发中图片应该如何处理,在网上翻了好多资料,这里做点小总结,如果朋友们有更好的解决方案,可以留言一起交流下. 内存缓存技术 在我们开发程序中要在界面上加载一张图片是件非常容易的事情 ...