1.事宜
事宜的定義：一切的元素都有事宜，我們要做的就是為事宜綁定函數，當元素髮作事宜時就會動身對應的函數。當我們沒有為事宜綁定函數時，事宜的值為null。
<body>
<div style="width: 100px;height: 100px; background:red"></div>
<script>
var div=document.getElementsByTagName("div")[0];
console.dir(div);//打印div元素上的一切屬性
</script>
</body>以下截取了部份元素的事宜。
2.點擊事宜
須要注重的是：事宜名是click，不是onclik。on指的是在….上。
點擊事宜分為以下三種：
單擊 - click
按下 - mousedown
抬起 - mouseup
右擊 - contextmenu(由於右擊都是依據上下文湧現菜單，所以右擊是contextmenu)
雙擊 - dbclick<body>
<div style="width: 100px;height: 100px; background:red"></div>
<script>
var div = document.getElementsByTagName("div")[0];
//只要在此div上 按下 並 抬起 才會觸發div的點擊事宜
div.onclick=function () {
console.log("click - 點擊");
};
div.onmousedown=function () {
console.log("mousedown - 按下");
};
div.onmouseup=function () {
console.log("mouseup - 抬起");
};
div.oncontextmenu=function () {
console.log("contextmenu - 右擊");
};
div.ondblclick=function () {
console.log("dblclick - 雙擊");
};
</script>
</body>1.當單擊div時，效果為：
會觸發 單擊 抬起 按下 這三個事宜
2.當雙擊div時，效果為：
會觸發兩次 單擊 抬起 按下 這三個事宜
觸發一次 雙擊 事宜
注重：假如雙擊的間隔時間太長，則認定為兩次單擊。
3.當在div地區按下，然則脫離div地區放手。則效果為：
注重：單擊事宜只要在按下 並 抬起的時刻才會觸發。
3.鼠標挪動事宜
鼠標挪動：延續觸發，當鼠標移出此元素上住手觸發。
<body>
<div style="width: 100px;height: 100px; background:red"></div>
<script>
var div=document.getElementsByTagName("div")[0];
div.onmousemove=function () {
console.log("mousemove-鼠標在div上挪動");
}
</script>
</body>當在div地區內挪動時，不斷的打印mousemove-鼠標在div上挪動。當鼠標移出div地區時，住手打印。效果為：
4.鍵盤事宜
鍵盤事宜
平常我們都是綁定在 document上舉行全局的監控,
或許能夠在 表單控件上舉行監聽
鍵盤按下
keydown
keypress - 功能鍵不觸發(鍵盤的上下左右等功能鍵不觸發)
鍵盤抬起
keyup
注重：
keydown 和 keypress的區分：keypress 功能鍵不觸發(比方：鍵盤的上下左右等功能鍵不觸發 keypress 事宜)<body>
<div style="width: 100px;height: 100px; background:red"></div>
<input type="text" id="t">
<script>
var div=document.getElementsByTagName("div")[0];
var input=document.getElementById("t");
document.onkeydown = function(){
console.log( "document - keydown" );
};
document.onkeypress = function(){
console.log( "document - keypress" );
};
document.onkeyup = function(){
console.log( "document - keyup" );
};
//------------------------------------------
t.onkeydown = function(){
console.log( "t - keydown" );
};
t.onkeypress = function(){
console.log( "t - keypress" );
};
t.onkeyup = function(){
console.log( "t - keyup" );
};
</script>
</body>eg：當在此頁面上 按下 鍵盤上的 a ，效果為：
eg：當在此頁面上 按下 鍵盤上的 shfit ，效果為：
eg：當在此頁面上的input框中 輸入 鍵盤上的 a ，效果為：
5.核心事宜
核心
頁面中一些元素 能夠取得 核心,
當他們取得核心的時刻, 我們能夠操縱他們
注重: 不是一切 的 元素 都能夠取得核心
瀏覽器中只會有 一個元素 獲得核心,當一個元素獲得核心的時刻,必定會有另一個元素落空核心
切換核心的要領：
切換核心的體式格局:
1 - 按tab
tabIndex(假如沒運用tabIndex，則用tab切換，是按頁面節點遞次切換。假如寫了tabIndex的值，則按值的大小，從小到大切換)
2 - 點擊
3 - js
4 - html autofocus（頁面翻開就自動獵取核心）
核心事宜
onfocus（獵取核心）
onblur（落空核心）
核心要領
t.focus()
t.blur()
案例一：（代碼運轉效果很難形貌，人人自行運轉。）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box{
width:100px;
height:100px;
background-color:red;
}
</style>
</head>
<body>
<div id="box"></div>
<input type="text" id="t" tabIndex = "1" />
<hr />
<input type="text" id="t2" tabIndex = "3" />
<hr />
<input type="text" tabIndex = "2" autofocus/>
<hr />
<button id="btn">第二個輸入框獵取到核心</button>
<script>
var t = document.getElementById("t");
var t2 = document.getElementById("t2");
var box = document.getElementById("box");
var btn = document.getElementById("btn");
//t獵取核心時，打印t-focus。
t.onfocus = function(){
console.log( "t-focus" );
};
//box獵取不到核心，故打印不出
box.onfocus = function(){
console.log( "box-focus" );
};
//當btu點擊，讓t2挪用獵取核心要領
btn.onclick = function(){
t2.focus();
}
</script>
</body>
</html>
案例二：核心事宜和要領
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box{
width:100px;
height:100px;
background-color:red;
}
</style>
</head>
<body>
<input type="text" id="t" />
<button id="btn">輸入框獵取到核心</button>
<script>
var t = document.getElementById("t");
var btn = document.getElementById("btn");
//獵取核心觸發的事宜
t.onfocus = function(){
console.log( "t - focus" );
};
//落空核心觸發的事宜
t.onblur = function(){
console.log( "t - blur" );
};
btn.onclick = function(){
//btu點擊時，給挪用獵取核心要領
t.focus();
}
</script>
</body>
</html>
