最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

這篇文章主要介紹JavaScript事件是什么意思，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

彭州網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián),彭州網(wǎng)站設(shè)計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為彭州上千余家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)要多少錢，請找那個售后服務(wù)好的彭州做網(wǎng)站的公司定做！

JavaScript事件是指在文檔或者瀏覽器中發(fā)生的一些特定交互瞬間，比如打開某一個網(wǎng)頁，瀏覽器加載完成后會觸發(fā)load事件，當鼠標懸浮于某一個元素上時會觸發(fā)hover事件，當鼠標點擊某一個元素時會觸發(fā)click事件等等。

本文操作環(huán)境：Windows7系統(tǒng)、javascript1.8.5版、DELL G3電腦

JavaScript事件是指什么？

JavaScript 事件詳解

JavaScript 事件解讀

1. 事件基本概念

事件是指在文檔或者瀏覽器中發(fā)生的一些特定交互瞬間，比如打開某一個網(wǎng)頁，瀏覽器加載完成后會觸發(fā) load 事件，當鼠標懸浮于某一個元素上時會觸發(fā) hover 事件，當鼠標點擊某一個元素時會觸發(fā) click 事件等等。

事件處理就是當事件被觸發(fā)后，瀏覽器響應(yīng)這個事件的行為，而這個行為所對應(yīng)的代碼即為事件處理程序。

2. 事件操作：監(jiān)聽與移除監(jiān)聽

2.1 監(jiān)聽事件

瀏覽器會根據(jù)一些事件作出相對應(yīng)的事件處理，事件處理的前提是需要監(jiān)聽事件，監(jiān)聽事件的方法主要有以下三種：

2.1.1 HTML 內(nèi)聯(lián)屬性

即在 HTML 元素里直接填寫與事件相關(guān)的屬性，屬性值為事件處理程序。示例如下：

onclick 對應(yīng)著 click 事件，所以當按鈕被點擊后，便會執(zhí)行事件處理程序，即控制臺輸出 You clicked me!。

不過我們需要指出的是，這種方式將 HTML 代碼與 JavaScript 代碼耦合在一起，不利于代碼的維護，所以應(yīng)該盡量避免使用這樣的方式。

2.1.2 DOM 屬性綁定

通過直接設(shè)置某個 DOM 節(jié)點的屬性來指定事件和事件處理程序，上代碼：

const btn = document.getElementById("btn");
btn.onclick = function(e) {
    console.log("You clicked me!");
};

上面示例中，首先獲得 btn 這個對象，通過給這個對象添加 onclick 屬性的方式來監(jiān)聽 click 事件，這個屬性值對應(yīng)的就是事件處理程序。這段程序也被稱作 DOM 0 級事件處理程序。

2.1.3 事件監(jiān)聽函數(shù)

標準的事件監(jiān)聽函數(shù)如下：

const btn = document.getElementById("btn");
btn.addEventListener("click", () => {
    console.log("You clicked me!");
}, false);

上面的示例表示先獲得表示節(jié)點的 btn 對象，然后在這個對象上面添加了一個事件監(jiān)聽器，當監(jiān)聽到 click 事件發(fā)生時，則調(diào)用回調(diào)函數(shù)，即在控制臺輸出 You clicked me!。addEventListener 函數(shù)包含了三個參數(shù) false，第三個參數(shù)的含義在后面的事件觸發(fā)三個階段之后再講解。這段程序也被稱作 DOM 2 級事件處理程序。IE9+、FireFox、Safari、Chrome 和 Opera 都是支持 DOM 2 級事件處理程序的，對于 IE8 及以下版本，則用 attacEvent() 函數(shù)綁定事件。

所以我們可以寫一段具有兼容性的代碼：

function addEventHandler(obj, eventName, handler) {
    if (document.addEventListener) {
        obj.addEventListener(eventName, handler, false);
    }
    else if (document.attachEvent) {
        obj.attachEvent("on" + eventName, handler);
    }    
    else {
        obj["on" + eventName] = handler;
    }
}

