JavaScript 基础语法 给节点注册事件
ps:DOM编程的一些前置知识点
常用事件和注册事件的两种方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS的常用事件</title>
</head>
<body>
<script type="text/javascript">
/*
JS中的事件：
blur失去焦点
focus获得焦点
click鼠标单击
dblclick鼠标双击
keydown键盘按下
keyup键盘弹起
mousedown鼠标按下
mouseover鼠标经过
mousemove鼠标移动
mouseout鼠标离开
mouseup鼠标弹起
reset表单重置
submit表单提交
change下拉列表选中项改变，或文本框内容改变
select文本被选定
load页面加载完毕（整个HTML页面中所有的元素全部加载完毕之后发生。）
任何一个事件都会对应一个事件句柄，事件句柄是在事件前添加on。
onXXX这个事件句柄出现在一个标签的属性位置上。（事件句柄以属性的形式存在。）
*/
// 对于当前程序来说,sayHello函数被称为回调函数(callback函数)
// 回调函数的特点:自己把这个函数代码写出来了,但是这个函数不是自己负责调用,由其他程序负责调用该函数.
function sayHello(){
alert("hello js!");
}
</script>
<!--注册事件的第一种方式，直接在标签中使用事件句柄-->
<!--以下代码的含义是：将sayHello函数注册到按钮上，等待click事件发生之后，该函数被浏览器调用。我们称这个函数为回调函数。-->
<input type="button" value="hello" onclick="sayHello()"/>
<input type="button" value="hello2" />
<input type="button" value="hello3" />
<input type="button" value="hello4" />
<script type="text/javascript">
function doSome(){
alert("do some!");
}
/*
第二种注册事件的方式，是使用纯JS代码完成事件的注册。
*/
// 第一步:先获取这个按钮对象(document是全部小写，内置对象，可以直接用，document就代表整个HTML页面)
var btnObj = document.getElementById("mybtn");
// 第二步:给按钮对象的onclick属性赋值
btnObj.onclick = doSome; // 注意:千万别加小括号. btnObj.onclick = doSome();这是错误的写法.
// 这行代码的含义是,将回调函数doSome注册到click事件上.
var mybtn1 = document.getElementById("mybtn1");
mybtn1.onclick = function(){ // 这个函数没有名字,叫做匿名函数,这个匿名函数也是一个回调函数.
alert("test.........."); // 这个函数在页面打开的时候只是注册上,不会被调用,在click事件发生之后才会调用.
}
document.getElementById("mybtn2").onclick = function(){
alert("test22222222.........");
}
</script>
</body>
</html>JS代码的执行顺序——页面加载完成后给节点注册事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS代码的执行顺序</title>
</head>
<!-- load事件什么时候发生？页面全部元素加载完毕之后才会发生。-->
<body onload="ready()">
<script type="text/javascript">
/*
// 第一步:根据id获取节点对象
var btn = document.getElementById("btn"); // 返回null(因为代码执行到此处的时候的元素还没有加载到内存)
// 第二步:给节点对象绑定事件
btn.onclick = function(){
alert("hello js");
}
*/
function ready(){
var btn = document.getElementById("btn");
btn.onclick = function(){
alert("hello js");
}
}
</script>
<input type="button" value="hello" />
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS代码的执行顺序</title>
</head>
<body>
<script type="text/javascript">
// 页面加载的过程中,将a函数注册给了load事件
// 页面加载完毕之后,load事件发生了,此时执行回调函数a
// 回调函数a执行的过程中,把b函数注册给了的click事件
// 当的节点发生click事件之后,b函数被调用并执行.
window.onload = function(){ // 这个回调函数叫做a
document.getElementById("btn").onclick = function(){ // 这个回调函数叫做b
alert("hello js..........");
}
}
</script>
<input type="button" value="hello" />
</body>
</html>设置节点属性
<!DOCTYPE html>
<html>
<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" />
<input type="button" value="将文本框修改为复选框" />
</body>
</html>捕捉按键(以回车键为例)
<!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(a, b, c){
// 获取键值
// alert(a); // [object KeyboardEvent]
// alert(b);
// alert(c);
}
*/
/*
usernameElt.onkeydown = function(event){
// 获取键值
// 对于“键盘事件对象"来说,都有keyCode属性用来获取键值.
alert(event.keyCode);
}
*/
usernameElt.onkeydown = function(event){
if(event.keyCode === 13){
alert("正在进行验证....");
}
}
}
</script>
<input type="text" />
</body>
</html>