事件处理
常见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">