资讯专栏INFORMATION COLUMN

vue1.x 事件对象(二)

Enlightenment / 3472人阅读

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

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

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


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

</>复制代码

  1. @click="vclick($event)"

图片素材截图于w3school

2.鼠标/键盘属性

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

</>复制代码

  1. function box2click(event){
  2. // alert(1);
  3. console.log("box2");
  4. console.log(event);
  5. if(event.altKey){
  6. console.log("事件被触发时候 alt 键被按下");
  7. }
  8. }
3.IE属性

4.标准 Event 属性

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

5.标准的Event 方法

6.以前的事件冒泡

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

javascript处理方法:

</>复制代码

  1. // 以前获取事件的方式
  2. function btnclick(event){
  3. // alert(1);
  4. console.log("以前的");
  5. console.log(event);
  6. //以前停止事件冒泡的方法
  7. //eventent.stopPropagation();
  8. }
  9. function box2click(event){
  10. // alert(1);
  11. console.log("box2");
  12. console.log(event);
  13. if(event.altKey){
  14. console.log("事件被触发时候 alt 键被按下");
  15. }
  16. }

对比vue 的方式
html 部分:

javascript 部分:

</>复制代码

  1. var vm = new Vue({
  2. el:"body",
  3. data () {
  4. return {
  5. msg:"hello"
  6. }
  7. },
  8. methods: {
  9. vclick(event){
  10. // alert("vue click");
  11. console.log(event);
  12. console.log("btn");
  13. //event.stopPropagation();
  14. event.cancelBubble=true;
  15. },
  16. boxClick(event){
  17. // alert("box click");
  18. console.log(event);
  19. }
  20. }
  21. })

阻止冒泡简写方式:
html关键部分:

methods 方法部分:

</>复制代码

  1. stopClick(){
  2. console.log("stopClick");
  3. }
阻止默认事件

html部分:

methods 方法部分:

</>复制代码

  1. // 阻止鼠标右键
  2. menuClick(){
  3. alert("menu");
  4. // event.preventDefault();
  5. }

事件的对象代码

键盘事件

</>复制代码

  1. var vm = new Vue({
  2. el:"body",
  3. methods: {
  4. keydownFnc(event){
  5. console.log(event);
  6. console.log(event.keyCode)
  7. }
  8. }
  9. })

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

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

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

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

相关文章

  • vue1.x 事件对象

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

    JasinYip 评论0 收藏0
  • vue1.x 基础使用(一)

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

    xuexiangjys 评论0 收藏0
  • vue1.x 基础使用(一)

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

    pkhope 评论0 收藏0
  • 用Vue2.x重写github-explorer

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

    keithyau 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<