javascript学习(1)用户的Javascript 放在哪里和函数的绑定方式
一、实验 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 放在哪里和函数的绑定方式的更多相关文章
- JavaScript学习总结(十二)——JavaScript编写类
在工作中经常用到JavaScript,今天总结一下JavaScript编写类的几种写法以及这几种写法的优缺点,关于JavaScript编写类的方式,在网上看到很多,而且每个人的写法都不太一样,经常看到 ...
- 1.1(JavaScript学习笔记)、JavaScript基础
一.JavaScript简介 JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型. 它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端 ...
- JavaScript 学习之第一篇JavaScript的数据类型(2016/8/29 晚 23:12)
1. JavaScript的数据类型 JavaScript 里面有6中数据类型 Boolean String Number Undefined Null Object object(对象)类型包含了数 ...
- JavaScript学习系列2一JavaScript中的变量作用域
在写这篇文章之前,再次提醒一下 JavaScript 是大小写敏感的语言 // 'test', 'Test', 'TeSt' , 'TEST' 是4个不同的变量名 JavaScript中的变量,最重要 ...
- JavaScript学习总结(二十三)——JavaScript 内存泄漏教程
参考教程:http://www.ruanyifeng.com/blog/2017/04/memory-leak.html 一.什么是内存泄漏? 程序的运行需要内存.只要程序提出要求,操作系统或者运行时 ...
- JavaScript学习笔记——1.了解JavaScript
百度百科: JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果.通常JavaScript脚本是通过嵌入在HT ...
- Javascript学习笔记2.2 Javascript与DOM选项卡(滑动门)案例详解
学习了DOM的知识,今天开始做些练习,想到了一个网页滑动门的特效,见下图: 1.通过建立索引实现 <!doctype html> <html> <head> < ...
- JavaScript学习总结(十六)——Javascript闭包(Closure)
原文地址: http://www.cnblogs.com/xdp-gacl/p/3703876.html 闭包(closure)是Javascript语言的一个难点,也是它的特色, 很多高级应用都要依 ...
- JavaScript学习总结(十四)——JavaScript编写类的扩展方法
在JavaScript中可以使用类的prototype属性来扩展类的属性和方法,在实际开发当中,当JavaScript内置的那些类所提供的动态 ...
随机推荐
- day6 bytes类型用法
1 python2与3的区别 一编码方式: python2是由ascii编码组成 python3是由unicode编码的 二字符串输出 python2中字符串不添加括号也可以打印 p ...
- syskey——让你的电脑更加安全
我之前介绍过一个绕过系统登录密码的工具kon-boot,今天介绍的就是可以防止这个工具的方法,也能让你的电脑更加的安全. 这个方法也是我在Youtube上看见的一个方法,还是不错. 方法: win+R ...
- 【Unity3D与23种设计模式】模板方法模式(Template Method)
GoF中定义: "在一个操作方法中定义算法的流程,其中某些步骤由子类完成. 模板方法模式让子类在不变更原有算法流程的情况下,还能够重新定义其中的步骤" 每一次武器攻击目标时,都要按 ...
- 用于 SELECT 和 WHERE 子句的函数
一个 SQL 语句中的 select_expression 或 where_definition 可由任何使用了下面所描述函数的表达式组成. 包含 NULL 的表达式总是得出一个 NULL 值结果,除 ...
- Windows Server 2019 预览版介绍
在Windows server 2012.Windows server 2016还未完全普及的情况下,昨天Windows Server团队宣布Windows Server 2019将在2018年的下半 ...
- Greetings
1,Common English Greetings Hey! Hey man! Hey girl! Hi. How's it going? How are you doing? What's up? ...
- Mycat 分片规则详解--范围取模分片
实现方式:该算法先进行范围分片,计算出分片组,组内在取模 优点:综合了范围分片和取模分片的优点,分片组内使用取模可以保证组内的数据分布比较均匀,分片组之间采用范围分片可以兼顾范围分片的特点,事先规划好 ...
- 笔记:Spring Cloud Eureka 常用配置及说明
配置参数 默认值 说明 服务注册中心配置 Bean类:org.springframework.cloud.netflix.eureka.server.EurekaServerConfigBean ...
- c++ --> c++中四种类型转换方式
c++中四种类型转换方式 c风格转换的格式很简单(TYPE)EXPRESSION,但是c风格的类型转换有不少缺点, 1)它可以在任意类型之间转换,比如你可以把一个指向const对象的指针转换成指向 ...
- JDK1.8源码(五)——java.util.ArrayList 类
关于 JDK 的集合类的整体介绍可以看这张图,本篇博客我们不系统的介绍整个集合的构造,重点是介绍 ArrayList 类是如何实现的. 1.ArrayList 定义 ArrayList 是一个用数组实 ...