2.2 移除事件監(jiān)聽

在為某個元素綁定了一個事件后，如果想接觸綁定，則需要用到 removeEventListener 方法?？慈缦吕樱?/p>

const handler = function() {
    // handler logic
}
const btn = document.getElementById("btn");

btn.addEventListener("click", handler);
btn.removeEventListener("click", handler);

需要注意的是，綁定事件的回調(diào)函數(shù)不能是匿名函數(shù)，必須是一個已經(jīng)被聲明的函數(shù)，因為解除事件綁定時需要傳遞這個回調(diào)函數(shù)的引用。

同樣，IE8 及以下版本也不支持上面的方法，而是用 detachEvent 代替。

const handler = function() {
    // handler logic
}
const btn = document.getElementById("btn");

btn.attachEvent("onclick", handler);
btn.detachEvent("onclick", handler);

同樣，可以寫一段具有兼容性的刪除事件函數(shù)：

function removeEventHandler(obj, eventName, handler) {
    if (document.removeEventListener) {
        obj.removeEventListener(eventName, handler, false);
    }
    else if (document.detachEvent) {
        obj,detachEvent("on" + eventName, handler);
    }
    else {
        obj["on" + eventName] = null;
    }
}

3. 事件觸發(fā)過程

事件流描述了頁面接收事件的順序?，F(xiàn)代瀏覽器（指 IE6-IE8 除外的瀏覽器，包括 IE9+、FireFox、Safari、Chrome 和 Opera 等）事件流包含三個過程，分別是捕獲階段、目標階段和冒泡階段，下圖形象地說明這個過程：

下面就詳細地講解這三個過程。

3.1 捕獲階段

當我們對 DOM 元素進行操作時，比如鼠標點擊、懸浮等，就會有一個事件傳輸?shù)竭@個 DOM 元素，這個事件從 Window 開始，依次經(jīng)過 docuemnt、html、body，再不斷經(jīng)過子節(jié)點直到到達目標元素，從 Window 到達目標元素父節(jié)點的過程稱為捕獲階段，注意此時還未到達目標節(jié)點。

3.2 目標階段

捕獲階段結(jié)束時，事件到達了目標節(jié)點的父節(jié)點，最終到達目標節(jié)點，并在目標節(jié)點上觸發(fā)了這個事件，這就是目標階段。

需要注意的是，事件觸發(fā)的目標節(jié)點為最底層的節(jié)點。比如下面的例子：

    
你猜，目標在這里還是那里。

當我們點擊“那里”的時候，目標節(jié)點是，點擊“這里”的時候，目標節(jié)點是

3.3 冒泡階段

當事件到達目標節(jié)點之后，就會沿著原路返回，這個過程有點類似水泡從水底浮出水面的過程，所以稱這個過程為冒泡階段。

針對這個過程，wilsonpage 做了一個 DEMO，可以非常直觀地查看這個過程。

現(xiàn)在再看 addEventListener(eventName, handler, useCapture) 函數(shù)。第三個參數(shù)是 useCapture，代表是否在捕獲階段進行事件處理， 如果是 false， 則在冒泡階段進行事件處理，如果是 true，在捕獲階段進行事件處理，默認是 false。這么設(shè)計的主要原因是當年微軟和 netscape 之間的瀏覽器戰(zhàn)爭打得火熱，netscape 主張捕獲方式，微軟主張冒泡方式，W3C 采用了折中的方式，即先捕獲再冒泡。

4、事件委托

上面我們講了事件的冒泡機制，我們可以利用這一特性來提高頁面性能，事件委托便事件冒泡是最典型的應(yīng)用之一。

