### 焦点
理解为光标所在位置，但不是所有元素都能够接收焦点，如div就没有，但是文本框，超链接之类都有焦点
#### onfocus:当元素获取到焦点时触发
主动获取焦点obj.focus()
#### onblur:当元素失去焦点的时候触发
主动取消焦点obj.blur()
#### 全选操作
select() 不能操作类似div里面的内容
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
var oText = document.getElementById('text1');
//onfocus:当元素获取到焦点时触发
oText.onfocus = function () {
// this.value = '';//再次获取焦点还会清空
if(this.value == '请输入内容'){
this.value = '';
}
}
//
//onblur:当元素失去焦点的时候触发
oText.onblur = function () {
if(this.value == ''){
this.value = '请输入内容';
}
}
oText.focus();//获取焦点
var oBtn = document.getElementById('btn');
oBtn.onclick = function () {
oText.select();//不能操作类似DIV里的内容
}
}
</script>
</head>
<body>
<input type="text" id="text1" value="请输入内容"/>
<input type="button" id="btn" value="全选"/>
</body>
</html>
~~~
### eval
能够将字符串计算
~~~
<script type="text/javascript">
window.onload = function(){
alert(eval('3+3'));
}
</script>
~~~
### Event对象
事件对象，当一个事件发生时，和当前这个对象发生的这个事件有关的一些详细的信息都会被临时保存到一个指定地方-->event对象，方便我们调用--类似与飞机上的黑匣子。
~~~
<script>
/*
ie/chrome :event是一个内置全局对象
firefox:事件对象是通过事件函数第一个参数传入的
*/
// alert(event);//这没有事件
// 事件对象必须在一个事件调用的函数里面使用才有内容
// 事件函数，事件调用的函数，一个函数是不是事件函数，
// 不在定义，在于调用时
// function fn1() {
// alert(event);
// }
function fn1(ev) {
alert(ev);//所有标准都支持
// 兼容写法
var ev = ev ||event;
// alert(ev);//里面保存这很多内容
for(var attr in ev){
console.log(attr+' = '+ev[attr]);//事件的详细信息，不一一解释了
}
}
//fn1();//不是事件调用的函数
document.onclick = fn1;//是事件调用的函数，有内容
</script>
~~~
~~~
<script>
function fn1(ev) {
// 兼容写法
var ev = ev ||event;
/*
clientX[Y]:当一个事件发生时，鼠标到
页面可视区的距离
*/
alert(ev.clientX);
}
document.onclick = fn1;
</script>
~~~
课堂练习-1：div跟随鼠标移动
~~~
<style>
#div1{width:100px;height:100px;background: red;position:absolute;}
</style>
<script>
window.onload = function () {
// onmousemove:抚摸事件，鼠标移动时触发
/*
触发频率不是以像素为单位，而是间隔时间，
在一个指定时间内（很短），如果鼠标的位置
和上一次的位置发生了变化，就会触发一次
*/
// var i = 0;
var oDiv = document.getElementById('div1');
document.onmousemove = function (ev) {
var ev = ev || event;
// document.title =i++;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
oDiv.style.left = ev.clientX + 'px';
oDiv.style.top = ev.clientY + scrollTop +'px';
}
}
</script>
<body style="height:2000px;">//可视区的距离不够2000，所以偏了
<div id="div1"></div>
</body>
~~~
### 事件流
事件冒泡：当一个元素接收到时间的时候，会把它接收到的所有事件传输给它的父级，一直到顶层window——事件冒泡机制
影响：点击按钮显示div，点击document隐藏
应用：鼠标移入弹出广告
如何阻止冒泡
~~~
<style>
div{width:100px;height:200px;border:1px solid red;display: none;}
</style>
<script>
window.onload = function () {
/*
阻止冒泡：当前要阻止冒泡事件函数中调用even.cancleBubble = true;
*/
var oBtn = document.getElementById('btn');
var oDiv = document.getElementById('div1');
oBtn.onclick = function (ev) {
var ev = ev || event;
ev.cancelBubble = true;//阻止当前对象的当前事件冒泡
oDiv.style.display = 'block';
}
document.onclick = function () {
oDiv.style.display = 'none';
}
}
</script>
<body>
<input type="button" value="按钮" id="btn">
<div id="div1"></div>
</body>
~~~
### 键盘事件
onkeydown:当键盘按键按下时触发
onkeyup:当键盘按键抬起时触发
不用的键盘按钮有不同的键值
~~~
<script>
document.onkeydown = function (ev) {
var ev = ev || event;
alert(ev.keyCode);//ev.keyCode键值
}
</script>
~~~
event.keyCode:数字类型 键盘按键的值 键值
ctrlKey,shifKey,altKey比较特殊，他们具有布尔值
当一个事件(不一定非得是键盘事件)发生的时候，如果ctrl || shift || alt是按下的状态，返回true，否则false
~~~
<script>
document.onclick = function (ev) {
var ev = ev || event;
alert(ev.ctrlKey);//按住是true，不按是false
}
</script>
~~~
课堂练习-2：留言板（按回车就结束，追加一条留言）
如果模拟qq那样 ctrl+回车，绝对不能写ev.keyCode == 13 && ev.keyCode == 17，而要写ev.keyCode == 13 && ev.ctrlKey
课堂练习-3：键盘控制div移动
~~~
<style>
#div1{width:100px;height:100px;background: red;position: absolute;}
</style>
<script>
window.onload = function () {
var oDiv = document.getElementById('div1');
/*
这里千万不要用oDiv.onkeydown,因为不是所有元素都能接收
键盘事件，能够响应用户输入的元素，能够接收焦点的元素
就能接收键盘事件
*/
document.onkeydown = function (ev) {
var ev = ev || event;
switch(ev.keyCode){
//左37,上38,右39,下40
case 37:
oDiv.style.left = oDiv.offsetLeft - 10 +'px';
break;
case 38:
oDiv.style.top = oDiv.offsetTop - 10 +'px';
break;
case 39:
oDiv.style.left = oDiv.offsetLeft + 10 +'px';
break;
case 40:
oDiv.style.top = oDiv.offsetTop + 10 +'px';
break;
}
}
}
</script>
<body>
<div id="div1"></div>
</body>
~~~
onkeydown事件若按键不抬起，那么会连续触发
例如敲击键盘a，按住：aaaaaaaaaaaaaaaa,
第一个和第二个a中间有个明显的停顿时间间隔，有时候需要去除，例如游戏。
思考：如何去除停顿问题？提示：像汽车，发动机负责动力，方向盘负责方向，类似这种原理，div的移动功能可以交给发动机（定时器）去做，方向交给方向盘（键盘事件）去做。
~~~
<script>
window.onload = function () {
var oDiv = document.getElementById('div1');
var dir = {left:null,top:null,right:null,bottom:null};
setInterval(function () {
if(dir.left){
oDiv.style.left = oDiv.offsetLeft - 10 +'px';
}
if(dir.top){
oDiv.style.top = oDiv.offsetTop - 10 +'px';
}
if(dir.right){
oDiv.style.left = oDiv.offsetLeft + 10 +'px';
}
if(dir.bottom){
oDiv.style.top = oDiv.offsetTop + 10 +'px';
}
},30);
document.onkeydown = function (ev) {
var ev = ev || event;
switch(ev.keyCode){
//左37,上38,右39,下40
case 37:
dir.left = true;
break;
case 38:
dir.top = true;
break;
case 39:
dir.right = true;
break;
case 40:
dir.bottom = true;
break;
}
}
document.onkeyup = function (ev) {
var ev = ev || event;
switch(ev.keyCode){
//左37,上38,右39,下40
case 37:
dir.left = false;
break;
case 38:
dir.top = false;
break;
case 39:
dir.right = false;
break;
case 40:
dir.bottom = false;
break;
}
}
}
</script>
~~~
### 事件默认行为
~~~
<script>
/*
事件默认行为：当一个事件发生的时候浏览器自己会默认做的事情
例如：空格自动滚动滚动条，点a标签自动跳转，右键弹出菜单..
如何阻止？
先要了解当前这个行为是什么事件触发的，然后在这个的处理函数中
使用 return false;
*/
document.onkeydown = function () {
return false;
}
// oncontextmenu: 右键菜单事件，当右键菜单（环境菜单）显示出来时触发
document.oncontextmenu = function () {
// alert(1);
return false;
}
</script>
<body style="height:2000px;">
</body>
~~~
课堂练习-4：自定义右键菜单
### confirm()，能取消的对话框
