事件處理
常見js事件
1、窗口事件
onload, html文檔加載完成時觸發。
#onload html文檔加載完成時觸發。
window.onload = function(){
//當html文檔加載完成之後，執行該回調事件。
}
onunload，html頁面離開時觸發。
#onunload html頁面離開時觸發。
window.onunload = function(){
//當html頁面離開的時候，執行該回調函數。
}
onresize，window窗口發生變化時觸發。
#onresize window窗口發生變化時觸發。
window.onresize = function( event ){
//當窗口的尺寸發生變化的時候調用。
}
2、表單元素相關事件
onreset, onsubmit,onsubmit用於觸發提交事件，onreset用於觸發重置事件。
#onreset，onsubmit 用在<form>表單，onsubmit用於觸發提交事件，onreset用於觸發重置事件。
#在vue中可以使用@submit.prevent, @reset.prevent來阻止默認事件。
<form action="http://www.baidu.com" method="post" @submit.prevent="test" @reset.prevent="reset">
表單項 <input>
<input type="submit" value="提交表單">
<input type="reset" value="重置表單">
</form>
onfocus,表單元素獲取焦點事件。 onblur, 表單元素失去焦點事件。
#onfocus,表單元素獲取焦點事件
#onblur,表單元素失去焦點事件
表單元素: <input @focus="getFocus" @blur="getBlur" />
methods: {
getFocus(){
alert("獲取焦點");
},
getBlur(){
alert("失去焦點");
},
}
onchange，在屬性值改變時還必須使得當前元素失去焦點(onblur)纔可以激活該事件；也就說onchange事件不能作爲輸入監聽，只能作爲一個按enter鍵確認提交的場景。
#onchange 在屬性值改變時還必須使得當前元素失去焦點(onblur)纔可以激活該事件；
也就說onchange事件不能作爲輸入監聽，只能作爲一個按enter鍵確認提交的場景。
表單元素: <input v-model="content" @change="change"/>
data: {
content: '',
}
methods: {
//onchange事件不能作爲輸入監聽，只能作爲一個按enter鍵確認提交的場景。
change(){
console.log("內容發生了變化");
}
}
//在vue中，可以利用v-model雙向綁定來作爲input輸入監聽。
watch:{
content( newValue, oldValue ){
console.log("內容發生了變化");
}
}
3、鼠標鍵盤相關事件
onclick, 鼠標單擊事件； ondblclick, 鼠標雙擊事件；onmousedown,鼠標按下去的事件；onmouseup,鼠標彈起事件；
#onclick, #ondblclick 單擊事件，雙擊事件
<button @click="click">單擊事件</button>
<button @dblclick="dblclick">雙擊事件</button>
methods: {
click(){
alert("單擊事件");
},
dblclick(){
alert("雙擊事件");
}
}
onmouseover,onmouseenter,onmouseout,onmouseleave, onmousemove 監控鼠標的移入移出，以及移動事件
#onmousemove : 鼠標在某個盒子上移動時響應的事件。
onmouseover、onmouseout：鼠標經過時自身觸發事件，經過其子元素時也觸發該事件；（父親有的東西，兒子也有） ，支持冒泡.
onmouseenter、onmouseleave：鼠標經過時自身觸發事件，經過其子元素時不觸發該事件。（父親的東西就是父親的，不歸兒子所有） ，不支持冒泡
onkeydown, onkeyup, onkeypress 監控鍵盤的按下和彈起。
#1.可以放在body上，全局監控鍵盤按下，彈起。
#2.可以放在input上，當獲取到焦點的時候，也能監控輸入。
<body onkeyup="keyup()" >
</body>
function keyup(){
alert(1111);
}
4、圖片，文檔加載相關事件
onerror : 圖片加載出錯的時候觸發該事件。
onabort: 這個事件沒有測試出來。。。。
綁定監聽
vue中使用v-on （簡寫爲@）來處理事件監聽. 在vue的模板中，函數實參可以用vue.data中的屬性。
v-on：click接受表達式
<div id="app" >
<button @click="count += 1">{{count}}</button>
</div>
v-on：click接受表達式
<div id=app>
<button @click="click(count)">{{count}}</button>
</div>
響應函數帶參數的情形
<button @click="test1">不寫括號，則默認帶有一個event參數</button>
<button @click="test2(message)">只帶指定參數，不帶event</button>
<button @click="test3('message', $event)">既帶指定參數，又帶event</button>
<button @click="test4($event)">顯示帶event</button>
事件修飾符
.stop 阻止事件繼續傳播。
#阻止事件冒泡
<a @click.stop="toNext">前往下一頁</a>
.stop 相當於在 toNext 方法上執行了 e.stopPropagation && e.cancelBubble = true;
.prevent 阻止標籤的默認事件。
#阻止默認事件行爲。
<a @click.prevent="toNext">
.prevent 相當於在 toNext 方法上執行了 e.preventDefault()，IE： e.returnValue = false;
.capture 添加事件監聽器使用事件捕獲模式，即處理順序從body->目標元素。
<!-- 添加事件監聽器時使用事件捕獲模式 -->
<!-- 即內部元素觸發的事件先在此處理，然後才交由內部元素進行處理 -->
<div v-on:click.capture="doThis">...</div>
.self 判斷event.target是自己觸發的，還是子元素冒泡過來的。.self就只接受自己觸發的事件。
<!-- 只當在 event.target 是當前元素自身時觸發處理函數 -->
<!-- 即事件不是從內部元素觸發的 -->
<div v-on:click.self="doThat">...</div>
.once 表示點擊事件只觸發一次。
#vue版本2.1.0 點擊事件將只會觸發一次.
<a v-on:click.once="doThis"></a>
.passive passive這個修飾符會執行默認方法。你們可能會問，明明默認執行爲什麼會設置這樣一個修飾符。這就要說一下這個修飾符的本意了。
- 瀏覽器只有等內核線程執行到事件監聽器對應的JavaScript代碼時，才能知道內部是否會調用preventDefault函數來阻止事件的默認行爲，所以瀏覽器本身是沒有辦法對這種場景進行優化的。這種場景下，用戶的手勢事件無法快速產生，會導致頁面無法快速執行滑動邏輯，從而讓用戶感覺到頁面卡頓。
- 通俗點說就是每次事件產生，瀏覽器都會去查詢一下是否有preventDefault阻止該次事件的默認動作。我們加上passive就是爲了告訴瀏覽器，不用查詢了，我們沒用preventDefault阻止默認動作。
- 這裏一般用在滾動監聽，@scoll，@touchmove 。因爲滾動監聽過程中，移動每個像素都會產生一次事件，每次都使用內核線程查詢prevent會使滑動卡頓。我們通過passive將內核線程查詢跳過，可以大大提升滑動的流暢度。passive和prevent衝突，不能同時綁定在一個監聽器上。
- 參考鏈接： https://www.jianshu.com/p/b12d0d3ad4c1
<!-- 滾動事件的默認行爲 (即滾動行爲) 將會立即觸發 -->
<!-- 而不會等待 `onScroll` 完成 -->
<!-- 這其中包含 `event.preventDefault()` 的情況 -->
<div v-on:scroll.passive="onScroll">...</div>
按鍵修飾符
對鍵盤按鍵進行過濾。
<!-- 只有在 `key` 是 `Enter` 時調用 `vm.submit()` -->
<input v-on:keyup.enter="submit">
#page-down按鈕按下
<input v-on:keyup.page-down="onPageDown">