vue1.x 事件对象(二)

本文主要简述了event 对象,顺便复习了一下事件句柄 (Event Handlers),键盘的一些属性,以及最容易遇到的事件冒泡,同样的阻止事件冒泡,在vue 下是怎样解决的,vue 提供了那些方便去阻止事件冒泡。

1.事件句柄 (Event Handlers)

HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为,比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表,可将之插入 HTML 标签以定义事件的行为。
看图:

image.png
vue事件前面都是没有on,例如:

 @click="vclick($event)"

图片素材截图于w3school

2.鼠标/键盘属性

image.png

说明:上面是属于event 对象的属性
例子:

    function box2click(event){         // alert(1);         console.log('box2');         console.log(event);         if(event.altKey){             console.log('事件被触发时候 alt 键被按下');         }     }

3.IE属性

image.png

4.标准 Event 属性

image.png

type 可以知道是那个事件类型如

image.png

5.标准的Event 方法

image.png

6.以前的事件冒泡

div 里面放一个按钮,给div和按钮都加上点击事件

image.png

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 部分:

image.png

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关键部分:

image.png

methods 方法部分:

      stopClick(){           console.log('stopClick');       }

阻止默认事件

html部分:

image.png

methods 方法部分:

    // 阻止鼠标右键     menuClick(){        alert('menu');        // event.preventDefault();     }

事件的对象代码

键盘事件

image.png

    var vm = new Vue({         el:'body',         methods: {             keydownFnc(event){                 console.log(event);                 console.log(event.keyCode)             }         }     })

vue 提供了一些常用的方法,例如 @keyup.enter 按回车事件被触发。
键盘事件的代码链接

其他:
vue1.x 基础使用(一)

脚本宝典为你提供优质服务
脚本宝典 » vue1.x 事件对象(二)

发表评论

提供最优质的资源集合

立即查看 了解详情