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’,
e
v
e
n
t
)
"
/
/
通
过
特
殊
变
量
event)"//通过特殊变量
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>