Vue.js

最新推荐文章于 2024-08-15 19:41:48 发布

Draconis.

最新推荐文章于 2024-08-15 19:41:48 发布

阅读量87

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_68470780/article/details/128056418

版权

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	事件的名称