1、javaScript事件基础
关于DOM事件的基础，我们将会去掌握一些基础的知识，什么是事件，HTML事件，DOM0级事件，常用的鼠标和键盘事件，还有this的指向问题。
2、什么是事件
1、事件就是文档或者浏览器窗口中发生的一些特定的交互瞬间。
3、HTML事件
1、HTML事件就是直接在html标签中添加事件来执行脚本，这种绑定事件的方法就是HTML事件。
2、HTML事件的语法：(1)功能：在HTML元素上绑定事件。（2）执行脚本可以是一个函数的调用（JS代码）
<tag 事件="执行脚本"></tag>3、下面来写一段代码：
（1）首先在标签中的事件绑定，可以去调用函数，也可以直接写执行脚本。
（2）this指向的就是我们这个事件被绑定的这个DOM元素。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
.btn{width: 140px;height: 30px;line-height: 30px;background: #00f;
color: #ffffff;font-size: 14px;text-align: center;border-radius: 10px;
margin-top: 30px;
}
</style>
</head>
<body>
<input type="button" value="弹出" onclick="alert('我是按钮')">
<div id="btn" class="btn" onmouseover="mouseoverFn(this)" onmouseout="mouseoutFn(this)">开始</div>
<script>
//鼠标滑过的时候调用的函数
function mouseoverFn(btn){
btn.style.background="#f00";
}
function mouseoutFn(btn){
btn.style.background="#00f";
}
</script>
</body>
</html>
4、DOM0级事件
1、给一个元素设置DOM0级事件的步骤有2个：（1）通过DOM获取HTML元素。（2）（获取HTML元素）.事件=执行脚本
特别注意：执行脚本可以是一个匿名函数，也可以是一个函数的调用（函数的调用千万不能加括号，如下面代码中的注释）。
2、为什么会有DOM0级事件，首先我们之前的HTML事件是给每一个HTML元素里都绑定事件，现在有一个列表，列表下面有很多项，假如都要给每一项添加事件，那就太麻烦了。
3、来看下面的代码：（每个属性只能绑定一个事件）
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
.ber{width: 140px;height: 30px;line-height: 30px;background: #00f;
color: #ffffff;font-size: 14px;text-align: center;border-radius: 10px;
margin-top: 30px;
}
</style>
</head>
<body>
<div id="btn" class="ber">开始</div>
<script>
var inp=document.getElementById("btn");
inp.onmouseover= function(){
this.style.background="#f00";
}
inp.onmouseout=tongyife;//切记函数的调用后面不能加括号，否则会自动执行，而且this不起作用
function tongyife(){
this.style.background="#00f";
}
</script>
</body>
</html>
4、不建议使用HTML事件的原因（1）多元素绑定事件：效率低（2）不建议在HTML文件中写JS代码。
5、事件类型（鼠标事件）
这里先说明的是：onsubmit是加载form表单标签上的，不是加在提交按钮button上的。
5.1、onload页面加载事件
1、在上面所有的代码中，我们的<script></script>的标签和标签中的内容都是在body中的最后才写的，因为代码解析是从最上面到最下面，我们在<script></script>中有很多通过ID去获取元素的操作，所以如果我们直接把<script></script>中的内容写在head中，这些元素都找不到，以为代码还没有执行到下面，找不到ID为某某的元素。
2、所以我们如果要把<script></script>写在head中，那么就要将代码写在window.onload=function(){ }当中。比如下面这样：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
.ber{width: 140px;height: 30px;line-height: 30px;background: #00f;
color: #ffffff;font-size: 14px;text-align: center;border-radius: 10px;
margin-top: 30px;
}
</style>
<script>
window.onload=function(){
var inp=document.getElementById("btn");
inp.onmouseover= function(){
this.style.background="#f00";
}
}
</script>
</head>
<body>
<div id="btn" class="ber">开始</div>
</body>
</html>
3、那么onload是什么时候去加载的，实际上程序执行到window.onload的时候就会跳过，等到所有图片，文字，二进制文件都加载完了，才回头来加载window.onload中的内容。
5.2、onfocus和onblur事件（获取焦点和失去焦点）
1、onfocus事件只用于input标签为text、password和textarea。
2、下面的代码想我们展示了一个手机号码输入框的案例：其中判读非数字的API是isNaN。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
.box{padding: 50px;}
.left,.tip{float:left;}
.left{margin-right: 10px;}
.tip{display: none;font-size: 14px;}
</style>
<script>
window.onload=function(){
var phone=document.getElementById("phone"),
tip=document.getElementById("tip");
//获得焦点调用的函数
phone.onfocus=function (){
tip.style.display='block';
}
//失去焦点调用的函数
phone.onblur=function(){
var phoneValue=this.value;//通过value来获取文本框中内容
if(phoneValue.length==11&&isNaN(phoneValue)==false){
tip.innerHTML="手机号码输入正确";
}else{
phoneValue.length==0?tip.innerHTML="请输入手机号码":
tip.innerHTML="错误的手机号";
}
}
}
</script>
</head>
<body>
<div class="box">
<div class="left">
<input type="text" id="phone" placeholder="请输入手机号">
</div>
<div id="tip" class="tip">
请输入手机号码
</div>
</div>
</body>
</html>
在浏览器中的效果是：分别是初识状态，获取焦点，正确的号码，错误的号码：
5.3、onchange（域的内容改变时发生）
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script>
window.onload=function(){
var menu=document.getElementById("colorselect");
var box=document.getElementById("box");
menu.onchange=function(){
box.style.color=this.value;
}
}
</script>
</head>
<body>
<div class="box" id="box">
请选择颜色来改变字体颜色
<select name="" id="colorselect">
<option value="black">请选择</option>
<option value="red">红色</option>
<option value="blue">蓝色</option>
<option value="green">绿色</option>
<option value="yellow">黄色</option>
<option value="gray">灰色</option>
</select>
</div>
</body>
</html>
在浏览器中的效果是：
5.4、onresize和onscroll
首先onresize是当调整浏览器窗口的大小时触发，onscroll是拖动滚动条滚动时触发，这连个事件的调用对象都是window。不过onscroll的调用对象也可以其他的的需要滑动的列表啊，视图等等。
6、键盘事件
下面看这个代码：下面带代码实现了一个多行文本框输入，并根据键盘事件获取文本框文字的长度来提示用户的输入：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
span{color:red;font-weight: bold;}
</style>
</head>
<body>
<div class="box" id="box">
<p>你还可以输入<span><em id="count">30</em>/30个字</span></p>
<div class="input">
<textarea name="" id="text" cols="70" rows="3" maxlength="30"></textarea>
</div>
</div>
<script>
var text=document.getElementById("text");
var emm=document.getElementById("count");
document.onkeyup=function(){
var len=text.value.length;
emm.innerHTML=30-len;
}
</script>
</body>
</html>
在浏览器中的效果：
