站長(zhǎng)資訊網(wǎng)
vuejs中的事件有：focus、blur、click（單擊）、dblclick、contextmen、mousemove、mouseover、mouseout、mouseup、keydown 、keyup、select、wheel等等。
本教程操作環(huán)境：windows7系統(tǒng)、vue2.9.6版，DELL G3電腦。
Event Handler 事件處理
Vuejs中的事件處理非常強(qiáng)大， 也非常重要。 我們一定要學(xué)好它。
Event Handler 之所以會(huì)被Vuejs放到很高的地位，是基于這樣的考慮：
-
把跟事件相關(guān)的代碼獨(dú)立的寫(xiě)出來(lái)， 非常容易定位各種邏輯， 維護(hù)起來(lái)方便。
-
event handler被獨(dú)立出來(lái)之后， 頁(yè)面的DOM元素看起來(lái)就會(huì)很簡(jiǎn)單。 容易理解。 -
當(dāng)一個(gè)頁(yè)面被關(guān)掉時(shí)，對(duì)應(yīng)的
ViewModel也會(huì)被回收。那么該頁(yè)面定義的各種event handler也會(huì)被一并垃圾回收。 不會(huì)造成內(nèi)存溢出。
支持的Event
我們?cè)谇懊嬖?jīng)看到過(guò) v-on:click, 那么，都有哪些事件可以被v-on所支持呢？
只要是標(biāo)準(zhǔn)的HTML定義的Event, 都是被Vuejs支持的。
focus（元素獲得焦點(diǎn))blur(元素失去焦點(diǎn))click（單擊 鼠標(biāo)左鍵）dblclick(雙擊鼠標(biāo)左鍵)contextmenu(單機(jī)鼠標(biāo)右鍵)mouseover(指針移到有事件監(jiān)聽(tīng)的元素或者它的子元素內(nèi))mouseout(指針移出元素，或者移到它的子元素上)keydown（鍵盤(pán)動(dòng)作： 按下任意鍵)keyup(鍵盤(pán)動(dòng)作： 釋放任意鍵)
所有HTML標(biāo)準(zhǔn)事件：https://developer.mozilla.org/zh-CN/docs/Web/Events
例：
總共定義了 162個(gè)標(biāo)準(zhǔn)事件， 和 幾十個(gè)非標(biāo)準(zhǔn)事件，以及 Mozilla的特定事件。 如下圖所示：
我們不用全部都記住，通常在日常開(kāi)發(fā)中，只有不到20個(gè)是最常見(jiàn)的event.
使用 v-on 進(jìn)行事件的綁定
我們可以認(rèn)為，幾乎所有的事件，都是由 v-on 這個(gè) directive 來(lái)驅(qū)動(dòng)的。 所以，本節(jié)會(huì)對(duì) v-on 有更加詳盡的說(shuō)明。
1. 在 v-on 中使用變量
如下面代碼所示，可以在 v-on 中引用變量：
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> </head> <body> <div id='app'> 您點(diǎn)擊了： {% raw %}{{{% endraw %} count }} 次 <br/> <button v-on:click='count += 1' style='margin-top: 50px'> + 1</button> </div> <script> var app = new Vue({ el: '#app', data: { count: 0 } }) </script> </body> </html>
上面的代碼，用瀏覽器打開(kāi)后， 點(diǎn)擊 按鈕， 就可以看到 count 這個(gè)變量會(huì)隨之 +1. 如下圖所示：
2. 在 v-on 中使用方法名
上面的例子，也可以按照下面的寫(xiě)法來(lái)實(shí)現(xiàn)：
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> </head> <body> <div id='app'> 您點(diǎn)擊了：{% raw %}{{{% endraw %} count }} 次 <br/> <button v-on:click='increase_count' style='margin-top: 50px'> + 1 </button> </div> <script> var app = new Vue({ el: '#app', data: { count: 0 }, methods: { increase_count: function(){ this.count += 1 } } }) </script> </body> </html>
可以看到，在 v-on:click='increase_count' 中， increase_count 就是一個(gè)方法名。
3. 在v-on 中使用方法名 + 參數(shù)
我們也可以直接使用 v-on:click='some_function("your_parameter")' 這樣的寫(xiě)法，如 下面的例子所示：
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> </head> <body> <div id='app'> {% raw %}{{{% endraw %} message }} <br/> <button v-on:click='say_hi("明日的Vuejs大神")' style='margin-top: 50px'> 跟我打個(gè)招呼~(yú) </button> </div> <script> var app = new Vue({ el: '#app', data: { message: "這是個(gè) 在click中調(diào)用 方法 + 參數(shù)的例子" }, methods: { say_hi: function(name){ this.message = "你好啊，" + name + "!" } } }) </script> </body> </html>
使用瀏覽器打開(kāi)后，點(diǎn)擊按鈕，就可以看到下圖所示：
4. 重新設(shè)計(jì)按鈕的邏輯
我們?cè)趯?shí)際開(kāi)發(fā)中，往往會(huì)遇到這樣的情況： 點(diǎn)擊某個(gè)按鈕，或者觸發(fā)某個(gè)事件后，希望按鈕的默認(rèn)狀態(tài)。
最典型的例子： 提交表單(<form/>)的時(shí)候，我們希望先對(duì)該表單進(jìn)行驗(yàn)證。 如果驗(yàn)證不通過(guò)，該表單就不要提交。
這個(gè)時(shí)候，如果希望表單不要提交，我們就要讓 這個(gè) submit 按鈕，不要有下一步的動(dòng)作。 在所有的開(kāi)發(fā)語(yǔ)言當(dāng)中，都會(huì)有一個(gè)對(duì)應(yīng)的方法，叫做： “preventDefault”
(停止默認(rèn)動(dòng)作)
我們看這個(gè)例子：
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> </head> <body> <div id='app'> 請(qǐng)輸入您想打開(kāi)的網(wǎng)址, <br/> 判斷規(guī)則是： <br/> 1. 務(wù)必以 "http://"開(kāi)頭 <br/> 2. 不能是空字符串 <br/> <input v-model="url" placeholder="請(qǐng)輸入 http:// 開(kāi)頭的字符串, 否則不會(huì)跳轉(zhuǎn)" /> <br/> <br/> <a v-bind:href="this.url" v-on:click='validate($event)'> 點(diǎn)我確定 </a> </div> <script> var app = new Vue({ el: '#app', data: { url: '' }, methods: { validate: function(event){ if(this.url.length == 0 || this.url.indexOf('http://') != 0){ alert("您輸入的網(wǎng)址不符合規(guī)則。 無(wú)法跳轉(zhuǎn)") if(event){ alert("event is: " + event) event.preventDefault() } } } } }) </script> </body> </html>
上面的代碼中，可以看到，我們定義了一個(gè)變量： url. 并且通過(guò)代碼：
<a v-bind:href="this.url" v-on:click='validate($event)'> 點(diǎn)我確定 </a> 做了兩件事情：
-
把
url綁定到了該元素上。 -
該元素 在觸發(fā)
click事件時(shí)，會(huì)調(diào)用validate方法。 該方法傳遞了一個(gè)特殊的參數(shù)：$event. 該參數(shù)是當(dāng)前 事件的一個(gè)實(shí)例。（MouseEvent)
在 validate方法中，我們是這樣定義的： 先驗(yàn)證是否符合規(guī)則。 如果符合，放行，會(huì)繼續(xù)觸發(fā) <a/> 元素的默認(rèn)動(dòng)作（讓瀏覽器發(fā)生跳轉(zhuǎn)） 。 否則的
話，會(huì)彈出一個(gè) “alert” 提示框。
用瀏覽器打開(kāi)這段代碼，可以看到下圖所示：
我們先輸入一個(gè)合法的地址： http://baidu.com ， 可以看到，點(diǎn)擊后，頁(yè)面發(fā)生了跳轉(zhuǎn)。 跳轉(zhuǎn)到了百度。
我們?cè)佥斎胍粋€(gè) “不合法”的地址： https://baidu.com 注意： 該地址不是以 “http://” 開(kāi)頭，所以我們的vuejs 代碼不會(huì)讓它放行。
如下圖所示：
進(jìn)一步觀察，頁(yè)面也不會(huì)跳轉(zhuǎn)（很好的解釋了 這個(gè)時(shí)候 <a/> 標(biāo)簽點(diǎn)了也不起作用)
5. Event Modifiers 事件修飾語(yǔ)
我們很多時(shí)候，希望把代碼寫(xiě)的優(yōu)雅一些。 使用傳統(tǒng)的方式，可能會(huì)把代碼寫(xiě)的很臃腫。 如果某個(gè)元素在不同的event下有不同的表現(xiàn)，那么代碼看起來(lái)就會(huì)有
很多個(gè) if ...else ... 這樣的分支。
所以， Vuejs 提供了 “Event Modifiers”。
例如，我們可以把上面的例子略加修改：
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> </head> <body> <div id='app'> 請(qǐng)輸入您想打開(kāi)的網(wǎng)址, <br/> 判斷規(guī)則是： <br/> 1. 務(wù)必以 "http://"開(kāi)頭 <br/> 2. 不能是空字符串 <br/> <input v-model="url" placeholder="請(qǐng)輸入 http:// 開(kāi)頭的字符串, 否則不會(huì)跳轉(zhuǎn)" /> <br/> <br/> <a v-bind:href="this.url" v-on:click='validate($event)' v-on:click.prevent='show_message'> 點(diǎn)我確定 </a> </div> <script> var app = new Vue({ el: '#app', data: { url: '' }, methods: { validate: function(event){ if(this.url.length == 0 || this.url.indexOf('http://') != 0){ if(event){ event.preventDefault() } } }, show_message: function(){ alert("您輸入的網(wǎng)址不符合規(guī)則。 無(wú)法跳轉(zhuǎn)") } } }) </script> </body> </html>
可以看出，上面的代碼的核心是：
<a v-bind:href="this.url" v-on:click='validate($event)' v-on:click.prevent='show_message'> 點(diǎn)我確定 </a> methods: { validate: function(event){ if(this.url.length == 0 || this.url.indexOf('http://') != 0){ if(event){ event.preventDefault() } } }, show_message: function(){ alert("您輸入的網(wǎng)址不符合規(guī)則。 無(wú)法跳轉(zhuǎn)") } }
先是在 <a/> 中定義了兩個(gè) click 事件，一個(gè)是 click, 一個(gè)是 click.prevent. 后者表示，如果該元素的click 事件被 阻止了的話， 應(yīng)該觸發(fā)什么動(dòng)作。
然后，在 methods 代碼段中，專門定義了 show_message , 用來(lái)給 click.prevent 所使用。
上面的代碼運(yùn)行起來(lái)，跟前一個(gè)例子是一模一樣的。 只是抽象分類的程度更高了一些。 在復(fù)雜的項(xiàng)目中有用處。
這樣的 “event modifier”，有這些：
- stop propagation 被停止后（ 也就是調(diào)用了 event.stopPropagation()方法后 )，被觸發(fā)
- prevent 調(diào)用了 event.preventDefault() 后被觸發(fā)。
- capture 子元素中的事件可以在該元素中 被觸發(fā)。
- self 事件的 event.target 就是本元素時(shí)，被觸發(fā)。
- once 該事件最多被觸發(fā)一次。
- passive 為移動(dòng)設(shè)備使用。 (在addEventListeners 定義時(shí)，增加passive選項(xiàng)。)
以上的 “event modifier” 也可以連接起來(lái)使用。 例如： v-on:click.prevent.self
6. Key Modifiers 按鍵修飾語(yǔ)
Vuejs 也很貼心的提供了 Key Modifiers, 也就是一種支持鍵盤(pán)事件的快捷方法。 我們看下面的例子：
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> </head> <body> <div id='app'> 輸入完畢后，按下回車鍵，就會(huì)<br/> 觸發(fā) "show_message" 事件~ <br/><br/> <input v-on:keyup.enter="show_message" v-model="message" /> </div> <script> var app = new Vue({ el: '#app', data: { message: '' }, methods: { show_message: function(){ alert("您輸入了：" + this.message) } } }) </script> </body> </html>
可以看到，在上面的代碼中， v-on:keyup.enter="show_message" 為 <a/> 元素定義了事件，該事件對(duì)應(yīng)了 “回車鍵”。
（嚴(yán)格的說(shuō)，是回車鍵被按下后，松開(kāi)彈起來(lái)的那一刻）
我們用瀏覽器打開(kāi)上面的代碼對(duì)應(yīng)的文件，輸入一段文字，按回車，就可以看到事件已經(jīng)被觸發(fā)了。
Vuejs 總共支持下面這些 Key modifiers:
- enter 回車鍵
- tab tab 鍵
- delete 同時(shí)對(duì)應(yīng)了 backspace 和 del 鍵
- esc ESC 鍵
- space 空格
- up 向上鍵
- down 向下鍵
- left 向左鍵
- right 向右鍵
隨著 Vuejs 版本的不斷迭代和更新，越來(lái)越多的 Key modifiers 被添加了進(jìn)來(lái)， 例如 page down, ctrl 。對(duì)于這些鍵的用法，
大家可以查閱官方文檔。
