vue事件对象属性
浏览器中的事件都是以对象的形式存在的 在标准的dom中 规定事件对象必须作为唯一的参数传给事件处理函数.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<!-- vue传递事件对象 $event
有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法:
-->
<button type="button" @click="change($event)">一个按钮</button>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
msg:'hello'
},
methods:{
change(e){
//alert(e.type);
e.target.style.background="red";
}
}
})
</script>
</html>
事件对象的常见属性:
标准dom | 类型 | 说明 |
AltKey | boolean | 按下alt键位true 否则为 false |
button | Integer | 鼠标事件,值对应按下的鼠标键 |
cancleable | Boolean | 是否可以取消事件的默认行为 |
stopPropagation() | Function | 阻止事件向上冒泡 |
clientX | Integer | 鼠标在客户端区域的水平坐标 |
clientY | Integer | 鼠标在客户端区域的垂直坐标 |
ctrlKey | Boolean | 按下ctrl为true 否则为 false |
relatedTarget | Element | 鼠标正在进入/离开的元素 |
charCode | Integer | 按下按键的Unicode值 |
keyCode | Integer | 按下按键时为0,其余情况下为按下案件的数字代号 |
detail | Integer | 鼠标按键的单击次数 |
preventDefault() | Function | 阻止事件的默认行为 |
screenX | Integer | 鼠标相对于屏幕的水平坐标 |
screenY | Integer | 鼠标相对于屏幕的垂直坐标 |
shiftKey | Boolean | 按下shift键为true,否则为false |
target | Element | 引起事件的元素/对象 |
type | string | 事件的名称 |