摘要：事件流包括兩種模式冒泡和捕獲。和事件名，函數(shù)，此方法不支持僅僅支持兩個(gè)參數(shù)事件名稱(chēng)事件回調(diào)。事件中沒(méi)有這個(gè)屬性。鼠標(biāo)相對(duì)于事件源元素的左邊界上邊界坐標(biāo)，只有事件有這個(gè)屬性，標(biāo)準(zhǔn)事件沒(méi)有對(duì)應(yīng)的屬性。

事件就是文檔或?yàn)g覽器窗口中發(fā)生的一些特定的交互瞬間【觸發(fā)與響應(yīng)】
事件觸發(fā)：用戶(hù)在頁(yè)面上操作(如點(diǎn)擊按鈕, 鼠標(biāo)滑過(guò), 鼠標(biāo)點(diǎn)擊, 鼠標(biāo)松開(kāi), 文本框獲得焦點(diǎn), 失去焦點(diǎn)等)

捕獲--目標(biāo)--冒泡

事件流
事件流是描述的從頁(yè)面接受事件的順序，當(dāng)幾個(gè)都具有事件的元素層疊在一起的時(shí)候， 那么你點(diǎn)擊其中一個(gè)元素，并不是只有當(dāng)前被點(diǎn)擊的元素會(huì)觸發(fā)事件，而層疊在你點(diǎn)擊范圍的所有元素都會(huì)觸發(fā)事件。事件流包括兩種模式：冒泡和捕獲。

事件冒泡
事件冒泡是從里往外逐個(gè)觸發(fā). 事件捕獲, 是從外往里逐個(gè)觸發(fā). 現(xiàn)代的瀏覽器默認(rèn)情況下都是事件冒泡的模式.

"on"+事件名

表單：

change事件---域的內(nèi)容被改變
focus事件--元素獲得焦點(diǎn)(不冒泡)
blur事件---元素失去焦點(diǎn)（不冒泡）

window事件：

load事件--頁(yè)面資源包括圖像完成加載，當(dāng)頁(yè)面完全加載后觸發(fā)
resize事件---窗口改變。
scroll事件---當(dāng)用戶(hù)滾動(dòng)帶滾動(dòng)條的元素時(shí)觸發(fā)

鼠標(biāo)事件：

contextmenu--鼠標(biāo)右鍵
click事件---單擊
mouseover事件（冒泡）---當(dāng)鼠標(biāo)移入某個(gè)元素的那一刻觸發(fā)
mouseenter事件（不冒泡）----當(dāng)鼠標(biāo)移入某個(gè)元素的那一刻觸發(fā)
mouseout事件（冒泡）---當(dāng)鼠標(biāo)剛移出某個(gè)元素的那一刻觸發(fā)
mouseleave事件（不冒泡）----當(dāng)鼠標(biāo)剛移出某個(gè)元素的那一刻觸發(fā)

mouseover和 mouseenter的區(qū)別是:
mouseover,mouseout: 元素的子元素也會(huì)觸發(fā)事件
mouseenter ,mouseleave: 元素的子元素不會(huì)觸發(fā)事件

鍵盤(pán)事件--一般由window對(duì)象或者document對(duì)象調(diào)用

keydown事件---某個(gè)鍵盤(pán)按鍵被按下
keyup事件----某個(gè)鍵盤(pán)按鍵被松開(kāi)。
keypress事件----某個(gè)鍵盤(pán)按鍵被按下并松開(kāi)。

1．事件源：要綁定事件的對(duì)象；
2．事件名稱(chēng)：發(fā)生了或是綁定了什么事件；
3．事件處理程序：要執(zhí)行的函數(shù)或是要處理的結(jié)果。

（1） 行內(nèi)式：頁(yè)面的標(biāo)簽當(dāng)中---不利于維護(hù)

行內(nèi)式注冊(cè)事件，將事件類(lèi)型當(dāng)作屬性名，屬性值為一個(gè)調(diào)用我們?cè)趈s中定義好的函數(shù)。相當(dāng)于函數(shù)的返回值賦給onclick

