vue1.x 事件对象（二）

Enlightenment 发布于2019-08-21 12:04 / 3404人阅读

摘要：事件句柄的新特性之一是能够使事件触发浏览器中的行为，比如当用户点击某个元素时启动一段。下面是一个属性列表，可将之插入标签以定义事件的行为。键盘事件的代码链接其他基础使用一

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

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

vue事件前面都是没有on,例如：

 @click="vclick($event)"

图片素材截图于w3school

2.鼠标/键盘属性

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

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

3.IE属性

4.标准 Event 属性

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

5.标准的Event 方法

6.以前的事件冒泡

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 按回车事件被触发。
键盘事件的代码链接

其他：
vue1.x 基础使用（一）

云服务器 GPU云服务器事件对象 IE事件对象 js事件对象 html对象点击事件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87407.html

vue1.x 事件对象（二）

摘要：事件句柄的新特性之一是能够使事件触发浏览器中的行为，比如当用户点击某个元素时启动一段。下面是一个属性列表，可将之插入标签以定义事件的行为。键盘事件的代码链接其他基础使用一本文主要简述了event 对象，顺便复习了一下事件句柄　(Event Handlers)，键盘的一些属性，以及最容易遇到的事件冒泡，同样的阻止事件冒泡，在vue 下是怎样解决的，vue 提供了那些方便去阻止事件冒泡。...

JasinYip 2019-08-01 17:27 评论0 收藏0
vue1.x 基础使用（一）

摘要：最近项目进度慢下来了，花点时间总结一下。文章会从到的一些说明以及使用，也会文章中的代码共享出来。详细请关注后续。后面陆续会换到其他的一些工具，如，等。也会介绍一些常用的工具。如下一代的语法编译器，的路由，的交互。最近项目进度慢下来了，花点时间总结一下。文章会从vue1.x 到2.x的一些说明以及使用，也会文章中的代码共享出来。详细请关注后续。简介：感慨是会用到一些第三方的模块下载工...

xuexiangjys 2019-08-21 12:00 评论0 收藏0
vue1.x 基础使用（一）

摘要：最近项目进度慢下来了，花点时间总结一下。文章会从到的一些说明以及使用，也会文章中的代码共享出来。详细请关注后续。后面陆续会换到其他的一些工具，如，等。也会介绍一些常用的工具。如下一代的语法编译器，的路由，的交互。最近项目进度慢下来了，花点时间总结一下。文章会从vue1.x 到2.x的一些说明以及使用，也会文章中的代码共享出来。详细请关注后续。简介：感慨是会用到一些第三方的模块下载工...

pkhope 2019-08-01 17:25 评论0 收藏0
用Vue2.x重写github-explorer

摘要：温馨提示这个项目主要是用来学习的，所以我会不断建分支重写，下一个分支是。更加温馨的提示已经将运用在了大型的项目中，反响一流，下一步是转，希望喜欢的同学坚定信念啊。 github-explorer Rebuild with Vue 2.0 源码地址1.x版本Live DemoReact版 Demo 简介之前看到了一个很有意思的项目，是一位大牛写的github-explorer。他用的是...

keithyau 2019-08-22 11:02 评论0 收藏0