目录
3.3 innerHTML和innerText属性来操作div和span
2.JavaScript的基本语法(ECMAScript)
2.5 事件
2.5.1 常用事件及事件注册方式
JS中的常用事件:
1.blur:失去焦点
2.focus:获得焦点
3.click:鼠标单击
4.dblclick:鼠标双击
5.keydown:键盘按下
6.keyup:键盘弹起
7.mousedown:鼠标按下
8.mouseover:鼠标经过
9.mousemove:鼠标移动
10.mouseout:鼠标离开
11.mouseup:鼠标弹起
12.reset:表单重置
13.submit:表单提交
14.change:下拉列表选中项改变,或文本框内容改变
15.load:页面加载完毕
16.select:文本备选定
任何一个事件都会对应一个事件句柄,事件句柄就是在事件前添加on。onXXX这个事件句柄出现在一个标签的属性位置上,事件句柄以属性的形式存在。
事件发生会触发回调函数,回调函数的特点就是自己把函数代码写出来了,但是这个函数不是自己负责调用,由其他程序负责调用该函数。
注册事件的两种方式:
①直接在标签中使用事件句柄
②使用纯JS代码完成事件的注册。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS的常用事件</title>
</head>
<body>
<script type="text/javascript">
//对于当前程序来说,sayHello函数被称为回调函数(callback函数)
//回调函数的特点:自己把这个函数代码写出来了,但是这个函数不是自己负责调用,由其他程序负责调用该函数。
function sayHello() {
alert("hello js!");
}
</script>
<!--注册时间的第一种方式,直接在标签中使用事件句柄-->
<!--以下代码的含义是:将sayHello函数注册到按钮上,等待click事件发生之后,该函数被浏览器调用。我们称这个函数为回调函数。-->
<input type="button" value="hello" onclick="sayHello()"/>
<input type="button" value="hello2" id="mybtn"/>
<input type="button" value="hello3" id="mybtn1"/>
<input type="button" value="hello4" id="mybtn2"/>
<script type="text/javascript">
function doSome() {
alert("do some!");
}
/*
第二种注册事件的方式,是使用纯JS代码完成事件的注册。
*/
//第一步:先获取这个按钮对象(document是全部小写,内置对象,可以直接用,document就代表整个HTML页面)
var btnObj = document.getElementById("mybtn");//通过id去获取这个元素
//第二步:给按钮对象的onclick属性赋值
btnObj.onclick = doSome;//注意:千万别加小括号。btnObj.onclick = doSome();这是错误的写法。
var mybtn1 = document.getElementById("mybtn1");
mybtn1.onclick = function () {//这个函数没有名字,叫做匿名函数,这个匿名函数也是一个回调函数。
//这个函数在页面打开的时候只是注册上,不会被调用,在click事件发生之后才会调用。
alert("test...");
}
document.getElementById("mybtn2").onclick = function () {
alert("test2....");
}
</script>
</body>
</html>
2.5.2 代码的执行顺序
加一个页面加载完毕事件load。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS代码的执行顺序</title>
</head>
<body>
<script type="text/javascript">
/*
window.onload = ready;//页面全部加载完成之后才会执行ready函数。
function ready() {
var btn = document.getElementById("btn");
btn.onclick = function () {
alert("hello js");
}
}
*/
//页面加载的过程中,将a函数注册给了load事件
//页面加载完毕之后,load事件发生了,此时执行回调函数a
//回调函数a执行的过程中,把b函数注册给了id = "btn"的click事件
//当id="btn"的节点发生click事件之后,b函数被调用并执行。
window.onload = function () {//这个回调函数叫做a
document.getElementById("btn").onclick = function () {//这个回调函数叫做b
alert("hello js");
}
}
</script>
<input type="button" value="hello" id="btn"/>
</body>
</html>
2.5.3 设置节点的属性
通过id获得这个元素后,可以使用"."来访问该元素的属性,对属性值进行修改。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS代码设置节点的属性</title>
</head>
<body>
<script type="text/javascript">
window.onload = function () {
document.getElementById("btn").onclick = function () {
var mytext = document.getElementById("mytext");
//一个节点对象中只要有的属性都可以"."
mytext.type = "checkbox";
}
}
</script>
<input type="text" id="mytext"/>
<input type="button" value="将文本框修改为复选框" id="btn"/>
</body>
</html>
2.5.4 捕捉键盘按下事件
捕捉回车键。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS代码捕捉回车键</title>
</head>
<body>
<script type="text/javascript">
window.onload = function () {
var uesenameElt = document.getElementById("username");
//回车键的键值是13,ESC键的键值是27
/*
uesenameElt.onkeydown = function (a,b) {
alert(a);//[object KeyboardEvent] 在发生这个事件的时候,浏览器会new一个对象,然后将这个对象传回来
alert(b);//undefined
}
*/
/*
uesenameElt.onkeydown = function (event) {
//获取键值
//对于"键盘事件对象"来说,都有keyCode属性用来获取键值。
alert(event.keyCode);
}
*/
uesenameElt.onkeydown = function (event) {
if(event.keyCode === 13){
alert("正在进行验证");
}
}
}
</script>
<input type="text" id="username"/>
</body>
</html>
2.6 void运算符
语法格式:void(表达式)