事件委托與鍵盤事件
1.fn()與fn的區別？
fn()：執行裏面的函數
fn: 將函數的內容賦給誰
2.事件委托的解析
onmouseenter，onmouseleave與onmouseover，onmouseout的區別？
onmouseenter獲取的事件源（target）是元素的本身，所以他沒有事件冒泡的機制
onmouseover獲取的事件源（target）是為他的子級，當改變事件源的時候也是改變子級（同時也讓自己擁有了父級的事件）從而就會產生冒泡機制；
3.dom0級與dom2級的區別？
1.dom2級正常事件，先捕獲在冒泡
dom0級無捕獲，直接就冒泡
(addEventListener() 中的第三個參數 true代表捕獲 false代表冒泡)
2. dom0級事件元素綁定多個onclick，最後值執行最後一個onclick
dom2級事件綁定多個click，都要執行（註意：當綁定多個事件名，函數，事件發生階段（捕獲或冒泡），三者完全一樣時，才執行一個）；
案例：
div.addEventListener("click","fn1",false)
div.addEventListener("click","fn1",false) （這種情況下才執行一個，且事件函數不能使用匿名函數）（因為匿名函數開辟的內存地址不一樣，事件函數名相同時，內存地址才一樣）
3.dom0級如果綁定多個相同事件，後者會覆蓋前者，dom2級不會
dom0級只適合普通事件，dom2級需要制定的事件類型如domContentLoaded(當文檔結構加載完成之後執行)
4.事件取消
dom0級直接賦值：null
div.onclick=null
dom2級需要使用removeEventListener()
div.removeEventListener("click","fn1",true)
5.鍵盤事件：
鍵盤事件：onkeydown(鍵盤按下) onkeyup(鍵盤擡起)
document.onkeydown (包括了所有鍵盤，鍵盤事件的常用寫法)
鍵盤事件觸發時，瀏覽器天生自帶一個叫keyboardEvent對象，所有鍵盤信息都在這個對象上
靠keycode來識別你按哪個鍵
我們發現ev有個屬性keycode鍵盤編碼
案例：
document.onkeydown=function(ev){
var ev=ev||window.event
console.log(ev.keycode)
}
右擊鼠標事件：oncontextmenu
案例：鼠標右擊事件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.you{
position:absolute;
width:200px;
height:300px;
border:red 1px solid;
}
</style>
</head>
<body>
</body>
<script>
document.oncontextmenu=function(ev){
var ev=ev||window.event;
ev.preventDefault()||ev.returnValue;
var div=document.createElement("div");
div.className="you";
div.id="you";
var you=document.getElementById("you");
if(you){
document.body.removeChild(you);
div.style.left=ev.clientX+5+"px";
div.style.top=ev.clientY+5+"px";
document.body.appendChild(div)
}
else{
div.style.left=ev.clientX+5+"px";
div.style.top=ev.clientY+5+"px";
document.body.appendChild(div)
}
}
document.onclick=function(){
var you=document.getElementById("you");
document.body.removeChild(you)
}
</script>
鼠標拖拽的案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width:200px;
height:200px;
background:red;
position:absolute;
}
</style>
</head>
<body>
<div id="ha">
</div>
</body>
</html>
<script>
var ha=document.getElementById("ha");
ha.onmousedown=function(ev){
var ev=ev||window.event;
var x=ev.clientX-ha.offsetLeft;
var y=ev.clientY-ha.offsetTop;
document.onmousemove=function(ev){
var ev=ev||window.event;
ha.style.left=ev.clientX-x+"px";
ha.style.top=ev.clientY-y+"px";
}
ha.onmouseup=function(){
document.onmousemove=null;
}
}
</script>
事件委托與鍵盤事件