事件
1.定义：
(1) 主要用于监听网页行为（鼠标，键盘），根据不同的行为给予不同的响应 （或者：用户与浏览器之间特定的交互瞬间。）
(2) 好莱坞法则：dont not call me ,I will call you.
(3)函数：由开发者调用；添加事件之后，函数由用户调用；
事件三要素：事件源、事件、事件驱动程序（函数）。三句话：获取事件源、绑定事件、书写事件驱动程序。
2. 如何使用事件：
（a）添加事件方式：
（1）脚本模式添加
<button>点击</button>
<script>
var bt1=document.getElementsByTagName('button')[0];
bt1.onclick=function show(){
console.log(this);
}
</script>（2）内联模式添加（通过标签中的属性添加，用的少）
<button onclick="show()">点击</button>
<script>
function show(){
console.log(this);
}
</script>UI事件
UI事件指的是那些 不一定与用户操作有关 的事件。DOM规范中留下向后兼容。UI事件包含：（1）load ：当页面加载后在window页面上面触发，当所有框架加载完成后在框架上触发，当图像加载完成后在<img>元素上面触发。onload （文档加载事件，会等到所有结构加载完之后再触发； window.onload 1.只能出现一次； 2.会等到图片加载完之后才触发；）
（2）unload：当页面卸载后在window页面上面触发。
（3）scroll：当用户滚动滚动条的元素中的内容时，在元素上触发。
<style>
.box{
width: 600px;
height: 1000px;
background-color: pink;
} </style>
<div class="box"></div>
<script>
window.onscroll=function(){
console.log("页面滚动");
} </script>这些事件多数与window对象有关。
焦点事件
焦点事件会在页面得到焦点或失去焦点时触发
- blur，在失去焦点的元素上触发，这个事件不会冒泡。
plase输入手机号：<input type="text" value="请输入手机号"> <script> //onblur 失去焦点事件，文本框，密码框，文本域 var in1=document.getElementsByTagName('input')[0]; in1.onblur=function(){ var str=this.value; if (str.substr(0,3)!=139) { alert("必须是139开头") }else{ alert("输入正确"); } } - focus，在得到焦点的元素（文本框，密码框，文本域）上触发，这个事件不会冒泡。。
plase输入手机号：<input type="text" value="请输入手机号"> var in1=document.getElementsByTagName('input')[0]; in1.onfocus=function(){ this.value=""; } - focusIn，在得到焦点的元素上触发 ，这个事件会冒泡。
- DOMFocusIn，在得到焦点的元素上触发，这个事件会冒泡。
- DOMFocusOut，在失去焦点的元素上触发。
- focusout，在失去焦点的元素上触发，这个事件会冒泡。
鼠标与滚轮事件
常见的鼠标事件有9种：
- click：鼠标单击事件，当单击鼠标（一般为左键）或按下回车键时，会触发事件
- dbclick：鼠标双击事件，当双击鼠标时，会触发事件
- mousedown：当任意按下鼠标键时，会触发事件。
- mouseup：当释放鼠标铵键时，会触发事件。
- mouseenter：当鼠标移动进到当前元素的区域就会触发事件。
- mouseleave：当鼠标移出当前元素的区域就会触发事件。
- mousemove：当鼠标在当前元素区域内不断移动时，会重复触发事件。
键盘与滚动事件
用户在使用键盘时会触发键盘事件。常用的键盘事件有3种：
1、keydown：按下键盘上的任意按键会触发事件，如果按住按键不放，则会重复触发事件。
2、keyup：当释放键盘按键时会触发事件。
3、keypress：当用户按住键盘上的字符键时会触发事件，如果按住不放，则会重复触发事件。
注：当用户按了一下字符键时，首先会触发keydown事件，接着会触发keypress事件，最后会触发keyup事件。
键码
当触发keydown和keyup事件时，其event对象有个叫做keyCode的属性，其包含了用户所按下的按键的字符键码。例如：字符“q”对应的键码为81，字符"w"对应的键码是87。
注：keyCode属性不会区分字符大小写状态的，例如：不管是大写A还是小写a均返回65。
案例应用：按键控制div用移动
<style>
*{
padding: 0;
margin: 0;
}
#box{
width: 300px;
height: 300px;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<div id="box" style="left: 0;top: 0"></div>
<script>
//当按下键盘上下左右的时候，div的位置随之发生变化
document.onkeydown=function(event){
var e=event || window.event;
var box=document.getElementById("box")
console.log(event.keyCode);
switch(event.keyCode){
case 37:box.style.left=parseInt(box.style.left)-30+"px"
break;
case 38:box.style.top=parseInt(box.style.top)-30+"px";
break;
case 39:box.style.left=parseInt(box.style.left)+30+"px"
break;
case 40:box.style.top=parseInt(box.style.top)+30+"px";
break;
default:alert("必须按上下左右")
break;
}
}
</script>
</body>事件对象
关于元素大小位置等信息的一些属性。有：
clientLeft和clientTop
clientWidth和clientHeight
offsetLeft和offsetTop
offsetParent
offsetWidth和offsetHeight
scrollLeft和scrollTop
scrollWidth和scrollHeight
（1）clientLeft,clientTop:表示内容区域的左上角相对于整个元素左上角的位置（包括边框）。(取决于边框的像素值)
（2）clientWidth,clientHeight:内容区域的宽高，不包括边框宽度值。
（3）offsetLeft,offsetTop:相对于最近的祖先定位元素的偏移量。
offsetLeft:获取对象相对于版面（或由 offsetParent 属性指定的父坐标）计算左侧位置
offsetTop: 获取对象相对于版面（或由offsetTop属性指定的父坐标）计算顶端位置
（4）offsetParent:某元素的父元素 例如：this.offsetParent.tagName.toLowerCase() 得到body...
（5） offsetWidth,offsetHeight 整个元素的尺寸(不包括变宽的宽度)
（6）scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
（7）scrollWidth,scrollHeight:整个内容区域的宽度(包括需拉动滚动条隐藏起来的那些部分)
scrollTop+clientWidth
（8）event.clientX 相对文档的水平座标 event.clientY 相对文档的垂直座标
event.offsetX： 相对容器的水平坐标
event.offsetY ： 相对容器的垂直坐标<body>
<button>按钮</button>
<script>
var bt1=document.getElementsByTagName('button')[0];
//兼容性：ie8及其以下不支持event，输出widow.event可以运行
var b=3;
var a=4;
var c=b || a;
console.log(c);//如果前面变量有值，就赋值成前方变量，如果为Undefind，就赋值成后方变量
bt1.onclick=function(event){//获取方式：在function里边传入一个event
//根据事件对象，做一步兼容性处理，让其可以在任何浏览器中都可以得到；
var e=event || window.event;
//console.log(e.clientX);//相对于可视区域x轴的坐标
//console.log(e.clientY);//相对于可视区域y轴的坐标
//console.log(e.offsetX);//offset相对于触发元素的坐标点 在火狐浏览器不支持
//console.log(e.offsetY);
//console.log(e.screenX);//相对于屏幕的位置；
//console.log(e.screenY);
//console.log(e.pageX);//可视区+滚动条
//console.log(e.pageY);//可视区+滚动条
//console.log(event)
}
document.onkeydown=function(event){
var e=event || window.event;
console.log(event.keyCode);
}
</script>全选框 （反选）
<body>
<input type="checkbox">全选按钮<br>
<input type="checkbox" class="in"><br>
<input type="checkbox" class="in"><br>
<input type="checkbox" class="in"><br>
<input type="checkbox" class="in"><br>
<input type="checkbox" class="in"><br>
<button>反选</button>
<script>
var in1=document.getElementsByTagName('input')[0];
var inputs=document.getElementsByClassName('in');
console.log(inputs);
var bt1=document.getElementsByTagName('button')[0];
bt1.onclick=function(){
for(var n=0;n<inputs.length;n++){
if (inputs[n].checked==true) {
inputs[n].checked=false;
in1.checked=false;
}else{
inputs[n].checked=true;
}
}
}
in1.onclick=function(){
// 如何判断一个复选框被选中了，
// .checked判断复选框，如果选中了，checked返回true，如果没有选中，返回false，
//console.log(this.checked);
// in2.checked=this.checked;
// for(var n=0;n<inputs.length;n++){
// inputs[n].checked=this.checked;
// }
if (this.checked==true) {
for(var n=0;n<inputs.length;n++){
inputs[n].checked=true;
}
}else{
for(var n=0;n<inputs.length;n++){
inputs[n].checked=false;
}
}
}
for(var j=0;j<inputs.length;j++){
//判断当前选中的个数
inputs[j].onchange=function(){
var sum=0;
for(var n=0;n<inputs.length;n++){
if (inputs[n].checked) {
sum++;
}
}
console.log(sum);
if (sum==inputs.length) {
in1.checked=true;
}else{
in1.checked=false;
}
}
}
</script>
</body>
应用案例：拖拽功能的实现
1.需要给div定位
2.需要这三个事件 onmousedown onmousemove onmouseup 进行事件嵌套
3.事件对象 获取鼠标的坐标点
<style>
*{
padding: 0;
margin: 0;
}
#box{
width: 300px;
height: 300px;
background-color: red;
position: absolute;
}
</style>
HTML:
<div id="box"></div>
<script>
window.onload=function(){
box=document.querySelector(".box");
box.addEventListener("mousedown",function(e){ var e=e||window.event;
var divX=e.clientX-box.offsetLeft;
var divY=e.clientY-box.offsetTop;
function fnMove(e){
var x=e.clientX;
var y=e.clientY;
box.style.left=x-divX+"px";
box.style.top=y-divY+"px";
}
function fnEnd(e){
box.removeEventListener("mousemove",fnMove);
box.removeEventListener("mouseup",fnEnd);
}
box.addEventListener("mousemove",fnMove,false);
box.addEventListener("mouseup",fnEnd,false);
},false)
}</script>
