關於事件可以查看這篇文章~
一、事件分類
1、鍵盤事件
onkeydown，onkeyup，onkeypress（相當於前面兩個事件）
2、表單事件
onfocus,onblur,onselected,onchange
3、鼠標事件
1)、
onmouseover,onmousemove,onmouseout,onmouseleave,onmouseenter，onmousedown,onmouseup,onclick,ondbclick（雙擊事件）
2)、onmouseout,onmouseleave事件區別
不論鼠標指針離開被選元素還是任何子元素，都會觸發mouseout事件
只有在鼠標指針離開被選元素時，纔會觸發mouseleave事件
4、瀏覽器事件
onload,onreload,onresize,onerror(圖片加載失敗的適合觸發)
二、事件寫法
1、直接在標籤上寫
①
函數名()+ script標籤裏的函數
②直接寫語句
③自執行函數()()
<div class="title">
<button onclick="con()">點我</button>
<button onclick="console.log('就點你')">點我</button>
<button onclick="(function b(){console.log('還想點你');})()">點我</button>
</div>
<script>
function con(){
console.log("點我幹啥");
}
</script>
2、動態綁定事件
①獲取dom，
btn.onclick=函數
②獲取dom，變量=函數，btn.onclick=變量
不能綁定多個事件
<div class="title">
<button onclick="con">點我</button>
</div>
<script>
var btn=document.getElementsByTagName("button")[0];
第一種：使用匿名函數
btn.onclick=function (){
console.log("點我幹啥");
}
第二種：將函數賦給一個變量，con沒有括號！！！
con=function (){
console.log("點我幹啥");
}
btn.onclick=con;
事件的移除
btn.onclick=null;//事件的移除
</script>
3、事件的監聽
addEventListener(事件類型，fn，事件捕捉true/冒泡false)
事件監聽時，不加on
<ul>
<li>1</li>
<li>2</li>
<li id="li3" onclick="con">3</li>
</ul>
var li3=document.getElementById("li3");
li3.addEventListener("click",function (){
console.log("就想點你");
})
關於第三個參數 事件的冒泡與捕捉
IE可以爲同一個元素綁定你所希望的多個事件，同時並不會覆蓋先前綁定的事件
var ul=document.getElementsByTagName("ul")[0];
var li=document.getElementsByTagName("li");
ul.addEventListener("click",function (){
console.log("就想點你");
},true); 捕獲，先執行父元素，再執行子元素
ul.addEventListener("click",function (){
console.log("就想點你");
},false); 冒泡，先執行子元素，再執行父元素
li[0].addEventListener("click",function(){
console.log(2);
})
阻止事件冒泡
e.stopPropagation();
return false原生js中不能阻止事件冒泡！，jquery中不僅可以阻止事件冒泡，還可以阻止事件默認行爲
li[0].addEventListener("click",function(e){
console.log(2);
e.stopPropagation();
})
阻止瀏覽器默認行爲
1）瀏覽器默認行爲有
①超鏈接的默認行爲：跳轉
②瀏覽器的拖拽事件：ondragstart
③右鍵菜單事件：oncontextmenu；
2）阻止瀏覽器默認行爲 event.preventDefault()；
超鏈接
鏈接不會被打開，但是會發生冒泡
①<a href = “javascript: void(0);”>
②event.preventDefault();
③event.returnValue = false;
<div>
<ul>
<li>1</li>
<li>2</li>
<li id="li3"><a href="test.html">去別的頁面</a></li>
</ul>
</div>
var ul=document.getElementsByTagName("ul")[0];
var li=document.getElementsByTagName("li");
var ha=document.getElementsByTagName("a")[0];
ha.addEventListener("click",function(event){
event.preventDefault();//標準寫法
event.returnValue = false;//非標準寫法
//兼容寫法
event.preventDefault? event.preventDefault(): event.returnValue = false;
})
ul.addEventListener("click",function (){
console.log("就想點你");
});//冒泡，先執行子元素，再執行父元素
li[1].addEventListener("click",function(){
console.log(2);
})
拖拽
默認地，無法將數據/元素放置到其他元素中。如果需要設置允許放置，就必須阻止對元素的默認處理方式。可以用ondragover="allowDrop(event), 但是return false;在這裏沒效果！！！
下面的是菜鳥的例子 取消默認事件後，div中可放圖片！
點這裏看效果！！！
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>拖動 RUNOOB.COM 圖片到矩形框中:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>
三、事件執行參數、事件委託
1、事件執行參數
1）事件的執行對象直接添加事件匿名函數上面
document.body.onkeypress=function(e){
console.log(e);
console.log(e.Keycode);//e
}
2）聲明變量使用
window.event,調用事件的執行對象
document.body.onkeypress=function(){
var e=window.event;
console.log(e);
}
2、事件委託
將加到子節點上的事件加到其父節點上，作用是爲了提高性能，原理是利用了事件冒泡
事件源的獲取
var target = event.target || event.srcElement；
<div>
<ul>
<li>1</li>
<li>2</li>
<p>haha在這裏</p>
<li id="li3"><a href="test.html">去別的頁面</a></li>
</ul>
</div>
var ul=document.getElementsByTagName("ul")[0];
var li=document.getElementsByTagName("li");
var p=document.getElementsByTagName("p")[0];
ul.onclick=function (e){
var child=e.srcElement||e.target;
if(child.nodeName.toLowerCase()=="p"){
console.log("就是你了，p標籤");
}
};
四、事件流
在標準的“DOM2級事件”中規定，事件流首先是經過事件捕獲階段，接着是處於目標階段，最後是事件冒泡階段。
