如何在Vue.js中使用事件修飾符

如何在Vue.js中使用事件修飾符？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

成都創(chuàng)新互聯(lián)公司是一家專業(yè)從事做網(wǎng)站、網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司。作為專業(yè)的建站公司,成都創(chuàng)新互聯(lián)公司依托的技術(shù)實(shí)力、以及多年的網(wǎng)站運(yùn)營經(jīng)驗(yàn),為您提供專業(yè)的成都網(wǎng)站建設(shè)、成都營銷網(wǎng)站建設(shè)及網(wǎng)站設(shè)計開發(fā)服務(wù)！

1、 DOM 事件流

有時，當(dāng)我們需要完成頁面中的某些功能時，我們要在需要實(shí)現(xiàn)功能的頁面元素上使用 v-on 指令去監(jiān)聽 DOM 事件，在 html4 時代瀏覽器如何確定頁面的哪一部分會擁有特定的事件時，IE 和 Netscape 的開發(fā)團(tuán)隊(duì)提出了兩個截然相反的概念。這一差異，也使我們在寫代碼中需要考慮如何去處理 DOM 的事件細(xì)節(jié)。為了解決這一問題，vue 給我們提供了事件修飾符這一利器，它使我們的方法只有純粹的數(shù)據(jù)邏輯，而不是去處理 DOM 事件細(xì)節(jié)。

一些涉及到概念：

a）事件：用戶設(shè)定或者是瀏覽器自身執(zhí)行的某種動作。例如click(點(diǎn)擊)、load(加載)、mouseover(鼠標(biāo)懸停)、change(改變)等等

b）事件處理程序：為了實(shí)現(xiàn)某個事件的功能而構(gòu)建的函數(shù)方法，也可稱為事件監(jiān)聽器

c）DOM 事件流：描述的是從頁面中接收事件的順序,也可理解為事件在頁面中傳播的順序

在 DOM 事件流中存在著三個階段：事件捕獲階段、處于目標(biāo)階段、事件冒泡階段。

a）事件捕獲（event capture）:當(dāng)鼠標(biāo)點(diǎn)擊或者觸發(fā) DOM 事件時，瀏覽器會從根節(jié)點(diǎn)開始 由外到內(nèi) 進(jìn)行事件傳播，即點(diǎn)擊了子元素，如果父元素通過事件捕獲方式注冊了對應(yīng)的事件的話，會先觸發(fā)父元素綁定的事件

b）事件冒泡（event bubbing）:當(dāng)鼠標(biāo)點(diǎn)擊或者觸發(fā) DOM 事件時，瀏覽器會從根節(jié)點(diǎn)開始 由內(nèi)到外 進(jìn)行事件傳播，即點(diǎn)擊了子元素，則先觸發(fā)子元素綁定的事件，逐步擴(kuò)散到父元素綁定的事件

之前我們提到的 IE 和 Netscape 的開發(fā)團(tuán)隊(duì)提出了兩個截然相反的事件流概念，IE 采取的是事件冒泡流，而標(biāo)準(zhǔn)的瀏覽器的事件流則是事件捕獲流。所以，為了兼容 IE 我們需要改變某些的寫法。

2、 事件修飾符

a）.stop：阻止事件冒泡

在下面的示例中，我們分別創(chuàng)建了一個 button 的點(diǎn)擊事件和外側(cè)的 div 的點(diǎn)擊事件，根據(jù)事件的冒泡機(jī)制我們可以得知，當(dāng)我們點(diǎn)擊了按鈕之后，會擴(kuò)散到父元素，從而觸發(fā)父元素的點(diǎn)擊事件，具體的結(jié)果也如下圖所示：