一、BOM
1. BOM 介绍
BOM全称为“Browser Object Model”，浏览器对象模型。提供一系列操作浏览器的属性和方法。核心对象为window对象，不需要手动创建，跟随网页运行自动产生，直接使用，在使用时可以省略书写。
2. window对象常用方法
1）网页弹框
alert() //警告框 //只能接收一个参数，且无返回值 alert('操作无效'); prompt() //带输入框的弹框 //可以接收两个参数('提示信息',输入框的默认值) var r = prompt('请输入',0); confirm() //确认框 //返回布尔值false true var r = confirm('是否确认');
2）窗口的打开和关闭
全局变量和和全局函数都是window对象的属性和方法。
var a = 100; function a1(){ console.log('a1被调用'); } console.log(a,window.a);//100 100 a1(); //a1被调用 window.a1(); //a1被调用
window.open("URL") //新建窗口访问指定的URL
window.close() //关闭当前窗口
//给出确认框，当点击确定时打开目标文件，点击取消时关闭当前窗口 var r= confirm(''); if(r){ window.open('http://www.baidu.com'); }else{ window.close(); }
3）定时器方法
1.间歇调用(周期性定时器)
作用：每隔一段时间就执行一次代码
开启定时器:
var timerID = setInterval(function,interval); /* 参数 : function : 需要执行的代码,可以传入函数名;或匿名函数 interval : 时间间隔,默认以毫秒为单位 1s = 1000ms 返回值 : 返回定时器的ID,用于关闭定时器 */
关闭定时器 :
//关闭指定id对应的定时器 clearInterval(timerID);
<body>
<button id="start">开启</button>
<button id="stop1">关闭</button>
<script>
var timer;
start.onclick=function(){
//开启定时器
timer=setInterval(function(){
//打印日期时间（date）
var date = new Date();
console.log(date);
},1000);//1000毫秒
console.log('--测试--')
}
stop1.onclick=function(){
//关闭间歇调用
clearInterval(timer);
}
</script>
</body>
练习：控制台5秒的倒计时
<body>
<button id="start">开启</button>
<button id="stop1">关闭</button>
<h1 style="text-align:center;" id="show"></h1>
<script>
var i = 5;
show.innerHTML = i;
var timerID=setInterval(function(){
//开启计时
i--;
if(i!=0){
show.innerHTML=i;
}else{
show.innerHTML='倒计时结束!';
clearInterval(timerID);
}
},1000);
</script>
</body>
2.超时调用(一次性定时器)
作用：等待多久之后执行一次代码
//开启超时调用: var timerId = setTimeout(function,timeout); //关闭超时调用: clearTimeout(timerId);
<body>
<button id="start">开启</button>
<button id="stop1">关闭</button>
<script>
start.onclick=function(){
//开启超时调用
timer = setTimeout(function(){
console.log('超时调用');
},1000)
};
stop1.onclick=function(){
//关闭超时调用
clearTimeout(timer);
};
</script>
</body>
window 对象常用属性
window的大部分属性又是对象类型
1）history
作用：保存当前窗口所访问过的URL
属性 : length 表示当前窗口访问过的URL数量
方法 :
back() 对应浏览器窗口的后退按钮,访问前一个记录
forward() 对应前进按钮,访问记录中的下一个URL
go(n) 参数为number值,翻阅几条历史记录，正值表示前进,负值表示后退
历史记录的长度变化：
1. 通过超链接在当前窗口访问其他URL，会造成历史记录增加；
2. 前进和后退不会造成历史记录的变化，只是指针的移动；
3. 历史记录的进出栈管理：
a->b->c
从页面c后退值页面a,在a中通过超链接跳转至页面c
a->c
<a href="exercise.html">页面1</a>
<button onclick="console.log(history.length)">
获取length
</button>
<button onclick="history.back()">返回</button>
<button onclick="history.forward">前进</button>
<button onclick="history.go(1)">go(1)</button>前进
<button onclick="history.go(-1)">go(-1)</button>返回
<button onclick="history.go(2)">go(2)</button>前进2
<button onclick="history.go(-2)">go(-2)</button>返回2
2）location
作用：保存当前窗口的地址栏信息(URL)
属性 :href 设置或读取当前窗口的地址栏信息
方法 :
reload(param) 重载页面(刷新)
参数为布尔值，默认为false，表示从缓存中加载，设置为true,强制从服务器根目录加载
<body>
<!--设置或读取窗口的地址栏信息-->
<button onclick="console.log(location.href);">
获取href
</button>
<button onclick="location.href='http://www.tmooc.cn/'">
设置href
</button>
<!--reload(false)默认从缓存中重载页面，设置为true,表示从服务器根目录重载页面-->
<button onclick="location.reload(true)">刷新</button>
</body>
3）document
提供操作文档HTML 文档的方法，,参见DOM
二、DOM节点操作
DOM全称为“Document Object Model”，文档对象模型，提供操作HTML文档的方法。（注：每个html文件在浏览器中都视为一篇文档,操作文档实际就是操作页面元素。）
1）节点对象
JS 会对html文档中的元素，属性，文本内容甚至注释进行封装，称为节点对象，提供相关的属性和方法。
2）常用节点分类
- 元素节点 ( 操作标签）
- 属性节点（操作标签属性）
- 文本节点（操作标签的文本内容）
//创建index.js文件获取元素 function $(tag,index){//变量声明未赋值默认为undefined var elem; if(index){ elem = document.getElementsByTagName(tag)[index]; }else{//index=0或index=undefined elem = document.getElementsByTagName(tag)[0]; } return elem; }
3）获取元素节点
1.根据标签名获取元素节点列表
var elems = document.getElementsByTagName("");
参数 : 标签名
返回值 : 节点列表,需要从节点列表中获取具体的元素节点对象
<head>
<script src="index.js"></script>
</head>
<body>
<h1>人生苦短,我学Python</h1>
<script>
//获取元素节点
var h1 = $('h1');
console.log(h1);
</script>
</body>
---------------------
<h1>人生苦短,我学Python</h1>
2.根据class属性值获取元素节点列表
var elems = document.getElementsByClassName("");
参数 : 类名(class属性值)
返回值 : 节点列表
<head>
<script src="index.js"></script>
</head>
<body>
<h1>人生苦短,我学Python</h1>
<script>
var h1 = $('h1');
//获取元素节点
h1.setAttribute('class','c1');
console.log(h1);
console.log(h1.getAttribute('class')); //c1
</script>
</body>
---------------------
<h1 class="c1">人生苦短,我学Python</h1>
3.根据id属性值取元素节点
var elem = document.getElementById("");
参数 : id属性值
返回值 : 元素节点
<head>
<script src="index.js"></script>
</head>
<body>
<h1>人生苦短,我学Python</h1>
<script>
var h1 = $('h1');
//获取元素节点
//为元素添加属性,参数为属性名和属性值
h1.setAttribute('id','d1');
console.log(h1);
console.log(h1.getAttribute('id')); //d1
</script>
</body>
---------------------
<h1 id="d1">人生苦短,我学Python</h1>
4.根据name属性值取元素列表
var elems = document.getElementsByName("");
参数 : name属性值
返回 : 节点列表
<head>
<script src="index.js"></script>
</head>
<body>
<h1>人生苦短,我学Python</h1>
<script>
var h1 = $('h1');
//点语法
h1.id='d1';
h1.className='c1 c2';
//获取元素节点
console.log(h1.id) //d1
console.log(h1.className) //c1 c2
console.log(h1)
//<h1 id="d1" class="c1 c2">人生苦短,我学Python</h1>
h1.id = '';
h1.className = null;
console.log(h1.id) //空
console.log(h1.className) //null
console.log(h1)
//<h1 id class="null">人生苦短,我学Python</h1>
//根据指定的属性名返回对应属性值
console.log(h1.getAttribute('class')); //null
//移除指定属性
h1.removeAttribute("id");
console.log(h1);
//<h1 class="null">人生苦短,我学Python</h1>
</script>
</body>
4）操作元素内容
元素节点对象提供了以下属性来操作元素内容
innerHTML : 读取或设置元素文本内容,可识别标签语法
innerText : 设置元素文本内容,不能识别标签语法
value : 读取或设置表单控件的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 class="c1" id="d1">Fine,Thank U,and you</h1>
<h1 class="c1" id="d2">岁月静好,感恩有你,与你相随</h1>
<input type="text" name="username" value="">
<button id="btn">取值</button>
<div id="show"></div>
<script>
//获取元素的操作只能等待标签解析完毕后执行
//1.根据标签名获取元素
var list1 = document.getElementsByTagName('h1');
console.log(list1);
console.log(list1[0],list1[0].innerHTML);
console.log('---------------------')
//2.根据class属性值获取元素
var list2 = document.getElementsByClassName('c1');
console.log(list2);
console.log('---------------------')
//3.根据id属性值获取元素
var elem = document.getElementById('d1');
console.log(elem);
//标签属性都是元素节点对象的属性
console.log(elem.id,elem.className);
elem.style='color:red;text-align:center;';
//4.根据name属性值获取元素列表
var list3 = document.getElementsByName('username');
console.log(list3);
//操作元素内容或值
console.log('-----------')
elem.innerHTML = '<a href>Python最好</a>';
console.log(elem.innerHTML);
elem.innerText = '<a href>Python最好</a>';
console.log(elem.innerText);
btn.onclick = function(){
//获取表单控件的值
console.log(list3[0].value);
show.innerHTML = '<H1>'+list3[0].value+'</H1>';
}
/*创建输入框，按钮和div
<input type="text">
点击按钮是将输入框中的内容以一级标题的形式显示在div中*/
</script>
</body>
</html>
5）操作元素属性
1. 通过元素节点对象的方法操作标签属性
elem.getAttribute("attrname");//根据指定的属性名返回对应属性值
elem.setAttribute("attrname","value");//为元素添加属性,参数为属性名和属性值
elem.removeAttribute("attrname");//移除指定属性
2. 标签属性都是元素节点对象的属性,可以使用点语法访问，例如：
h1.id = "d1"; //set 方法
console.log(h1.id); //get 方法
h1.id = null; //remove 方法
注意 :
属性值以字符串表示
class属性需要更名为className,避免与关键字冲突,例如：
h1.className = "c1 c2 c3";
6）操作元素样式
1. 为元素添加id，class属性，对应选择器样式
2. 操作元素的行内样式,访问元素节点的style属性，获取样式对象；样式对象中包含CSS属性，使用点语法操作。
p.style.color = "white";
p.style.width = "300px";
p.style.fontSize = "20px";
注意 :
属性值以字符串形式给出,单位不能省略
如果css属性名包含连接符,使用JS访问时,一律去掉连接符,改为驼峰. font-size -> fontSize
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="index.js"></script>
<style>
#main{
color:red;
}
.c1{
background:green;
}
</style>
</head>
<body>
<h1>人生苦短,我学Python</h1>
<script>
//获取元素节点
var h1 = $('h1');
//操作元素样式
//1.通过操作元素的id/class属性，对应选择器的样式
h1.id='main';
h1.className='c1';
//2.操作行内样式
console.log(h1.style);
//直接赋值
h1.style = '200px;height:200px;';
//单独调整样式,h1.style返回样式表对象,由css的属性组成
//出现连接符的属性名，一律更名为驼峰名标示
h1.style.width='300px';
h1.style.textAlign = 'center';
h1.style.lineHeight = '200px';
console.log(h1);
//<h1 id="main" class="c1" style=" 300px; height: 200px; text-align: center; line-height: 200px;">人生苦短,我学Python</h1>
</script>
</body>
</html>
7）元素节点的层次属性
1. parentNode
获取父节点
1 <head> 2 <meta charset="UTF-8"> 3 <title>Title</title> 4 <script src="index.js"></script> 5 </head> 6 <body> 7 <div> 8 <p>参考</p> 9 示例 10 <h1 id="d1" class="c1"> 11 <span>h1->span</span> 12 </h1> 13 <p>参考</p> 14 </div> 15 <script> 16 var h1 = $('h1'); 17 //获取唯一的父节点 18 console.log(h1.parentNode);//h1的上一层 19 </script> 20 </body> 21 --------------------------- 22 <div> 23 <p>参考</p> 24 示例 25 <h1 id="d1" class="c1"> 26 <span>h1->span</span> 27 </h1> 28 <p>参考</p> 29 </div>
2. childNodes
获取子节点数组,只获取直接子节点(包含文本节点和元素节点)
1 <head> 2 <meta charset="UTF-8"> 3 <title>Title</title> 4 <script src="index.js"></script> 5 </head> 6 <body> 7 <div> 8 <p>参考</p> 9 示例 10 <h1 id="d1" class="c1"> 11 <span>h1->span</span> 12 </h1> 13 <p>参考</p> 14 </div> 15 <script> 16 var div = $('div'); 17 //获取子节点数组 18 console.log(div.childNodes);//div(含)下面有几个'>'就有几个子节点数组 19 </script> 20 </body> 21 ----------------------------- 22 NodeList(7) [text, p, text, h1#d1.c1, text, p, text] 23 0: text 24 1: p 25 2: text 26 3: h1#d1.c1 27 4: text 28 5: p 29 6: text 30 length: 7 31 __proto__: NodeList
3. children
获取子节点数组,只获取直接子元素,不包含间接元素和文本节点
1 <head> 2 <meta charset="UTF-8"> 3 <title>Title</title> 4 <script src="index.js"></script> 5 </head> 6 <body> 7 <div> 8 <p>参考</p> 9 示例 10 <h1 id="d1" class="c1"> 11 <span>h1->span</span> 12 </h1> 13 <p>参考</p> 14 </div> 15 <script> 16 var div = $('div'); 17 //获取子元素数组（只包含直接子元素） 18 console.log(div.children);//仅div下面一层的元素 19 </script> 20 </body> 21 -------------------------------------- 22 HTMLCollection(3) [p, h1#d1.c1, p, d1: h1#d1.c1] 23 0: p 24 1: h1#d1.c1 25 2: p 26 length: 3 27 d1: h1#d1.c1 28 __proto__: HTMLCollection
4. previousSibling
获取前一个兄弟节点(文本节点也可以是兄弟节点)
previousElementSibling 获取前一个元素兄弟节点
5. nextSibling
获取后一个兄弟节点
nextElementSibling 获取下一个元素兄弟节点
1 <head> 2 <meta charset="UTF-8"> 3 <title>Title</title> 4 <script src="index.js"></script> 5 </head> 6 <body> 7 <div> 8 <p>参考</p> 9 示例 10 <h1 id="d1" class="c1"> 11 <span>h1->span</span> 12 </h1> 13 <p>参考</p> 14 </div> 15 <script> 16 var div = $('h1'); 17 //获取兄弟节点 18 console.log(h1.previousSibling); //"示例" 19 console.log(h1.nextSibling); 20 //获取元素兄弟节点 21 console.log(h1.previousElementSibling); //<p>参考</p> 22 //上一个节点若是body则返回null 23 console.log(h1.nextElementSibling); //<p>参考</p> 24 //下一个节点若是html则返回null 25 </script> 26 </body>
6. attributes
获取属性节点的数组
1 <head> 2 <meta charset="UTF-8"> 3 <title>Title</title> 4 <script src="index.js"></script> 5 </head> 6 <body> 7 <div> 8 <p>参考</p> 9 示例 10 <h1 id="d1" class="c1"> 11 <span>h1->span</span> 12 </h1> 13 <p>参考</p> 14 </div> 15 <script> 16 var h1 = $('h1'); 17 //获取属性节点数组 18 console.log(h1.attributes); 19 </script> 20 </body> 21 --------------------------------- 22 NamedNodeMap {0: id, 1: class, id: id, class: class, length: 2} 23 0: id 24 1: class 25 length: 2 26 class: class 27 id: id 28 __proto__: NamedNodeMap
8）节点的创建，添加和删除
1. 创建元素节点
var elem = document.createElement("标签名"); //返回创建好的元素节点
2. 节点的添加
添加和移除操作都必须由父元素执行，方法如下：
在父元素的末尾添加子节点
parendNode.appendChild(node);
指定位置添加
parendNode.insertBefore(newNode,oldNode); //在oldNode之前添加子节点
3. 移除节点
parentNode.removeChild(node); //移除指定节点对象
1 <head> 2 <meta charset="UTF-8"> 3 <title>Title</title> 4 <script src="index.js"></script> 5 </head> 6 <body> 7 <h1>python</h1> 8 <script> 9 //节点的创建，添加和移除 10 //创建元素节点 11 var h1 = document.createElement('h1'); 12 13 h1.innerHTML = "动态添加"; 14 h1.id = 'd1'; 15 //添加节点，由父节点操作 16 document.body.appendChild(h1);//追加至父元素末尾 17 //<h1 id="d1">动态添加</h1> 18 //节点与页面中元素是一一对应的关系，想在页面中出现几个元素，就需要创建几个节点 19 //document.body.appendChild(h1);如果向再追加至父元素末尾，需重新创建元素节点 20 //指定位置添加节点 21 var h3 = document.createElement('h3'); 22 document.body.insertBefore(h3,h1); 23 console.log(div.parentNode);//获取父节点 24 //移除节点 25 document.body.removeChild(div); 26 console.log(div.parentNode); //null 27 </script> 28 </body> 29 30 -------------------------------- 31 //获取父节点 32 <body> 33 <div> 34 <h1>python</h1> 35 </div> 36 <script>……</script> 37 <h3></h3> 38 <h1 id="d1">动态添加</h1> 39 </body>
练习1：实现网页轮播图 方式一：控制图片的隐藏与显示 方式二：切换图片路径
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <!--<script src="index.js"></script>--> 7 <style> 8 #banner{ 9 600px; 10 height:300px; 11 margin:0 auto; 12 } 13 #banner img{ 14 600px; 15 height:300px; 16 } 17 </style> 18 </head> 19 <body> 20 <div id="banner"> 21 <img src="northStar.jpg" alt="" id="img1"> 22 </div> 23 <script> 24 //1.保存图片路径 25 var imgArr = ['northStar.jpg','wxy.jpeg','rongrong.jpg']; 26 //2.保存图片的索引 27 var index = 0; 28 <!--var img1 = $('img')--> 29 //3.开启间歇调用 30 var timer = setInterval(autoPlay,1500); 31 function autoPlay(){ 32 //更新索引 33 index++; 34 //判断是否越界 35 if(index==imgArr.length){ 36 index = 0; 37 } 38 //修改元素的src属性 39 img1.src =imgArr[index]; 40 } 41 42 </script> 43 </body> 44 </html>
练习2.参照效果图（添加元素练习）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 table{ 8 600px; 9 border:1px solid #000; 10 } 11 th,td{ 12 border:1px solid #000; 13 } 14 </style> 15 <script> 16 function add(){ 17 //1.获取输入框 18 var list_1 = document.getElementsByTagName('input') 19 //2.获取输入框的值 20 var gname = list_1[0].value; 21 var gprice = list_1[1].value; 22 var gcount = list_1[2].value; 23 //3.创建元素节点 24 var tr = document.createElement('tr'); 25 var td1 = document.createElement('td'); 26 td1.innerHTML = gname; 27 var td2 = document.createElement('td'); 28 td2.innerHTML = gprice; 29 var td3 = document.createElement('td'); 30 td3.innerHTML = gcount; 31 var td4 = document.createElement('td'); 32 td4.innerHTML = '<button>修改</button><button>删除</button>'; 33 //4.添加显示 34 tr.appendChild(td1);//父元素创建方法，将子元素添加末尾 35 tr.appendChild(td2); 36 tr.appendChild(td3); 37 tr.appendChild(td4); 38 tbody.appendChild(tr); 39 /* 40 var tr; 41 for(var i = 0;i<3;i++){ 42 var td = document.createElement('td'); 43 td.innerHTML = list_1[i].value; 44 tr.appendChild(td); 45 } 46 var td4 = document.createElement('td'); 47 td4.innerHTML = '<button>修改</button>'; 48 tr.appendChild(td4); 49 tbody.appendChild(tr); 50 */ 51 } 52 </script> 53 </head> 54 <body> 55 <div> 56 <input type="text" name="gname" placeholder="商品名称"> 57 <input type="text" name="gprice" placeholder="商品价格"> 58 <input type="text" name="gcount" placeholder="商品数量"> 59 <button onclick="add()">增加</button> 60 </div> 61 <table> 62 <thead> 63 <tr> 64 <th id="d1">商品名称</th> 65 <th id="d2">商品名称</th> 66 <th>商品价格</th> 67 <th> 68 <button>操作</button> 69 </th> 70 </tr> 71 </thead> 72 <tbody id="tbody"> 73 74 </tbody> 75 76 </table> 77 </body> 78 </html>
三、DOM 事件处理
事件：指用户的行为或元素的状态。由指定元素监听相关的事件，并且绑定事件处理函数。
事件处理函数：元素监听事件，并在事件发生时自动执行的操作。
1） 事件函数分类
1. 鼠标事件
onclick //单击
ondblclick //双击
onmouseover //鼠标移入
onmouseout //鼠标移出
onmousemove //鼠标移动
1 <style> 2 div{ 3 300px; 4 height:300px; 5 background:green; 6 } 7 </style> 8 <body> 9 <div id="d1"></div> 10 <script> 11 /* 12 事件对象：保存与当前事件相关的所有信息伴随时间发生自动创建，自动作为参数传递到时间 处理函数中我们只需要在时间处理函数中定义形参接收即可 13 */ 14 function fn(a){} 15 fn(100) 16 //1.鼠标事件 17 /*鼠标事件对象，主要保存鼠标的位置信息 18 offsetX offsetY:获取鼠标在元素坐标系中的位置*/ 19 d1.onclick = function(e){//event evt e常见的事件对象名称 20 console.log('单击',e,e.offsetX,. e.offsetY); 21 }; 22 d1.ondblclick = function(){ 23 console.log('双击'); 24 }; 25 d1.onmouseover = function(){ 26 console.log('鼠标移入'); 27 }; 28 d1.onmouseout = function(){ 29 console.log('鼠标移出'); 30 }; 31 d1.onmousemove = function(){ 32 console.log('鼠标移动'); 33 }; 34 </script> 35 </body>
2.键盘事件
onkeydown //键盘按键被按下
onkeyup //键盘按键被抬起
onkeypress //字符按键被按下
1 <style> 2 div{ 3 300px; 4 height:300px; 5 background:green; 6 } 7 </style> 8 <body> 9 <div id="d1"></div> 10 <script> 11 function fn(a){} 12 fn(100) 13 //2.键盘事件(了解) 14 /*键盘时间对象 15 key属性返回按键对应的字符 16 onkeydown:获取时间对象的which,功能键返回键盘编码； 17 字符键一律返回大写字母的ASC码 18 onkeypress:获取时间对象的which,返回自附件的ASC码值。 19 区分大小写*/ 20 onkeydown = function(e){ 21 console.log('onkeydown',e,e.key,e.which); 22 }; 23 onkeypress = function(e){ 24 console.log('onkeypress',e,e.key,e.which) 25 }; 26 onkeyup = function(){ 27 console.log('onkeyup') 28 }; 29 </body>
3.文档或元素加载完毕
onload //元素或文档加载完毕
1 <script> 2 window.onload = function(){ 3 //等窗口加载完毕后执行 4 console.log('window.onload'); 5 } 6 </script> 7 <body> 8 <form id="form" action="/login" method="get" enctype="application/x-www-form-urlencoded"> 9 用户姓名<input type="text" name="uname" id="uname"><br> 10 记住密码<input type="checkbox" id="savePwd" checked><br> 11 <input type="submit"> 12 </form> 13 <script> 14 console.log('测试'); 15 </script> 16 </body> 17 ========================= 18 测试 19 window.onload
4.表单控件状态监听
onfocus //文本框获取焦点
onblur //文本框失去焦点
oninput //实时监听输入
onchange //两次输入内容发生变化时触发,或元素状态改变时触发
onsubmit //form元素监听,点击提交按钮后触发,通过返回值控制数据是否可以发送给服务器
1 <script> 2 window.onload = function(){ 3 //输入框相关 4 uname.onfocus = function(){ 5 console.log('获取到焦点'); 6 } 7 uname.onblur = function(){ 8 //this:指代事件的触发对象或函数的调用者 9 console.log('失去焦点',uname.value,this.value); 10 } 11 //实时监听输入 12 uname.oninput = function(){ 13 //console.log('oninput:',this.value); 14 } 15 //监听前后两次输入的内容是否一致 16 uname.onchange = function(){ 17 //只有前后两次输入不一致，并且失去焦点时才触发 18 console.log('onchange',this.value) 19 } 20 //监听按钮状态的改变 21 savePwd.onchange = function(){ 22 //按钮有选中和未选中两种状态，对应check属性值为true/false 23 console.log(this.checked) 24 } 25 //监听表单中的数据是否可以提交 26 /* 27 交由form元素监听，在点击提交按钮是触发,允许返回布尔值， 28 true表示允许发送，false表示阻止发送 29 */ 30 form.onsubmit = function(){ 31 //用户名为空时，阻止提交 32 if(uname.value==''){ 33 return true; 34 }else{ 35 return false; 36 } 37 } 38 <script> 39 ------------------- 40 <body> 41 <form id="form" action="/login" method="get" enctype="application/x-www-form-urlencoded"> 42 用户姓名<input type="text" name="uname" id="uname"><br> 43 记住密码<input type="checkbox" id="savePwd" checked><br> 44 <input type="submit"> 45 </form> 46 </body>
2）事件绑定方式
1. 内联方式
将事件名称作为标签属性绑定到元素上
例 :<button onclick="alert()">点击</button>
2. 动态绑定
获取元素节点，动态添加事件
例 :
btn.onclick = function (){
};
3）事件函数使用
1. onload
常用于等待文档加载完毕再进行下一步操作
2. 鼠标事件
3. 表单事件
onchange： 监听输入框前后内容是否发生变化;也可以监听按钮的选中状态
onsubmit ：表单元素负责监听,允许返回布尔值,表示数据是否可以发送;返回true,允许发送;返回false,不允许提交
4. 键盘事件
1 <body> 2 <ul> 3 <li> 4 <span id="city">北京</span> 5 <ol id="ol"> 6 <li>北京</li> 7 <li>上海</li> 8 <li>广州</li> 9 <li>深圳</li> 10 </ol> 11 </li> 12 </ul> 13 <script> 14 //获取内层li元素列表 15 var list = ol.children; 16 for(var i = 0; i<list.length;i++){ 17 console.log('for',i) 18 list[i].onclick = function(){ 19 console.log(i);//4 20 //传值 21 //list[0]元素节点--->this指代时间触发对象 22 city.innerHTML = this.innerHTML; 23 console.log(this); 24 } 25 } 26 </script> 27 </body>