JavaScript學習總結（九）事件詳解

LiveVideoStack 發布于2019-08-21 10:21 / 3038人閱讀

摘要：布爾值表示捕獲階段調用事件處理程序，表示冒泡階段通過對象的方法，也可以定義事件的回調函數。對象會被作為第一個參數傳遞給事件監聽的回調函數。布爾默認值是，當設置成時用以取消事件的默認行為與中的相同。

其實這篇文章挺早之前就寫了，但是由于sf保存方面的bug，所以當時寫了一大堆，結果沒保存，覺得這個沒寫完是個不小的遺憾，今天正好有空，就給補充下了，也正好給我的javascript學習總結做一個完結篇。

其實之前的文章也涉及到部分事件，可以參照我的文章：JavaScript學習總結（三）BOM和DOM詳解

這里，主要討論一下js相關的事件——

事件處理程序

在DOM中定義了一些事件，而響應某個事件的函數就叫事件處理程序（或事件偵聽器）。事件處理程序的名字一般以“on”開頭，例如：onclick等

事件冒泡與捕獲

事件流指的是頁面中接收事件的順序，IE，火狐和chrome瀏覽器都是事件冒泡，所謂是事件冒泡指的是事件最開始由最具體的元素接收，然后逐級向上傳播到不具體的節點。而事件捕獲則正好相反，事件捕獲是由Netscape提出的，事件冒泡和捕獲具體如下圖所示：

雖然事件捕獲是Netscape唯一支持的事件流模型，但目前IE9，火狐和谷歌也都支持這種事件流模型。

事件冒泡的好處

因為事件具有冒泡機制，因此我們可以利用冒泡的原理，把事件加到父級上，觸發執行效果。這樣做的好處當然就是提高性能了，

這樣我們就可以做到li上面添加鼠標事件。但是如果說我們可能有很多個li用for循環的話就比較影響性能。
下面我們可以用事件委托的方式來實現這樣的效果。html不變:

那么，如何阻止事件的冒泡呢，看下面一個例子：

點擊黑色外圍的效果圖：

DOM 0級事件處理程序

通過js指定事件處理程序通常是將回調函數賦給這個事件處理程序的屬性。每個元素都有自己的事件處理程序屬性（屬性小寫，例如：onclick）

btn.onclick = function(){
    console.log("hello");
};

使用DOM 0級指定的事件處理程序被認為是元素的方法。因此，this指向當前元素：

var btn = document.getElementById("myDiv");

//DOM上觸發的事件會產生一個事件對象event
btn.onclick = function (event) {
    alert(this.id);//myDiv  
};

DOM level 1

DOM level 1 專注于 HTML 和 XML 文檔模型。它含有文檔導航和處理功能。

DOM level 1 于 1998 年 10 月 1 日成為 W3C 推薦標準。

第二版的工作草案在 2000 年 9 月 29 日。

值得一提的是：DOM level 0 并不是 W3C 規范。而僅僅是對在 Netscape Navigator 3.0 和 IE 3.0 中的等價功能性的一種定義。

DOM 2級事件處理程序

DOM 2級定義了兩個方法，用于指定和刪除事件處理程序的操作：addEventListener()和removeEventListener()，他們都接受三個參數：

1.事件名。比如上面的click
2.作為事件處理程序的函數。
3.布爾值（true表示捕獲階段調用事件處理程序，false表示冒泡階段）

通過Element對象的addEventListener方法，也可以定義事件的回調函數。

//element.addEventListener(event, function, useCapture) 

var btn = document.getElementById("myDiv");
btn.addEventListener("click", function () {
    console.log(this.id);
},false);

IE中的事件處理程序

IE9之前的IE瀏覽器不支持addEventListener()和removeEventListener（）。
與其他瀏覽器不同的是，IE使用的是attachEvent()和detachEvent()方法來為DOM添加事件處理程序，由于IE8及更早版本只支持事件冒泡，所以他們只接受兩個參數：

1、事件處理程序名稱（前面要加on）
2、事件處理程序函數

使用attachEvent()添加的事件處理程序如下：

var btn = document.getElementById("myDiv");
btn.attachEvent("onclick", function () {
    console.log(this.id);
});

值得注意的是，使用attachEvent()方法的情況下，事件處理程序會在全局作用域中運行，所以，此時this等于window

事件對象

在觸發DOM上的某個事件時，會產生一個事件對象event，這個對象包含著所有與事件相關的信息。包括導致事件的元素、事件的類型以及其他與特定事件相關的信息。event對象會被作為第一個參數傳遞給事件監聽的回調函數。我們可以通過這個event對象來獲取到大量當前事件相關的信息：