點(diǎn)我

內(nèi)聯(lián)模式調(diào)用的函數(shù)不能放到window.onload里面, 否則會(huì)找不到該函數(shù).

（2） 內(nèi)嵌式(屬性綁定模式)： 寫(xiě)在script標(biāo)簽之間---只能綁定一個(gè)函數(shù)

//先獲取到元素節(jié)點(diǎn)對(duì)象, 再針對(duì)該節(jié)點(diǎn)對(duì)象添加事件
var box=document.getElementById("box")
box.onclick=function(){
alert("點(diǎn)我才彈出來(lái)")

（3） 導(dǎo)入式：后面一般用的多
把代碼存放在.js文件中，導(dǎo)入到html文件

（1）on+type

var oBtn = document.getElementById("btn1");
oBtn.onclick=function(){
alert("a")
}
oBtn.onclick=function(){
alert("b") //一個(gè)節(jié)點(diǎn)對(duì)象只能邦定一個(gè)同名事件，后面的后覆蓋掉前面的
}

（2）addEventListener:標(biāo)準(zhǔn)事件（ie不支持）
element.addEventListener("click", fn, false);
//三個(gè)參數(shù)："事件名稱(chēng)", "事件回調(diào)", "捕獲（true）/冒泡(false)"。

//FF和Chrome  addEventListener(事件名，函數(shù))，此方法ie不支持
var oBtn = document.getElementById("btn1");
oBtn.addEventListener("click",function()
{
 alert("a");
});
oBtn.addEventListener("click",function()
{
 alert("b");
 })

（3）attachEvent：僅僅ie支持
element.attachEvent("onclick", fn);
//兩個(gè)參數(shù)："on事件名稱(chēng)", "事件回調(diào)"。

var oBtn = document.getElementById("btn1");
//IE  attachEvent(事件名，函數(shù))，此方法只有ie支持，F(xiàn)F和Chrome均不支持
oBtn.attachEvent("onclick",function()
{
  alert("a");
});
oBtn.attachEvent("onclick",function()
{
  alert("b");
})

兼容的寫(xiě)法：

//ie只支持attachEvent,而FF和Chrome只支持addEventListener
function addEvent(obj,ev,fn)
    //obj為要綁定事件的元素，ev為要綁定的事件，fn為綁定事件的函數(shù)
{
  if(obj.attachEvent)
  {
  obj.attachEvent("on" + ev,fn);
  }
  else
  {
    obj.addEventListener(ev,fn,false);
  }
}

//綁定事件
addEvent(oBtn,"click",function()
{
  alert("a");
})

function removeEventListener(element,type,listener){
    if(element.removeEventListener){
        element.removeEventListener(type,listener,false); //標(biāo)準(zhǔn)事件
    }else if(element.detachEvent){
        element.detachEvent("on"+type,listener);  //ie事件
    }else {
        element["on"+type] = null; //屬性綁定事件
    }
}

event對(duì)象是在觸發(fā)事件時(shí), 瀏覽器會(huì)通過(guò)函數(shù)把事件對(duì)象作為參數(shù)傳遞過(guò)來(lái), 在事件觸發(fā)執(zhí)行函數(shù)時(shí)一般會(huì)得到一個(gè)隱藏的參數(shù), 該參數(shù)也是放在arguments數(shù)組中

//普通函數(shù)的arguments
function func() {
    console.log(arguments.length); //1, 得到一個(gè)傳遞的參數(shù)
}
func("hello");

//事件綁定的執(zhí)行函數(shù)
box.onclick = function(){
     console.log(arguments.length); //1, 得到一個(gè)隱藏參數(shù)
     console.log(arguments); //數(shù)組
     console.log(arguments[0]); //獲得該事件對(duì)象([object MouseEvent])

};

通過(guò)上面兩組函數(shù)中, 我們發(fā)現(xiàn), 通過(guò)事件綁定的執(zhí)行函數(shù)是可以得到一個(gè)隱藏參數(shù)的. 說(shuō)明瀏覽器會(huì)自動(dòng)分配一個(gè)參數(shù)，這個(gè)隱藏參數(shù)其實(shí)就是event對(duì)象(事件對(duì)象)

通過(guò)函數(shù)內(nèi)部的arguments數(shù)組對(duì)象獲取

box.onclick = function(){
     console.log(arguments[0]); //獲得該事件對(duì)象([object MouseEvent])

};

通過(guò)給函數(shù)添加一個(gè)自定義的形參(推薦)

box.onclick = function(e){
     console.log(e);   //[object MouseEvent]
}

event事件兼容問(wèn)題：
ie不能通過(guò)傳遞的參數(shù)來(lái)獲取，需要用到全局的window.event來(lái)獲取

兼容代碼

box.onclick = function(evt){
     var e= evt || window.event; //獲取到event對(duì)象(事件對(duì)象)
     console.log(e);
};

其中window.event中的window可以省略, 最終我們可以寫(xiě)成:
box.onclick = function(evt){
     var e= evt || event; //獲取到event對(duì)象(事件對(duì)象)
     console.log(e);
};

注意: evt||event不要倒過(guò)來(lái)寫(xiě)

button--返回的是鼠標(biāo)鍵碼(0代表鼠標(biāo)左鍵,1代表鼠標(biāo)滾動(dòng),2代表鼠標(biāo)右鍵)

event.clientX、event.clientY

鼠標(biāo)相對(duì)于瀏覽器窗口可視區(qū)域的X，Y坐標(biāo)（窗口坐標(biāo)），會(huì)隨頁(yè)面左右滾動(dòng)而改變
可視區(qū)域不包括工具欄和滾動(dòng)條。IE事件和標(biāo)準(zhǔn)事件都定義了這2個(gè)屬性

event.pageX、event.pageY

瀏覽器內(nèi)容區(qū)域的x,y坐標(biāo), 不會(huì)隨頁(yè)面滾動(dòng)而改變
類(lèi)似于event.clientX、event.clientY，但它們使用的是文檔坐標(biāo)而非窗口坐標(biāo)
這2個(gè)屬性不是標(biāo)準(zhǔn)屬性，但得到了廣泛支持。IE事件中沒(méi)有這2個(gè)屬性。

event.offsetX、event.offsetY

鼠標(biāo)相對(duì)于事件源元素（srcElement）
的X(左邊界),Y（上邊界）坐標(biāo)，只有IE事件有這2個(gè)屬性，標(biāo)準(zhǔn)事件沒(méi)有對(duì)應(yīng)的屬性。

event.screenX、event.screenY

目標(biāo)對(duì)象,存放綁定事件的元素節(jié)點(diǎn)對(duì)象

標(biāo)準(zhǔn)事件對(duì)象使用 event 的 target 屬性獲取事件目標(biāo)event.target
IE 事件對(duì)象使用 event 的 srcElement 屬性獲取事件目標(biāo)

獲取事件目標(biāo)對(duì)象兼容代碼寫(xiě)法：

box.onclick = function(evt){
     var e= evt || event; //獲取到event對(duì)象(事件對(duì)象)
     var objEle = eve.target || eve.srcElement;//獲取事件目標(biāo)對(duì)象
};

事件對(duì)象event：

1.target: 指向事件觸發(fā)的目標(biāo)元素對(duì)象，第一個(gè)事件源
2.currentTarget: 事件處理函數(shù)的元素對(duì)象，始終與 this 相等;

target在事件流的目標(biāo)階段；currentTarget在事件流的捕獲，目標(biāo)及冒泡階段。只有當(dāng)事件流處在目標(biāo)階段的時(shí)候，兩個(gè)的指向才是一樣的， 而當(dāng)處于捕獲和冒泡階段的時(shí)候，target指向被單擊的對(duì)象而currentTarget指向當(dāng)前事件活動(dòng)的對(duì)象（一般為父級(jí)）
在事件里面，this始終指代當(dāng)前對(duì)象  始終是觸發(fā)事件的事件源 或者是始終是正在執(zhí)行事件處理函數(shù)的事件源

//target等于目標(biāo)節(jié)點(diǎn)對(duì)象（點(diǎn)擊的元素節(jié)點(diǎn)對(duì)象）鼠標(biāo)點(diǎn)了那就是具體的目標(biāo)節(jié)點(diǎn)對(duì)象
//currentTarget是隨著事件流，永遠(yuǎn)等于this，
//this等于正在執(zhí)行事件處理函數(shù)的事件的對(duì)象
//currentTarget指向當(dāng)前事件活動(dòng)的對(duì)象(跟this理解是一樣)

但是一般我們只在指定的節(jié)點(diǎn)上添加事件, 而不想讓其傳遞到下層節(jié)點(diǎn)觸發(fā)事件, 這樣我們就需要阻止事件冒泡;

阻止事件冒泡有兩個(gè)方法:
( 在指定不想再繼續(xù)傳遞事件的節(jié)點(diǎn)的事件執(zhí)行函數(shù)中使用)
1.取消冒泡, IE

 e.cancelBubble = true;

停止傳播, 非IE
e.stopPropagation();

例如:

document.getElementsByTagName("input")[0].onclick= function(evt){
     var e = evt || window.event;
     //可以通過(guò)下述兩個(gè)方法取消事件冒泡
     e.cancelBubble = true || e.stopPropagation();

}

1.return false
//阻止默認(rèn)的右鍵菜單

document.oncontextmenu = function(){
      console.log("右鍵被按下");
      return false;
}

//第一種：

    

var imgBox =document.getElementById("img");
function turn1(link){
        imgBox.src = link.href;
}

//第二種：

    

function turn2(link){
        imgBox.src = link.href;
        return false;
}

//第三種：

    

  var link3=document.getElementById("link3");
 link3.onclick= function () {
        imgBox.src=link3.href;
        return false;
    }

標(biāo)準(zhǔn)事件對(duì)象使用 event 的 preventDefault() 方法取消事件默認(rèn)行為

event.preventDefault(); // 瀏覽器不會(huì)跳轉(zhuǎn)

3.IE 事件對(duì)象使用 event 的 returnValue 屬性取消事件默認(rèn)行為，該屬性默認(rèn)值為 true 設(shè)置為 false 就可以取消事件默認(rèn)行為。
event.returnValue = false; // 瀏覽器不會(huì)跳轉(zhuǎn)

兼容代碼寫(xiě)法：

function StopDefault(){
    if(window.attachEvent){
      event.returnValue = false;
    }else if(window.addEventListener){
      event.preventDefault();
    }
}

所有按鍵(包括功能鍵control, alt,shift, tab, 方向鍵等, 不包括亮度,音量..的按鍵)在發(fā)生 keydown和keyup 事件時(shí)，event對(duì)象的 keyCode屬性中會(huì)包含一個(gè)代碼，與鍵盤(pán)上一個(gè)特定的鍵對(duì)應(yīng)。對(duì)數(shù)字字母字符集，keyCode屬性的值與 ASCII 碼中對(duì)應(yīng).

document.onkeydown = function(evt) {
      var e = evt || event;
      console.log(e.keyCode);  //按任意鍵，得到相應(yīng)的 keyCode
};

注意: 大寫(xiě)字母或小寫(xiě)的編碼相同, 都為大寫(xiě)字母。

Firefox, Chrome和Safari的event對(duì)象支持charCode屬性, 只有按下字符鍵并且使用keypress事件時(shí)才會(huì)得到charCode, 這個(gè)charCode的值和ASCII碼對(duì)應(yīng), 和keyCode也類(lèi)似, 但是charCode的字母區(qū)分大小寫(xiě). ( 字符鍵: 數(shù)字, 字母(區(qū)分大小寫(xiě)), 字符, 空格, 回車(chē) )

document.onkeypress = function(evt) {
      var e = evt || event;
      console.log(e.charCode);
}

注：可以使用 String.fromCharCode()將 ASCII 編碼轉(zhuǎn)換成實(shí)際的字符