一、javascript事件基礎

js基礎太重要了，在后面操作的時候感覺有些不熟，回來又重新復習了一遍js的知識點，所以最近更新的都是一些js零碎的知識點，
js事件是在獲取元素之后進行的操作，如果不不知道怎么獲取元素的可以看其他博主的知識點、

1、什么是事件

js使我們有能力去創建動態頁面，事件就是可以被js偵測到的行為
簡單理解就是用戶操作滑鼠或者鍵盤后，觸發了js事件，然后產生對應的機制
比如我們點擊一個按鈕，彈出對話框

2、事件的三要素

事件源>事件型別>事件處理程式

1. 事件源：
   事件被觸發的物件，就是誰觸發了這個事件

2. 事件型別：
   如何觸發，什么事件，比如滑鼠點擊（onclick），滑鼠經過，鍵盤按下，

3. 事件處理程式：
   通過一個函式賦值的方式完成

var btn = document,getElementById(“btn”)；
btn.onclick = function (){
}這就是一個最簡單的事件

3、事件執行的步驟

1、獲取事件源
2、注冊事件（也叫系結事件）
3、添加事件處理程式（ 一般用function函式）

4.操作元素

js的dom操作可以改變網頁內容，結構和樣式，我們就可以利用dom操作元素來改變元素里面的內容 屬性等

1、修改元素內容

element.Text和element.innerHTML
element.innerText
從起始位置到終止位置的內容，但他去除了html標簽同時空格和換行也會去掉 不識別HTML標簽 非標準
element.innerHTML
起始位置到終止位置的全部內容，包括HTML標簽，同時保留了空格和換行，識別HTML標簽 屬于w3c標準，用的比較多
這兩個屬性都是可讀寫的，可以獲得元素里面的內容

2、修改元素屬性

還是老的操作方法：
先獲取元素
注冊事件 處理程式
然后直接呼叫元素的屬性賦值

二、javascript事件高級

主要內容：
注冊事件的兩種方式
洗掉事件的兩種方式
DOM事件流的三個階段
事件物件
封裝阻止冒泡的兼容性函式
事件委托原理
常用的滑鼠和鍵盤事件

1、注冊事件

給元素添加事件，稱為注冊事件或者系結事件，
注冊事件有兩種方式：傳統方式和方法監聽注冊方式

傳統注冊方式：

利用on開頭的事件onclick
<button.onclick =“alert(‘hi’)”>
btn.onclick =function（）{}
特點是：注冊事件的唯一性
同一個元素同一個事件只能設定一個處理函式，最后注冊的處理函式將會覆寫前面注冊的處理函式
因為唯一性的原則導致這種方法有缺陷，要具體情況才可以使用

方法監聽注冊方式

w3c標準方式
addeEventListener()是一個方法
在IE9之前IE不支持此方法，可以使用attachEvent（代替）
在移動端開發的時候用的比較多，不用擔心兼容性

addEventList事件監聽方式

eventTarget.addEventListener（type，listener[,useCapture])
ddEventListener()方法將指定的監聽器注冊到(eventTarget)（目標物件）上，當該物件觸發指定的事件的時候，就會執行事件處理函式
三個引數含義：
type：事件型別字串 比如click mouseover，注意這一不帶on
是一個字符型，必須加引號

listener：事件處理函式，事件發生時，會呼叫該監聽函式

useCapture：可選引數，是一個布林值，默認是false

優點是可以給一個事件，同一個元素添加多個事件處理程式，
缺點兼容性IE9以下不兼容

上面講到lattachEvent，這個是用來解決兼容性的問題， 這個方法ie中可以使用，其他瀏覽器中不行
但是在mdn檔案中不推薦，在IE9之前就用的這個方法，了解即可

也有兼容性的方法可以使用：
這里封裝了應一個函式，如果有需要的可以直接拿去用