type (String) — 事件的名稱
target (node) — 事件起源的DOM節點
currentTarget?(node) — 當前回調函數被觸發的DOM節點（后面會做比較詳細的介紹）
bubbles (boolean) — 指明這個事件是否是一個冒泡事件（接下來會做解釋）
preventDefault(function) — 這個方法將阻止瀏覽器中用戶代理對當前事件的相關默認行為被觸發。比如阻止元素的click事件加載一個新的頁面
cancelable (boolean) — 這個變量指明這個事件的默認行為是否可以通過調用event.preventDefault來阻止。
stopPropagation (function) — 取消事件的進一步捕獲或冒泡，bubbles為true使用這個方法
eventPhase：返回一個數字，表示事件目前所處的階段，0為事件開始從DOM表層向目標元素傳播，1為捕獲階段，2為事件到達目標元素，3為冒泡階段。

此外，事件對象還可能擁有很多其他的屬性，但是他們都是針對特定的event的。比如，鼠標事件包含clientX和clientY屬性來表明鼠標在當前視窗的位置。

另外，stopPropagation()方法用于立即停止事件在DOM中的傳播，即取消進一步的事件冒泡或捕獲。

var btn = document.getElementById("myDiv");
btn.onclick = function (event) {
    alert("clicked");
    event.stopPropagation();
};

//避免觸發在document.body上的事件處理程序
document.body.onclick = function (event) {
    alert("Body clicked");  
};

只有在事件處理程序執行期間，event對象才會存在，一旦事件處理程序執行完畢，event對象就會自動銷毀。

IE中的事件對象

在DOM 0級中添加事件處理程序時，event對象是作為window對象的一個屬性存在的：

var btn = document.getElementById("myDiv");
btn.onclick = function (event) {
    var event = window.event;
    alert(event.type);//click
};

IE 的event對象同樣也包含與創建它的事件相關的屬性和方法。

cancleBubble 布爾   默認值時false，但可以被設置成true來取消事件冒泡，與dom中的 stopPropagation()方法相同。
returnValue  布爾    默認值是true，當設置成false時用以取消事件的默認行為 與dom中的preventDefault（）相同。
srcElement　 元素  　　事件的目標，與dom中的target屬性相同。
type　　　　　字符串   被觸發的事件類型。

click事件

當用戶點擊以后，event對象會包含以下屬性。

pageX，pageY：點擊位置相對于html元素的坐標，單位為像素。
clientX，clientY：點擊位置相對于視口（viewport）的坐標，單位為像素。
screenX，screenY：點擊位置相對于設備顯示屏幕的坐標，單位為設備硬件的像素

clientX，clientY

圖示：clientX和clientY，他們的值表示事件發生時鼠標指針在視口中的水平和垂直坐標（不包含滾動條區域）

偏移量

   通過以下4個屬性可以取得元素的偏移量。

   （1）offsetHeight：元素在垂直方向上占用的空間大小，以像素計。包括元素的高度、（可見的）水平滾動條的高度、上邊框高度和下邊框高度。

   （2）offsetWidth：元素在水平方向上占用的空間大小，以像素計。包括元素的寬度、（可見的）垂直滾動條的寬度、左邊框寬度和右邊框寬度。

   （3）offsetLeft：元素的左外邊框至包含元素的左內邊框之間的像素距離。

   （4）offsetTop：元素的上外邊框至包含元素的上內邊框之間的像素距離。

pageX，pageY

這兩個屬性表示鼠標光標在頁面中的位置，在頁面沒有滾動的情況下，pageX，pageY的值與clientX，clientY的值相等

滾動大小

滾動大小，指的是包含滾動內容的元素的大小。

   以下是4個與滾動大小相關的屬性。

   （1）scrollHeight：在沒有滾動條的情況下，元素內容的總高度。

   （2）scrollWidth：在沒有滾動條的情況下，元素內容的總寬度。

   （3）scrollLeft：被隱藏在內容區域左側的像素數。通過設置這個屬性可以改變元素的滾動位置。

   （4）scrollTop：被隱藏在內容區域上方的像素數。通過設置這個屬性可以改變元素的滾動位置。

焦點事件

焦點事件會在頁面元素獲得或失去焦點時觸發，有以下4個焦點事件：

 1. blur：元素失去焦點時觸發，該事件不冒泡
 2. focus：元素獲得焦點時觸發。不冒泡
 3. focusin：元素獲得焦點時觸發，冒泡
 4. focusout：元素失去焦點時觸發，冒泡

鼠標事件

DOM 3級定義了9個鼠標事件：

click：當用戶點擊鼠標主鍵通常是指鼠標左鍵或按回車鍵時觸發。

dbclick：用戶雙擊鼠標時觸發

mousedown：當用戶按下鼠標任意一個鍵都會觸發，這個事件是不能夠通過鍵盤觸發的。

mousemove：當鼠標在某元素周圍移動時重復觸發，該事件不能通過鍵盤事件觸發。

