一、实验 1:js脚本放在那里最合适?

1、代码

1.1、test.html

<!DOCTYPE html>
<html>
    <head>
        <title>我的第一个 JavaScript 程序</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <h1>测试Javascript的位置和函数绑定方式</h1>

<div id="myDiv1">
            <p>Look,I am here 1000 years!</p>
            <div id="myDiv11">MyDiv11::</div>
            <div id="myDiv12">MyDiv12::</div>
        </div>

<button id="myBtn1">添加按钮1</button>
        <button id="myBtn2" onclick="var espan=document.createElement('span');espan.innerHTML='添加方式2->';document.getElementById('myDiv12').appendChild(espan);">添加按钮2</button>

</body>
</html>

1.2、test.js

<!-- 这段js代码如果放在head部,自顶向下执行时还没有myBtn1按钮,会绑定失败!-->
<script>
var myFun1 = function(){
debugger;
var mySpan = document.createElement("span");
mySpan.innerHTML="添加方式1->";
document.getElementById("myDiv11").appendChild(mySpan);
}
var myBtn1 = document.getElementById("myBtn1");
//alert(myBtn1);
//myBtn1.onclick="myFun1()"; // 错误方式1:标签里才可以这么写一句或多句脚本,用分号隔开,一句分号可以省略
//myBtn1.onclick="myFun1();"; // 错误方式2:标签里才可以这么写一句或多句脚本,用分号隔开,一句分号可以省略
//myBtn1.onclick=myFun1(); // 错误方式3:函数会立刻执行,并将返回值赋给onclick
myBtn1.onclick=myFun1;
</script>

2、这段代码放到head里面就不能运行。为什么?

这就要说一下HTML的运行顺序了,应该确切点说不是HTML的运行顺序,是js的运行顺序。

浏览器执行HTML页面代码是自顶向下执行的,运行到<script></script>时开始执行脚本。

  • 首先,浏览器将函数定义赋值给了myFun1,这时函数本身并不会运行
  • 接着,浏览器试图从页面获取元素Id为myBtn1的元素,但是这时候HTML页面并没有加载完,肯定取不到id为btn的元素。
  • 所以,绑定行数也会失败myBtn1.onclick=myFun1;(但是浏览器并木有报绑定失败!!!)

二、实验 2:函数的绑定时机

事件绑定方式常用有两种

  • 方式一:在事件中加入js代码。如:onclick="test();"。这种绑定方式有缺点,就是你要修改美工已经写好的代码。
  • 方式二:通过id绑定,参见实验一,只需要将每个元素都加上id,不需要修改HTML代码。

1、方式一:在事件中加入js代码,如:onclick="myFun1()"

我们可以在事件中写函数或脚本,脚本之间要用分号隔开。

  • <button id="btn" onclick="myFun1()">按钮</button>
  • <button id="btn" onclick="myFun1();">按钮</button>
  • <button id="btn" onclick="var espan = document.createElement('span');espan.innerHTML='添加';document.getElementById('target').appendChild(espan);">按钮</button>

js代码每一行都有分号,分号的作用就是为了语句被混淆,也就是说onclick里面可以写js代码。

2.2、方式二:document.getElementById("btn").onclick=test;

以下是正确的方式:

  • document.getElementById("btn").onclick=test;

以下是错误的方式:

  • myBtn1.onclick="myFun1()"; // 错误方式1:标签里才可以这么写一句或多句脚本,用分号隔开,一句分号可以省略
  • myBtn1.onclick="myFun1();"; // 错误方式2:标签里才可以这么写一句或多句脚本,用分号隔开,一句分号可以省略
  • myBtn1.onclick=myFun1(); // 错误方式3:函数会立刻执行,并将返回值赋给onclick

错误分析:

如果修改为document.getElementById("btn").onclick=test(); ,会导致如下问题发生:

  • 赋值时就调用了函数,赋的值是函数的返回值
  • 后来调用onclick触发事件时,执行的是函数返回值。
  • 所以只有不加括号时,触发事件才会执行函数本身。

