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" 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"); // 第二步:给按钮对象的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(因为代码执行到此处的时候id="btn"的元素还没有加载到内存) // 第二步:给节点对象绑定事件 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" id="btn" /> </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函数注册给了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>
设置节点属性
<!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" id="mytext"/> <input type="button" value="将文本框修改为复选框" id="btn"/> </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" id="username"/> </body> </html>