事件

事件的組成:元素、事件型別、事件處理函式

事件物件e

當事件觸發的時候 會產生很多的資訊 這些資訊被封裝成一個物件 並傳遞到事件處理函式中

div.onclick = function(e) {
// e 就是事件物件 我們可以根據它獲取到許多的資訊
}

事件物件的重要屬性

滑鼠事件

altKey 熱鍵alt鍵是否被按下

ctrlKey 熱鍵ctrl鍵是否被按下

shiftKey 熱鍵shift鍵是否被按下

offsetX 事件發生時滑鼠位於元素內部的left位置(從滑鼠位置到左邊框內)

offsetY 事件發生時滑鼠位於元素內部的top位置(從滑鼠位置到上邊框內)

clientX 事件發生時滑鼠到視口的左邊距離

clientY 事件發生時滑鼠到視口的上邊距離

pageX 事件發生時滑鼠到頁面的左邊距離

pageY 事件發生時滑鼠到頁面的上邊距離

currentTarget 繫結事件的元素

target 觸發事件的元素

screenX 返回滑鼠相對於電腦螢幕的X座標

screenY 返回滑鼠相對於電腦螢幕的Y座標

鍵盤事件

key 表示當前的鍵對應的字元

keyCode 表示當前的鍵對應的字元的ASCII碼

onkeyup 某個鍵盤按鍵被鬆開時觸發

onkeydown某個鍵盤按鍵被按下時觸發

onkeypress某個鍵盤按鍵被按下時觸發但是它不識別功能鍵

注意:

1.如果使用addEventListener不需要加on

2. onkeypress 和前面2個的區別是,它不識別功能鍵，比如左右箭頭, shift 等。

3.三個事件的執行順序是: keydown-- keypress --- keyup

事件物件:事件發生後，跟事件相關的一系列資訊資料的集合都放到這個物件裡面，這個物件就是事件物件。

比如：

1. 誰綁定了這個事件。

2. 滑鼠觸發事件的話，會得到滑鼠的相關資訊，如滑鼠位置。

3. 鍵盤觸發事件的話，會得到鍵盤的相關資訊，如按了哪個鍵。

事件物件的使用：

事件觸發發生時就會產生事件物件，並且系統會以實參的形式傳給事件處理函式。

所以，在事件處理函式中宣告1個形參用來接收事件物件。

事件物件的屬性和方法

e.target 和 this 的區別:

this是事件繫結的元素（繫結這個事件處理函式的元素） 。

e.target 是事件觸發的元素。

事件繫結方式

DOM 0級

繫結

元素.on事件型別 = 事件函式

只能夠繫結一個事件 因為它是對屬性進行賦值

移除

元素.on事件型別 = null

我們都知道，一個物件的屬性只能夠儲存一個值。 如果對一個物件屬性進行多次賦值，後面賦值的屬性會替換掉前面的屬性

DOM 2級

繫結

dom.addEventListener(type, handler, boolean)

type: 事件型別字串 不帶on

handler: 事件處理函式

boolean: 布林值 決定繫結到捕獲階段還是冒泡階段 預設是false false表示冒泡

結論: 可以通過addEventListener方法進行多個事件函式的繫結 執行時是按照程式碼的書寫順序執行 因為程式碼的書寫順序決定了繫結順序 如果有DOM0級與DOM2級同時存在，依舊按照繫結順序執行

移除

document.removeEventListener(type, handler, boolean);

type: 事件型別字串 不帶on

handler: 事件處理函式 一定要保證函式地址是繫結的那個

boolean: 布林值 決定移除的是捕獲階段還是冒泡階段 預設是false false表示冒泡

結論: 第二個引數是要移除的函式 函式是引用型別 引用型別的比較的是地址 所以一定要保證 移除的函式是當初繫結的那個函式本身

IE中的高階繫結方式(非DOM2級)

IE中沒有實現DOM2級

繫結方式:

dom.attachEvent(type, handler);

type: 事件型別字串 帶on

handler: 事件處理函式

沒有第三個引數 意味著不能夠繫結到捕獲階段 特點: 可以對同一個元素繫結多個同類型事件的處理函式 執行起來是倒著執行 先繫結的後執行 後繫結的先執行 如果DOM0級與高階繫結方式同時存在，先執行DOM0級。再逆序執行高階繫結的函式。

移除方式:

dom.detachEvent(type, handler);

type: 事件型別字串 帶on

handler: 事件處理函式 要注意函式的地址問題

刪除事件(解綁事件)

1.傳統註冊方式

eventTarget. onclick = null;

2.方法監聽註冊方式

①eventTarget. removeEventListener (type，listener[， useCapture] ) ;

②eventTarget . detachEvent (eventNameWithOn, callback) ;

事件流程：同一類事件的觸發順序

事件捕獲: 當點選時 事件從最頂層元素 一層一層的往下觸發 直到最精確元素

事件冒泡: 當點選時 事件從最精確的元素 一層一層往上觸發 直到最頂層元素

最精確元素: 滑鼠點到誰 誰就是最精確元素

最頂層元素:

高階瀏覽器 最頂層元素是window

IE中 最頂層元素是 document

注：當元素是最精確元素時，不區分它身上的捕獲和冒泡，而是按照繫結順序執行。

阻止冒泡

高階瀏覽器中 可以通過e.stopPropagation() 進行阻止事件的冒泡

// 高階瀏覽器中
// box1是box2的父元素
var box1 = document.querySelector(".box1");
var box2 = document.querySelector(".box2");
​
box1.onclick = function() {
console.log("這是BOX1");
}
box2.onclick = function(e) {
e.stopPropagation();
console.log("這是BOX2");
}