何謂“委托”？在現(xiàn)實中，當我們不想做某件事時，便“委托”給他人，讓他人代為完成。JavaScript 中，事件的委托表示給元素的父級或者祖級，甚至頁面，由他們來綁定事件，然后利用事件冒泡的基本原理，通過事件目標對象進行檢測，然后執(zhí)行相關(guān)操作?？聪旅胬樱?/p>

// HTML

    
Item 1
    
Item 2
    
Item 3
    
Item 4
    
Item 5


// JavaScript
var list = document.getElementById("list");
list.addEventListener("click", function(e) {
    console.log(e.target);
});

上面的例子中，5 個列表項的點擊事件均委托給了父元素

先看看事件委托的可行性。有人會問，當事件不是加在某個元素上的，如何在這個元素上觸發(fā)事件呢？我們就是利用事件冒泡的機制，事件流到達目標元素后會向上冒泡，此時父元素接收到事件流便會執(zhí)行事件執(zhí)行程序。有人又會問，被委托的父元素下面如果有很多子元素，怎么知道事件流來自于哪個子元素呢？這個我們可以從事件對象中的 target 屬性獲得。事件對象下面會詳細講解。

我們再來看看為什么需要事件委托。

• 減少事件綁定。上面的例子中，也可以分別給每個列表項綁定事件，但利用事件委托的方式不僅省去了一一綁定的麻煩，也提升了網(wǎng)頁的性能，因為每綁定一個事件便會增加內(nèi)存使用。

• 可以動態(tài)監(jiān)聽綁定。上面的例子中，我們對 5 個列表項進行了事件監(jiān)聽，當刪除一個列表項時不需要單獨刪除這個列表項所綁定的事件，而增加一個列表項時也不需要單獨為新增項綁定事件。

看了上面的例子和解釋，我們可以看出事件委托的核心就是監(jiān)聽一個 DOM 中更高層、更不具體的元素，等到事件冒泡到這個不具體元素時，通過 event 對象的 target 屬性來獲取觸發(fā)事件的具體元素。

5、阻止事件冒泡

事件委托是事件冒泡的一個應(yīng)用，但有時候我們并不希望事件冒泡。比如下面的例子：

const ele = document.getElementById("ele");
ele.addEventListener("click", function() {
    console.log("ele-click");
}, false);

document.addEventListener("click", function() {
    console.log("document-click");
}, false);

我們本意是當點擊 ele 元素區(qū)域時顯示 "ele-click"，點擊其他區(qū)域時顯示 "document-click"。但是我們發(fā)現(xiàn)點擊 ele 元素區(qū)域時會依次顯示 "ele-click" "document-click"。那是因為綁定在 ele 上的事件冒泡到了 document 上。想要解決這個問題，只需要加一行代碼：

const ele = document.getElementById("ele");
ele.addEventListener("click", function(e) {
    console.log("ele-click");
    e.stopPropagation(); // 阻止事件冒泡
}, false);

document.addEventListener("click", function(e) {
    console.log("document-click");
}, false);

我們還能用 e.cancelBubble = true 來替代 e.stopPropagation()。網(wǎng)上的說法是 cancelBubble 僅僅適用于 IE，而 stopPropagation 適用于其他瀏覽器。但根據(jù)我實驗的結(jié)果，現(xiàn)代瀏覽器（IE9 及 以上、Chrome、FF 等）均同時支持這兩種寫法。為了保險起見，我們可以采用以下代碼：

function preventBubble(e) {
    if (!e) {
        const e = window.event;
    }
    e.cancelBubble = true;
    if (e.stopPropagation) {
        e.stopPropagation();
    }
}

6、event 對象

Event 對象代表事件的狀態(tài)，比如事件在其中發(fā)生的元素、鍵盤按鍵的狀態(tài)、鼠標的位置、鼠標按鈕的狀態(tài)。當一個事件被觸發(fā)的時候，就會創(chuàng)建一個事件對象。

我們用下面的代碼打印出事件對象：

    
Item 1
    
Item 2