mouseout：當鼠標離開元素時觸發，這個事件不能通過鍵盤觸發。

mouseover：當鼠標進入元素時觸發，這個事件不能夠通過鍵盤觸發。
 mouseenter：類似“mouseover”，但不冒泡，而且當光標移到后代元素上不會觸發。 

mouseleave：類似“mouseout”，但不冒泡。在元素上方是不觸發。

mouseup：當用戶釋放鼠標按鍵時觸發，不能夠通過鍵盤觸發。


傳遞給鼠標事件處理程序的事件對象有clientX和clientY屬性，它們指定了鼠標指針相對于包含窗口的坐標。加入窗口的滾動偏移量，就可以把鼠標位置轉換成文檔坐標。

　　頁面上的所有元素都支持鼠標事件。除了mouseenter和mouseleave外，所有的事件都冒泡，并且他們的默認行為是可以被取消掉的。但取消鼠標事件的默認行為可能會影響到其他事件，因為有些鼠標事件是相互依賴的。

mouseenter和mouseover的不同：
http://www.w3school.com.cn/ti...

拖拉事件

（1）drag事件

drag事件在源對象被拖拉過程中觸發。

（2）dragstart，dragend事件

dragstart事件在用戶開始用鼠標拖拉某個對象時觸發，dragend事件在結束拖拉時觸發。

（3）dragenter，dragleave事件

dragenter事件在源對象拖拉進目標對象后，在目標對象上觸發。dragleave事件在源對象離開目標對象后，在目標對象上觸發。

（4）dragover事件

dragover事件在源對象拖拉過另一個對象上方時，在后者上觸發。

（5）drop事件

當源對象被拖拉到目標對象上方，用戶松開鼠標時，在目標對象上觸發drop事件。

相關文章

JavaScript學習總結（一）基礎部分

JavaScript學習總結（二）數組和對象部分

JavaScript學習總結（三）BOM和DOM詳解

JavaScript學習總結（四）function函數部分

JavaScript學習總結（五）原型和原型鏈詳解

JavaScript學習總結（六）數據類型和JSON格式

JavaScript學習總結（七）Ajax和Http狀態字

JavaScript學習總結（八）正則表達式

GPU云服務器云服務器 javascript學習總結 js事件詳解機器學習學習總結機器學習總結

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85393.html

Flutter 面試知識點集錦

摘要：中的的線程是以事件循環和消息隊列的形式存在，包含兩個任務隊列，一個是內部隊列，一個是外部隊列，而的優先級又高于。同時還有處理按住時的事件額外處理，同時手勢處理一般在的子類進行。谷歌大會之后，有不少人咨詢了我 Flutter 相關的問題，其中有不少是和面試相關的，如今一些招聘上也開始羅列 Flutter 相關要求，最后想了想還是寫一期總結吧，也算是 Flutter 的階段復習。 ??系統完...

andong777 2019-05-21 19:52 評論0 收藏0
詳解js閉包

摘要：但閉包的情況不同嵌套函數的閉包執行后，，然后還在被回收閉包會使變量始終保存在內存中，如果不當使用會增大內存消耗。每個函數，不論多深，都可以認為是全局的子作用域，可以理解為閉包。閉包（closure）是Javascript語言的一個難點，也是它的特色，很多高級應用都要依靠閉包實現。閉包的特性閉包有三個特性： 1.函數嵌套函數 2.函數內部可以引用外部的參數和變量 3.參數和變量不會...

Chiclaim 2019-08-21 12:27 評論0 收藏0
JavaScript學習總結（三）BOM和DOM詳解

摘要：有級級級共個級別。事件類型事件類型鼠標事件鍵盤事件事件事件處理器執行代碼的程序在事件發生時會對事件做出響應。在標簽中使用事件處理器的語法是標簽事件處理器代碼事件處理程序事件就是用戶或瀏覽器自身執行的某種動作。 DOM介紹 D（文檔）可以理解為整個Web加載的網頁文檔，O（對象）可以理解為類似window對象只來的東西，可以調用屬性和方法，這里我們說的是document對象，M（模型）可...

littlelightss 2019-08-21 12:27 評論0 收藏0
前端基礎進階（九）：詳解面向對象、構造函數、原型與原型鏈

摘要：我們通過一個簡單的例子與圖示，來了解構造函數，實例與原型三者之間的關系。而原型對象的指向構造函數。于是根據構造函數與原型的特性，我們就可以將在構造函數中，通過聲明的屬性與方法稱為私有變量與方法，它們被當前被某一個實例對象所獨有。 showImg(https://segmentfault.com/img/remote/1460000008593382); 如果要我總結一下學習前端以來我遇...

Tony_Zby 2019-08-21 18:31 評論0 收藏0