JavaScript笔记--- ECMAScript(续) (JS事件；JS代码的执行顺序；设置节点属性；捕捉回车键；void 运算符；JS中的控制语句)
Posted 猿头猿脑的王狗蛋
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript笔记--- ECMAScript(续) (JS事件；JS代码的执行顺序；设置节点属性；捕捉回车键；void 运算符；JS中的控制语句)相关的知识，希望对你有一定的参考价值。
任何一个事件都会对应一个事件句柄，事件句柄是在事件前添加on，onXXX这个事件句柄出现在一个标签的属性位置上（事件句柄以属性的形式存在）......
一、JS 事件：
1、任何一个事件都会对应一个事件句柄，事件句柄是在事件前添加on，onXXX这个事件句柄出现在一个标签的属性位置上（事件句柄以属性的形式存在）。
2、JS 中的事件：
blur失去焦点
focus获得焦点
click鼠标单击
dblclick鼠标双击
keydown键盘按下
keyup键盘弹起
mousedown鼠标按下
mouseover鼠标经过
mousemove鼠标移动
mouseout鼠标离开
mouseup鼠标弹起
reset表单重置
submit表单提交
change下拉列表选中项改变，或文本框内容改变
select文本被选定
load页面加载完毕（整个HTML页面中所有的元素全部加载完毕之后发生）
3、回调函数：
<script type="text/javascript">
/*
对于当前程序来说,sayHello函数被称为回调函数(callback函数)
回调函数的特点:自己把这个函数代码写出来了,由其他程序负责调用该函数.
*/
function sayHello()
alert("hello js!");
</script>
4、注册事件的第一种方式：
<body>
<!--
注册事件的第一种方式，直接在标签中使用事件句柄
以下代码的含义是：将sayHello函数注册到按钮上，等待click事件发生之后，该函数被浏览器调用(此函数为回调函数）
-->
<input type="button" value="hello" onclick="sayHello()"/>
</body>
注册事件的第二种方式：
<script type="text/javascript">
/*
第二种注册事件的方式，是使用纯JS代码完成事件的注册。
*/
function doSome()
alert("do some!");
// 第一步:先获取这个按钮对象(document是全部小写，内置对象，可以直接用，document就代表整个HTML页面)
var btnObj = document.getElementById("mybtn");//"mybtn"为元素id
// 第二步:给按钮对象的onclick属性赋值,这行代码的含义是,将回调函数doSome注册到click事件上.
btnObj.onclick = doSome; // 注意:千万别加小括号. btnObj.onclick = doSome();这是错误的写法.
</script>后记：
<script type="text/javascript">
var mybtn1 = document.getElementById("mybtn1");
// 这个函数在页面打开的时候只是注册上,不会被调用,在click事件发生之后才会调用.
mybtn1.onclick = function() // 此函数没有名字,叫做匿名函数,也是一个回调函数.
alert("test..........");
//合并后的JS代码:
document.getElementById("mybtn2").onclick = function()
alert("test22222222.........");
</script>
二、JS 代码的执行顺序：
1、load 事件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>load事件</title>
</head>
<!-- load事件什么时候发生？页面全部元素加载完毕之后才会发生-->
<body onload="ready()">
<script type="text/javascript">
/*
第一步:根据id获取节点对象
var btn = document.getElementById("btn");//返回null(因为代码执行到此处的时候id="btn"的元素还没有加载到内存)
第二步:给节点对象绑定事件
btn.onclick = function()
alert("hello js");
*/
//ready函数内的代码在页面元素全部加载完成之后才会执行
function ready()
var btn = document.getElementById("btn");
btn.onclick = function()
alert("hello js");
</script>
<input type="button" value="hello" id="btn" />
</body>
</html>
2、HTML 代码执行顺序：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS代码的执行顺序</title>
</head>
<body>
<script type="text/javascript">
//此回调函数为a函数
window.onload = function()
document.getElementById("btn").onclick = function()//此回调函数为b
alert("hello js..........");
/*
页面加载的过程中,将a函数注册给了load事件
页面加载完毕（load事件发生）,此时执行回调函数a
回调函数a执行的过程中,把b函数注册给了id="btn"的click事件
当id="btn"的节点发生click事件之后,b函数被调用并执行.
*/
</script>
<input type="button" value="hello" id="btn" />
</body>
</html>
三、JS 代码设置节点的属性：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS代码设置节点的属性</title>
</head>
<body>
<script type="text/javascript">
window.onload = function()
//获取 btn对象,目的是设置“btn按钮"的onclick(功能为将文本框修改为复选框)
document.getElementById("btn").onclick = function()
//获取 mytext对象,目的是修改"mytext文本框"为复选框
var mytext = document.getElementById("mytext");
//节点对象中只要有的属性都可以"."出来
mytext.type = "checkbox";
</script>
<input type="text" id="mytext"/>
<input type="button" value="将文本框修改为复选框" id="btn"/>
</body>
</html>
四、JS代码捕捉回车键：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS代码捕捉回车键</title>
</head>
<body>
<script type="text/javascript">
window.onload = function()
var usernameElt = document.getElementById("username");
/*
回车键的键值是13
ESC键的键值是27
usernameElt.onkeydown = function(event)
//获取键值，对于“键盘事件对象"来说,有keyCode属性用来获取键值.
alert(event.keyCode);
*/
usernameElt.onkeydown = function(event)
if(event.keyCode === 13)
alert("正在进行验证....");
</script>
<input type="text" id="username"/>
</body>
</html>
五、JS 的void运算符：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS的void运算符</title>
</head>
<body>
<!--
void运算符的语法：void(表达式)
运算原理：执行表达式，但不返回任何结果。
javascript:void(0)
其中javascript:作用是告诉浏览器后面是一段JS代码(不能省略)
-->
<!--void() 这个小括号当中必须有表达式，里面的值不影响效果-->
<a href="javascript:void(0)" onclick="window.alert(\'test code\')">
既保留住超链接的样式，同时用户点击该超链接的时候执行一段JS代码，但页面还不能跳转。
</a>
<br>
<a href="javascript:void(100)" onclick="window.alert(\'test code\')">
既保留住超链接的样式，同时用户点击该超链接的时候执行一段JS代码，但页面还不能跳转。
</a>
</body>
</html>
六、JS 中的控制语句：
1、if
2、switch
3、while
4、do .. while..
5、for循环
6、break
7、continue
8、for..in语句（了解）
9、with语句（了解）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS的控制语句</title>
</head>
<body>
<script type="text/javascript">
// 创建JS数组
var arr = [false,true,1,2,"abc",3.14]; // JS中数组中元素的类型随意.元素的个数随意.
//for循环
for(var i = 0; i < arr.length; i++)
alert(arr[i]);
//for..in(i代表下标)循环
for(var i in arr)
//alert(i);
alert(arr[i]);
// for..in语句可以遍历对象的属性
User = function(username,password)
this.username = username;
this.password = password;
var u = new User("张三", "444");
alert(u.username + "," + u.password);
alert(u["username"] + "," + u["password"]);
for(var shuXingMing in u)
//alert(shuXingMing)
//alert(typeof shuXingMing) // shuXingMing是一个字符串
alert(u[shuXingMing]);
//u代表以下"元素"自带"u.“"
with(u)
alert(username + "," + password);
</script>
</body>
</html>
以上是关于JavaScript笔记--- ECMAScript(续) (JS事件；JS代码的执行顺序；设置节点属性；捕捉回车键；void 运算符；JS中的控制语句)的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Internet Explorer 浏览器的 JavaScript 中修复数组 indexOf()