Vue值之事件的概念

1.事件三要素
事件源 事件对象 事件驱动程序

2.事件绑定
在DOM元素上直接绑定
在JavaScript代码中绑定
绑定一个事件监听函数

3.事件流
事件在元素节点与根节点之间特定的传播顺序，经过的所有节点都会收到该事件，这个过程就是DOM事件流

分类：
冒泡型事件流：事件传播是从最特定的事件目标—>最不特定的事件目标
DOM树的叶子节点->根节点
捕获型事件流：事件传播是从最不特定的事件目标—>最特定的事件目标
DOM树的根节点->叶子节点

DOM标准规定的事件流：
包括三个阶段：事件捕获阶段->处理目标阶段->事件冒泡阶段
4.事件对象 event
5.事件代理
本来是加在子元素上面的元素，加到其父元素身上
优点：1.不用循环的为子元素添加事件
2.新生成的子元素也不用新添加事件

6.事件类型
鼠标事件(mouseover、mouseout、mousedown)
键盘事件(keyup、keydown)
Html事件(load、focus、resize、scroll)
这些概念在vue中也是存在的，但vue中的事件机制要更加简单

事件绑定：
v-on：click
可以使v-on指令，来监听DOM事件，并在触发时运行一些js代码
v-on可以接收一个需要调用的方法名
v-on:click=“foo”
v-on调用的方法还可以传参
v-on：click=“foo(‘xxx’)”
v-on:click 可以简写为@click

在vue中获取原始的DOM事件的方法
1.@click=“foo”
methods:{
foo(event){
console.log(event)
}
}
2.@click="foo(‘xxx’,$event)"//通过特殊变量$event
methods:{
foo(msg,event){
console.log(msg,event)
}
}

事件修饰符
DOM中
阻止事件默认行为 event.preventDefault()
阻止事件冒泡 event.stopPropagation()
Vue中提供了更好的方式：事件修饰符
好处：事件处理函数只纯粹的处理数据逻辑
DOM事件的细节交给事件修饰符处理。

常见的事件修饰符
.stop 阻止事件冒泡
.prevent 阻止事件默认行为
.once 当事件函数执行一次后解绑
用法：
<div @click.once=“foo”>测试once
<div @click.stop=“inner”>点击我

按键修饰符
一般与按键事件配合使用 keyup、keydown
常用：
.enter
.tab
.delete
.esc
.space
.up .down .left .right
.ctrl .alt .shift
.meta(windows：win mac：commond)
用法：
<input @keyup.enter=“foo” type=“text”>
<input @keyup.ctrl.67=“foo1” type=“text”>

鼠标按键修饰符
一般与mousedown mouseup事件配合使用
常用：
.left
.right
.middle

表单输入绑定
用v-model指令在表单的<input>、<textarea> 、<select>元素上
创建双向数据绑定
初始值通过data进行声明
1.单行文本框

   <input v-model="message" type="text" >

    2.多行文本框

<textarea v-model="message"></textarea>