### 焦點
理解為光標所在位置，但不是所有元素都能夠接收焦點，如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()，能取消的對話框