function addEventListener(element,eventName,fn) {
//判斷當前瀏覽器是否支持addEventName方法
if(element.addEventListener(eventName,fn);
//第三個引數默認是false
}else if (element.attachEvent){
element.attachEvent('on'+eventName,fn);
}else{
//相當于element.onclick = fn ;
element['on'+eventName] = fn ;
}

兼容性處理的原則：首先照顧大多數瀏覽器，再處理特殊的瀏覽器

2、解綁事件

解綁事件的方式

1、傳統注冊方式
eventTarget.onclick = null;

var divs = document.querySelectorAll('div');
divs[0].onclick = function (){
	alert(11);
	//給第一個div解除系結
	divs[0].onclick = null;
}

2.方法監聽注冊方式
eventTarget.removeEventListener(type,listener[,useCapture]);

eventTarget.detachEvent(eventNameWidthOn,callback);

divs[1].addEventListener('click',fn);
//這里用fn是因為解綁事件的時候不能直接用function 所以使用fn來代替
divs[1].addEventListener('click',fn1);
function fn(){
    alert(22);
    divs[1].removeEventListener('click',fn1);
}

divs[1].attachEvent('click',fn2);
function fn(){
    alert(33);
    divs[1].rdatachEvent('click',fn2);
}

這里我也封裝了一個兼容性的函式，可以直接使用

function removeEventListener(element,eventName,fn){
    //判斷當前瀏覽器是否支持removeEventlistener方法
    if( element.removeEventListener){
        element.removeEventListener(event,fn);
    }else if(element.detachEvent){
        element.detachEvent('on'+eventName,fn);
    }else{
        element['on'+eventName] = null;
    }
}

先寫到這里去吃飯了，晚上回來在接著寫

3、DOM的事件

事件流描述的是從頁面中接受事件的順序，
事件發生時會在元素節點之間按照特定的順序傳播，這個傳播程序稱為DOM事件
DOM事件流分為三個階段

1.捕獲階段
2.當前目標階段
3.冒泡階段

事件冒泡：IE最早提出，事件開始市由具體的元素接受，然后逐級向上傳播到DOM最頂層節點的程序
事件捕獲：網景最早提出，由DOM最頂層節點開始，然后逐級向下傳播到最具體的元素的接受程序，

注意點：

js代碼中只能執行捕獲或者冒泡其中一個階段
onclick和attachEvent，只能得到冒泡階段
addEventListener（）第三個引數如果是true，在事件捕獲階段呼叫事件處理程式；如果是false（不寫默認就是false），表示在事件冒泡階段呼叫事件處理程式，

4、事件物件

定義：

事件物件是我們事件的一系列相關資料的集合，跟事件相關的，比如滑鼠點擊就包含滑鼠坐標，鍵盤事件的資訊，比如判斷用戶按下哪個鍵

具體位置

div.onclick = function（event）{}
event就是事件物件

注意：

1、event就是一個事件物件，寫到偵聽函式小括號里面，可以作為形參來看
2、事件物件只有有了事件才會存在、他是系統自動創建的，不需要我們傳引數
3、事件物件不一定要寫event，開發中我們一般用e來代替，自定義名字
4、事件物件也有兼容性問題，IE678通過window.event

事件物件常見的屬性和方法

區別

.target 和 this 的區別：
this 是事件系結的元素， 這個函式的呼叫者（系結這個事件的元素）
e.target 是事件觸發的元素，

兼容性解決辦法

事件物件本身的獲取存在兼容問題：

1. 標準瀏覽器中是瀏覽器給方法傳遞的引數，只需要定義形參 e 就可以獲取到，
2. 在 IE6~8 中，瀏覽器不會給方法傳遞引數，如果需要的話，需要到 window.event 中獲取查找，
   解決:
   e = e || window.event;

5、阻止事件冒泡

事件冒泡：開始時由最具體的元素接收，然后逐級向上傳播到到 DOM 最頂層節點，
事件冒泡本身的特性，會帶來的壞處，也會帶來的好處，需要我們靈活掌握，

阻止事件冒泡的兩種方法：

標準寫法：利用事件物件里面的 stopPropagation()方法
e.stopPropagation()
非標準寫法：IE 6-8 利用事件物件 cancelBubble 屬性
e.cancelBubble = true;

封裝的兼容性函式：

if(e && e.stopPropagation){
 e.stopPropagation();
}else{
 window.event.cancelBubble = true;
}

6、事件的委托（代理，委派）

事件委托也稱為事件代理， 在 jQuery 里面稱為事件委派，

原理：

不是每個子節點單獨設定事件監聽器，而是事件監聽器設定在其父節點上，然后利用冒泡原理影響設定每個子節點
作用是指操作了一次DOM，提高了程式的性能

7、常見的滑鼠鍵盤事件

完結撒花！！！！！！！