IE瀏覽器中 可以通過e.cancelBubble = true 進行阻止事件的冒泡

// IE瀏覽器中
// box1是box2的父元素
var box1 = document.querySelector(".box1");
var box2 = document.querySelector(".box2");
​
box1.onclick = function() {
console.log("這是BOX1");
}
box2.onclick = function(e) {
var e = e || window.event;
e.cancelBubble = true;
console.log("這是BOX2");
}

DOM 事件流會經歷3個階段：

1. 捕獲階段

2. 當前目標階段

3. 冒泡階段

停止預設行為

瀏覽器的一些事件中，帶有一些預設行為 比如a標籤的點選事件中 會帶有跳轉頁面的行為 表單的點選事件中 帶有提交的預設行為 滾輪事件中 帶有改變頁面捲動值的預設行為

（1）高階瀏覽器中 可以通過 e.preventDefault() 阻止預設行為

// 獲取元素

var a = document.getElementsByTagName("a")[0];

// 設定點選事件

a.addEventListener("click", function(e) {

console.log("點選了a標籤1111");

e.preventDefault();

}, false);

（2）IE瀏覽器中 可以通過 e.returnValue = false; 阻止預設行為

// 獲取元素

var a = document.getElementsByTagName("a")[0];

// 設定點選事件

a.attachEvent("onclick", function(e) {

console.log("點選了a標籤1111");

e.returnValue = false;

});

（3）DOM0級事件繫結方式中，可以通過return false進行阻止預設行為

// 獲取元素

var a = document.getElementsByTagName("a")[0];

// 設定點選事件

a.onclick = function() {

return false;

}

事件委託(事件代理)

思想: 將原本子元素做的事情，委託給父元素去做。將事件繫結給父元素，父元素事件觸發時，通過e.target判定觸發事件的元素。決定執行對應程式碼。

// 1 獲取元素 獲取不可能被移除的父元素

var tbody = document.querySelector("tbody");

// 2 給tbody繫結事件

tbody.onclick = function(e) {

// e.target 這個屬性指向觸發事件的元素

console.log(e.target)

// 判定 點選到的是什麼

if (e.target.className === "del") {

// 點選到的是移除按鈕

e.target.parentNode.remove();

}

}

事件委託的作用：

我們只操作了一次 DOM ，提高了程式的效能。

動態新建立的子元素，也擁有事件。

事件委託：事件冒泡本身的特性，會帶來的壞處，也會帶來的好處。

什麼是事件委託：把事情委託給別人，代為處理。

事件委託也稱為事件代理，在 jQuery 裡面稱為事件委派。

說白了就是，不給子元素註冊事件，給父元素註冊事件，把處理程式碼在父元素的事件中執行。

生活中的代理：

js事件中的代理：

事件委託的原理

給父元素註冊事件，利用事件冒泡，當子元素的事件觸發，會冒泡到父元素，然後去控制相應的子元素。

<ul>
<li>知否知否，點我應有彈框在手！</li>
<li>知否知否，點我應有彈框在手！</li>
<li>知否知否，點我應有彈框在手！</li>
<li>知否知否，點我應有彈框在手！</li>
<li>知否知否，點我應有彈框在手！</li>
</ul>
<script>
// 事件委託的核心原理：給父節點新增偵聽器， 利用事件冒泡影響每一個子節點
var ul = document.querySelector('ul');
ul.addEventListener('click', function(e) {
// e.target 這個可以得到我們點選的物件
e.target.style.backgroundColor = 'pink';
})
</script>

案例：禁止選中文字和禁止右鍵選單

1禁止滑鼠右鍵選單

contextmenu主要控制應該何時顯示上下文選單，主要用於程式設計師取消預設的上下文選單

document. addEventLi stener ('contextmenu'，function(e){

e.preventDefault () ;

})

2.禁止滑鼠選中(selectstart開始選中)

document. addEventLi stener ('selectstart', function(e) {

e.preventDefault();

})

<body>
我是一段不願意分享的文字
<script>
// 1. contextmenu 我們可以禁用右鍵選單
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
})
// 2. 禁止選中文字 selectstart
document.addEventListener('selectstart', function(e) {
e.preventDefault();
})
</script>
</body>

獲取滑鼠在頁面的座標

 <script>

   // 滑鼠事件物件 MouseEvent

   document.addEventListener('click', function(e) {

     // 1. client 滑鼠在可視區的x和y座標

     console.log(e.clientX);

     console.log(e.clientY);

     console.log('---------------------');

​

     // 2. page 滑鼠在頁面文件的x和y座標

     console.log(e.pageX);

     console.log(e.pageY);

     console.log('---------------------');

​

     // 3. screen 滑鼠在電腦螢幕的x和y座標

     console.log(e.screenX);

     console.log(e.screenY);

​

   })

 </script>

立即執行函式：

//1.立即執行函式:不需要呼叫，立馬能夠自己執行的函式

functionfn(){

console.log(1);

}

fn();

//2.寫法也可以傳遞引數進來

//1.(function(){})()或者2.(function(){}());

(function(a,b){

console.log(a+b);

varnum=10;

})(1,2);//第二個小括號可以看做是呼叫函式

(functionsum(a,b){

console.log(a+b);

varnum=10;//區域性變數

}(2,3));

//3.立即執行函式最大的作用就是獨立建立了一個作用域,裡面所有的變數都是區域性變數不會有命名衝突的情況