javascript学习(1)用户的Javascript 放在哪里和函数的绑定方式的更多相关文章

  1. JavaScript学习总结(十二)——JavaScript编写类

    在工作中经常用到JavaScript,今天总结一下JavaScript编写类的几种写法以及这几种写法的优缺点,关于JavaScript编写类的方式,在网上看到很多,而且每个人的写法都不太一样,经常看到 ...

  2. 1.1(JavaScript学习笔记)、JavaScript基础

    一.JavaScript简介 JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型. 它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端 ...

  3. JavaScript 学习之第一篇JavaScript的数据类型(2016/8/29 晚 23:12)

    1. JavaScript的数据类型 JavaScript 里面有6中数据类型 Boolean String Number Undefined Null Object object(对象)类型包含了数 ...

  4. JavaScript学习系列2一JavaScript中的变量作用域

    在写这篇文章之前,再次提醒一下 JavaScript 是大小写敏感的语言 // 'test', 'Test', 'TeSt' , 'TEST' 是4个不同的变量名 JavaScript中的变量,最重要 ...

  5. JavaScript学习总结(二十三)——JavaScript 内存泄漏教程

    参考教程:http://www.ruanyifeng.com/blog/2017/04/memory-leak.html 一.什么是内存泄漏? 程序的运行需要内存.只要程序提出要求,操作系统或者运行时 ...

  6. JavaScript学习笔记——1.了解JavaScript

    百度百科: JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果.通常JavaScript脚本是通过嵌入在HT ...

  7. Javascript学习笔记2.2 Javascript与DOM选项卡(滑动门)案例详解

    学习了DOM的知识,今天开始做些练习,想到了一个网页滑动门的特效,见下图: 1.通过建立索引实现 <!doctype html> <html> <head> < ...

  8. JavaScript学习总结(十六)——Javascript闭包(Closure)

    原文地址: http://www.cnblogs.com/xdp-gacl/p/3703876.html 闭包(closure)是Javascript语言的一个难点,也是它的特色, 很多高级应用都要依 ...

  9. JavaScript学习总结(十四)——JavaScript编写类的扩展方法

    在​J​a​v​a​S​c​r​i​p​t​中​可以使​用​类的p​r​o​t​o​t​y​p​e属性来​扩​展​类的属​性​和​方​法,在实际开发当中,当JavaScript内置的那些类所提供的动态 ...

随机推荐

  1. day6 bytes类型用法

    1 python2与3的区别 一编码方式:  python2是由ascii编码组成    python3是由unicode编码的 二字符串输出   python2中字符串不添加括号也可以打印    p ...

  2. syskey——让你的电脑更加安全

    我之前介绍过一个绕过系统登录密码的工具kon-boot,今天介绍的就是可以防止这个工具的方法,也能让你的电脑更加的安全. 这个方法也是我在Youtube上看见的一个方法,还是不错. 方法: win+R ...

  3. 【Unity3D与23种设计模式】模板方法模式(Template Method)

    GoF中定义: "在一个操作方法中定义算法的流程,其中某些步骤由子类完成. 模板方法模式让子类在不变更原有算法流程的情况下,还能够重新定义其中的步骤" 每一次武器攻击目标时,都要按 ...

  4. 用于 SELECT 和 WHERE 子句的函数

    一个 SQL 语句中的 select_expression 或 where_definition 可由任何使用了下面所描述函数的表达式组成. 包含 NULL 的表达式总是得出一个 NULL 值结果,除 ...

  5. Windows Server 2019 预览版介绍

    在Windows server 2012.Windows server 2016还未完全普及的情况下,昨天Windows Server团队宣布Windows Server 2019将在2018年的下半 ...

  6. Greetings

    1,Common English Greetings Hey! Hey man! Hey girl! Hi. How's it going? How are you doing? What's up? ...

  7. Mycat 分片规则详解--范围取模分片

    实现方式:该算法先进行范围分片,计算出分片组,组内在取模 优点:综合了范围分片和取模分片的优点,分片组内使用取模可以保证组内的数据分布比较均匀,分片组之间采用范围分片可以兼顾范围分片的特点,事先规划好 ...

  8. 笔记:Spring Cloud Eureka 常用配置及说明

    配置参数 默认值 说明 服务注册中心配置    Bean类:org.springframework.cloud.netflix.eureka.server.EurekaServerConfigBean ...

  9. c++ --> c++中四种类型转换方式

    c++中四种类型转换方式   c风格转换的格式很简单(TYPE)EXPRESSION,但是c风格的类型转换有不少缺点, 1)它可以在任意类型之间转换,比如你可以把一个指向const对象的指针转换成指向 ...

  10. JDK1.8源码(五)——java.util.ArrayList 类

    关于 JDK 的集合类的整体介绍可以看这张图,本篇博客我们不系统的介绍整个集合的构造,重点是介绍 ArrayList 类是如何实现的. 1.ArrayList 定义 ArrayList 是一个用数组实 ...