1.主要内容
2.事件
事件(Event)是JavaScript应用跳动的心脏，进行交互，使网页动起来。当我们与浏览器中Web页面进行某些类型的交互时，事件就发生了。事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键。事件还可能是Web浏览器中发生的事情，比如说某个Web页面加载完成，或者是用户滚动窗口或改变窗口大小。
通过使用JavaScript，你可以监听特定事件的发生，并规定让某些事件发生以对这些事件做出响应。
2.1.作用
(1）验证用户输入的数据。
(2）增加页面的动感效果。
(3）增强用户的体验度
2.2.事件中的几个名词
事件源:谁触发的事件
事件名:触发了什么事件
事件监听:谁管这个事情，谁监视?
事件处理:发生了怎么办
2.3.事件类型
JavaScript可以处理的事件类型为︰鼠标事件、键盘事件、HTML事件。
- Window事件属性:针对window对象触发的事件(应用到标签)
- Form事件:由HTML表单内的动作触发的事件（应用到几乎所有HTML元素，但最常用在form元素中)
- Keyboard事件:键盘事件
- Mouse事件:由鼠标或类似用户动作触发的事件
- Media事件:由媒介(比如视频、图像和音频)触发的事件(适用于所有HTML元素，但常见于媒介元素中，比如
<audio>、<embed>、<img>、<object>以及<video>)
onload:当页面或图像加载完后立即触发
onblur:元素失去焦点
onfocus:元素获得焦点
onclick:鼠标点击某个对象
onchange:用户改变域的内容
onmouseover:鼠标移动到某个元素上
onmouseout:鼠标从某个元素上离开
onKeyup:某个键盘的键被松开
onKeydown:某个键盘的键被按下
2.4.事件流和事件模型
- 我们的事件最后都有一个特定的事件源，暂且将事件源看做是HTML的某个元素，那么当一个HTML元素产生一个事件时，该事件会在元素节点与根节点之间按特定的顺序传播，路径所经过的节点都会受到该事件，这个传播过程称为DOM事件流。
- 事件顺序有两种类型:事件捕获和事件冒泡。
- 冒泡和捕获其实都是事件流的不同表现，这两者的产生是因为IE和Netscape两个大公司完全不同的事件流概念产生的。(事件流:是指页面接受事件的顺序)IE的事件流是事件冒泡，Netscape的事件流是事件捕获流。
2.4.1.事件冒泡
IE的事件流叫做事件冒泡，即事件开始时由最具体的元素接受，然后逐级向上传播到较为不具体的节点(文档)。例如下面的:
<! DOCTYPE html>
<htm1>
<head>
<meta charset="UTF-8">
<title>Javascript</title>
</head>
<body>
<div id="myDiv">click me</div>
</body>
</html>
如果点击了页面中的<div>元素，那么这个click事件会按照如下顺序传播:
1.<div>
2.<body>
3.<html>
4. document
也就是说，click事件首先在div元素上发生，而这个元素就是我们单击的元索。然后，click事件沿DOM树向上传播，在每一级节点上都会发生，直到传播到document对象。
所有现代浏览器都支持事件冒泡，但在具体实现上还是有一些差别。
2.4.3.DOM事件流
“DOM2级事件"规定的事件流包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获阶段，为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段，可以在这个阶段对事件做出响应。
2.5.事件处理程序
事件就是用户或浏览器自身执行的某种动作。例如click、load和mouseover都是事件的名字，而响应某个事件的函数就叫做事件处理程序（或事件侦听器)。事件处理程序的名字以"on"开头，因此click事件的事件处理程序就是onclick，为事件指定处理程序的方式有好几种。
2.5.1.HTML事件处理程序
某个元素支持的每种事件，都可以用一个与相应事件处理程序同名的HTML特性来指定。这个特性的值应该是能够执行的JavaScript代码:
<input type="button" value="Press me" onclick="alert('thanks ');"/>
这样做有一些缺点，例如耦合度过高，还可能存在时差问题(当用户点击按钮时，处理函数还未加载到此时处理函数是单独写的一段js代码)，而且在不同的浏览器上可能会有不同的效果。
2.5.2.DOM0级事件处理程序
通过JavaScript指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。这种方式被所有现代浏览器所支持。这种方式首先必须取得一个要操作的对象的引用，每个元素都有自己的事件处理程序属性，这些属性诵常全都小写，例如onclick，然后将这种属性的值设为一个函数，就可以指定事件处理程序了。例如:
<body>
<button id="myBtn">按钮</button>
<script type="text/javascript">
var btn = document.getElementById( ' myBtn ' );
btn.onclick = function(){
console.log( 'you click a button ' ) ;
}
</script>
</body>
以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。而且，只能为同一个元素的同一个事件设定一个处理程序（覆盖)，也可以通过删除DOMO级方法指定的事件处理程序，只要将属性值设为null即可:
btn.onclick = null;
2.5.3.DOM2级事件处理程序
“DOM2级事件"定义了两个方法，用于处理指定和删除事件处理程序的操作: addEventListener()和removeEventListener()。所有DOM节点都包含这两个方法，并且他们都接受3个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true，则表示在捕获阶段调用事件处理程序如果是false则表示在冒泡阶段调用事件处理程序。
<body>
<button id="myBtn">按钮</button>
<script type="text/javascript">
var btn = document.getE1ementById('myBtn')
btn.addEventListener('c1ick ' ,function({
alert('you add a eventListener by DOM2 ' )}, false)
btn. addEventListener( 'click ' ,function(){
alert('you add a eventListener by DOM2again')}, false)
function thread({
alert('you add a eventListener by DOM2第三次')
}
btn.addEventListener('click',thread,false)
btn.removeEventListener('click',thread,false)
</script>
</body>
BOM事件
BOM的核心对象是window，它表示浏览器的一个实例。window对象有双重角色，它既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。这意味着在网页中定义的任何一个对象、变量和函数，都以window作为其Global对象，因此有权访问parselnt()等方法。如果页面中包含框架，则每个框架都拥有自己的window对象，并且保存在frames集合中。在frames集合中，可以通过数值索引(从0开始，从左至右，从上到下)或者框架的名称来访问相应的window对象。
3.1.Window对象方法
3.1.1.系统对话框
浏览器通过（实际是window对象的方法) alert()、 confirm()、prompt()方法可以调用系统对话框向用户显示消息。
(1）消息框:alert,常用。
alert()方法用于显示带有一条指定消息和一个OK按钮的警告框。
(2）输入框:prompt，返回提示框中的值。
prompt()方法用于显示可提示用户进行输入的对话框。参数(可选)︰
第一个参数:要在对话框中显示的纯文本。
第二个参数:默认的输入文本。
(3)确认框:confirm，返回true/false.
confirm()方法用于显示一个带有指定消息和oK及取消按钮的对话框。
3.1.2.打开窗口
window.open()方法既可以导航到一个特定的URL也可以打开一个新的窗口
<script type="text/javascript">function opensxt(){
window.open('http://www.baidu.com','_self');
//_self、_b1ank等
//window.open();
//空白窗口
</script>
<input type="button" name="open" value="百度" onclick='openBaidu();'/>
3.1.3关闭窗口
window.close():关闭窗口
<input type="button" value="关闭窗口"onclick="window.close();"/>
3.1.4时间函数
3.1.4.1.setTimeout()
setTimeout():在指定的毫秒数后调用函数或计算表达式。返回一个唯一的标识;也可以通过返回的标识cliearTimeout(id):来清除指定函数的执行。
var id = setTimeout(function,times);
clearTimeout(id);
3.1.4.2.setlnteval()
setInterval():可按照指定的周期(以毫秒计）来调用函数或计算表达式，也可根据返回的标识用来结束该方法会不停地调用函数，直到clearlnterval()被调用或窗口被关闭。
var id = setInterval(function,times);
clearInterval(id) ;
function test(O{
console.log("..... ");
}
//window是一个全局对象，通过全局对象调用setInterva1()函数
window.setInterval(test,1000) ;
3.2. history对象
history对象是历史对象。包含用户（在浏览器窗口中）访问过的URL.history对象是window对象的一部分，可通过window.history属性对其进行访问。
- history对象的属性: length，返回浏览器历史列表中的URL数量。
- history对象的方法:
- back():加载history 列表中的前一个URL。
- forward():加载历史列表中的下一个URL。当页面第一次访问时，还没有下一个url。
- go(number|URL):
- URL参数使用的是要访问的URL。而number参数使用的是要访问的URL在History的URL列表中的相对位置。go(-1)，到上一个页面
3.3.location对象
- location对象是window对象之一，提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。也可通过window.location 属性来访
- location对象的属性href:设置或返回完整的URLlocation对象的方
- reload():重新加载当前文档。
- replace():用新的文档替换当前文档。
<script type="text/javascript">
function openBaidu(){
//没有历史记录,用新的文档替换当前文档
//window . location.rep1ace("http : //www. baidu. com");
//console.log(window . location.href);//获取完整的url
window.location.href = "http : //www. baidu.com" ;
}
</script>
<body>
<input type="text" value=""/>
<input type="button" value="刷新" onc1ick="window.1ocation.reload();"/>
<input type="button" value="百度" onclick="openBaiduO;"/>
</body>
4.DOM对象
DOM: Document Object Model文档对象模型
要实现页面的动态交互效果,bom操作远远不够，需要操作 html才是核心。如何操作 htm，就是DOM。简单的说，dom提供了用程序动态控制 html接口。DOM即文档对象模型描绘了一个层次化的节点树，运行开发人员添加、移除和修改页面的某一部分。dom处于javascript的核心地位上。
每个载入浏览器的HTML文档都会成为Document对象。Document对象使我们可以从脚本中对HTML页面中的所有元素进行访问。Document对象是Window对象的一部分，可通过window.document 属性对其进行访问。
4.1节点
加载HTML页面时，Web浏览器生成一个树型结构，用来表示页面内部结构。DOM将这种树型结构理解为由节点组成，组成一个节点树。对于页面中的元素，可以解析成以下几种类型的节点:
html --> 文档节点
div --> 元素节点
title --> 属性节点
测试 div --> 文本节点
4.2.1.获取节点
在进行增、删、改的操作时，都需要指定到一个位置，或者找到一个目标，此时我们就可以通过Document对象提供的方法，查找、定位某个对象（也就是我们说的节点)。
注意:操作dom 必须等节点初始化完毕后，才能执行。
处理方式两种:
(1）把script 调用标签移到html末尾即可;
(2）使用onload事件来处理S，等待html加载完毕再加载onload事件里的JS。
window.onload = function O {//预加载htm1后执行};
说明: href=“javascript:void(0)”:伪协议，表示不执行跳转，而执行指定的点击事件。
4.2.2.间接查找节点
4.2.4.删除节点
<script type="text/javascript">
function de1Node(){
var programmer =document.getE1ementById("programmer");
//从父元素中删除节点，获取要删除对象的父元素，然后从父元素中删除该对象
programmer.parentNode .removechild(programmer);
}
</script>
<body>
<span id="programmer">程序猿</span>
<a href="javascript:void(0)" onclick="de1Node(); ">删除</a>
</body>
5.表单
表单是我们页面向后台传输数据的一种非常常见的方式，在进行数据发送(请求发出)之前，我们应该现在页面进行一系列数据合法性的验证，节省不必要的错误数据的传输，以及提高用户的体验度。
5.1.获取表单
1、document.表单名称
2、document.getElementById(表单id);
3、document.forms[表单名称]
4、document.forms[索引;//从0开始
<body>
<form id='myform' name="myform" action="" method="post"></form>
<form id='myfdrm2' name="myform2" action="" method="post"></form>
</body>
<script>
//四种方式
var form =document.getE1ementById( "myform") ;
form =document. myform;
form =document.forms["myform"];
form =document.forms[0];
console.1og(form);
</script>
5.2.获取表单元素
5.2.1.获取input元素
如text password hidden textarea等，前两种常用。
1)、通过id获取: document.getElementById(元素id);
2)、通过form.名称形式获取:myform.元素名称;name属性值
3)、通过name 获取:document.getElementsByName(name属性值)[索引//从0开始
4)、通过 tagName数组:document.getElementsByTagName( 'input')[索引]//从0开始
5.2.2.获取单选按钮
前提:将一组单选按钮设置相同的name属性值
⑴获取单选按钮组:
document.getETementsByName( "name属性值");
⑵遍历每个单选按钮，并查看单选按钮元素的checked属性
若属性值为true表示被选中，否则未被选中
选中状态设定: checked='checked’或checked='true’或checked
未选中状态设定:没有checked属性或checked=‘false’
<form action="" name="myform">
<input type="text" name="inputName" value="aaa"/>
<input type="radio" name="rad" value="1"/>1
<input type="radio" name="rad" value="2"/>2
</form>
<script type="text/javascript">
var radios = document.getElementsByName('rad');
//radios[0]. checked = 'checked '
for(var i = 0; i<radios .length; i++){
console.log(radios[i].checked + '---' + radios[i].value)
}
</script>
5.2.3.获取下拉选项
(1)获取select 对象:
var ufrom = document.getE1ementById("ufrom");
(2）获取选中项的索引:
var idx = ufrom. selectedIndex ;
(3）获取选中项options的 value属性值:
var va1 = ufrom. options[idx].value;
注意:当通过options获取选中项的value属性值时，
若没有value属性，则取option标签的内容
若存在value属性，则取value属性的值
(4）获取选中项options的text:
var txt = ufrom. options[idx].text;
选中状态设定: selected=‘selected’、selected=true、selected
未选中状态设定:不设selected属性
5.3.提交表单
(1）使用普通button按钮+onclick事件+事件中编写代码:
获取表单.submit();
(2)使用submit按钮+οnclick=“return函数()”+函数编写代码:
最后必须返回: return true | false;
(3)使用submit按钮/图片提交按钮＋表单οnsubmit=“return函数();”+函数编写代码:
最后必须返回: return true | false;
trim()
去除字符串前后空格(不去除字符串中间的空格)
5.4.表单校验
<form id=' myform' name="myform">
姓名:<input type="text" id="uname" name="uname"/><br />密码:<input type="password" id="upwd" name="upwd"/><br />
年龄:<input type="radio" name="uage" value="O" checked="checked" />小屁孩
<input type="radio" name="uage" value="1"/>你懂得<br />
爱好:<input type="checkbox" name="ufav" value="篮球"/>篮球
<input type="checkbox" name="ufav" value="爬床"/>爬床
<input type="checkbox" name="ufav" value="代码"/>代码<br />
来自:<select id="ufrom" name="ufrom">
<option value="-1" selected="se1ected">请选择</option><option value="O">北京</option>
<option value="1">上海</option></select><br />
<div id="validate" style="color: red ; "></div>
<button type="submit" onclick="return checkForm();">提交</button><button type="reset" onclick="resetForm(O;">重置</button>
</form>
要求:
1、验证用户名
1)不能为空
2)长度为6-12位
2、验证密码
1)不能为空*
2)长度为6-12位
3)不能包含用户名
3、年龄:必须选择你懂得
4、爱好:必须选择一项
5、来自:必须选择一项满足以上条件
1、弹出所有的内容
2、提交表单
否则
1、说明错误原因
2、不能提交表单
805
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
