脚本宝典收集整理的这篇文章主要介绍了vue1.x 事件对象(二),脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为,比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表,可将之插入 HTML 标签以定义事件的行为。
看图:
vue事件前面都是没有on,例如:
@click="vclick($event)"
图片素材截图于w3school
说明:上面是属于event 对象的属性
例子:
function box2click(event){ // alert(1); console.log('box2'); console.log(event); if(event.altKey){ console.log('事件被触发时候 alt 键被按下'); } }
type 可以知道是那个事件类型如
div 里面放一个按钮,给div和按钮都加上点击事件
javascript处理方法:
// 以前获取事件的方式 function btnclick(event){ // alert(1); console.log('以前的'); console.log(event); //以前停止事件冒泡的方法 //eventent.stopPropagation(); } function box2click(event){ // alert(1); console.log('box2'); console.log(event); if(event.altKey){ console.log('事件被触发时候 alt 键被按下'); } }
对比vue 的方式
html 部分:
javascript 部分:
var vm = new Vue({ el:'body', data () { return { msg:'hello' } }, methods: { vclick(event){ // alert('vue click'); console.log(event); console.log('btn'); //event.stopPropagation(); event.cancelBubble=true; }, boxClick(event){ // alert('box click'); console.log(event); } } })
阻止冒泡简写方式:
html关键部分:
methods 方法部分:
stopClick(){ console.log('stopClick'); }
html部分:
methods 方法部分:
// 阻止鼠标右键 menuClick(){ alert('menu'); // event.preventDefault(); }
var vm = new Vue({ el:'body', methods: { keydownFnc(event){ console.log(event); console.log(event.keyCode) } } })
vue 提供了一些常用的方法,例如 @keyup.enter
按回车事件被触发。
键盘事件的代码链接
觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! vue,巧夺天工,精雕玉琢。小宝典献丑了!
以上是脚本宝典为你收集整理的vue1.x 事件对象(二)全部内容,希望文章能够帮你解决vue1.x 事件对象(二)所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。