事件与列表的处理

rainyang 发布于2019-08-21 16:16 / 2813人阅读

摘要：事件处理事件源事件事件处理函数方法事件处理事件源发生了什么事件内联处理方法函数值可以直接传进参数里事件修饰符阻止单击事件冒泡组止默认行为添加事件侦听器时使用事件捕获模式只当事件在该元素本身触发时触发回调只发生一次例

事件处理

---事件源 ---事件 ---事件处理函数

方法事件处理

a.function(e){
    
    console.log(e.target);//事件源
    console.log(e.type);//发生了什么事件
    
}

内联处理方法

函数值可以直接传进参数里

事件修饰符

stop 阻止单击事件冒泡

prevent组止默认行为

capture添加事件侦听器时使用事件捕获模式

self只当事件在该元素本身触发时触发回调

once只发生一次
例如冒泡行为

.stop时阻止自事件的行为.self

键值修饰符

header 1	header 2
enter	13
空格	32
左	37
上	38
右	39
下	40
0-9	48-57
a-z	65-90

按键别名
-.enter
-tab
-delete (捕获 “删除” 和 “退格” 键)
-esc
-space
-up
-down
-left
--right

表单绑定事件

*文本（text,textarea多行文本）

复选框


  
  Jack
  
  John
  
  Mike
  

  Checked names: {{ checkedNames }}

单选按钮


  
  One
  

  
  Two
  

  Picked: {{ picked }}

选择列表

单选列表


  
  Selected: {{ selected }}

修饰符

lazy
在默认情况下， v-model 在 input 事件中同步输入框的值与数据 (除了上述 IME 部分)，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：

number如果想自动将用户的输入值转为 Number 类型

trim自动过滤用户输入的首尾空格

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

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

NIO网络相关基础知识

摘要：操作系统是能够获取到事件操作完成的事件，基于回调函数机制和操作系统的操作控制实现事件检测机制。前面的文章NIO基础知识介绍了Java NIO的一些基本的类及功能说明，Java NIO是用来替换java 传统IO的，NIO的一些新的特性在网络交互方面会更加的明显。 Java 传统IO的弊端基于JVM来实现每个通道的轮询检查通道状态的方法是可行的，但仍然是有问题的，检查每个通道...

1fe1se 2019-08-15 14:30 评论0 收藏0
WINDOWS系统下触屏设备网页实现滚动的touch事件处理

摘要：公司有触控屏设备采用系统，普通网页打开后触屏操控如滑动网页没有效果，需在网页代码中添加处理事件网页的手势滑动效果。所以在调用事件时，要注意禁止缩放和滚动。其他地方基本与鼠标事件是一致的。公司有触控屏设备采用WIN7系统，普通网页打开后触屏操控如滑动网页没有效果，需在网页代码中添加JS处理touch事件网页的手势滑动效果。当然首先需要webkit内核支持touch事件。以下内容引用h...

jhhfft 2019-08-19 18:15 评论0 收藏0
JavaScript学习总结（三）BOM和DOM详解

摘要：有级级级共个级别。事件类型事件类型鼠标事件键盘事件事件事件处理器执行代码的程序在事件发生时会对事件做出响应。在标签中使用事件处理器的语法是标签事件处理器代码事件处理程序事件就是用户或浏览器自身执行的某种动作。 DOM介绍 D（文档）可以理解为整个Web加载的网页文档，O（对象）可以理解为类似window对象只来的东西，可以调用属性和方法，这里我们说的是document对象，M（模型）可...

littlelightss 2019-08-21 12:27 评论0 收藏0
DOM事件机制

摘要：而事件分为个级别级事件处理，级事件处理和级事件处理。一个事件发生后，会在子元素和父元素之间传播。也就是说，始终是监听事件者，而是事件的真正发出者。五参考文章级别与事件事件机制解惑事件模型事件委托详解事件的学与记和和的区别前言本文主要介绍DOM事件级别、DOM事件模型、事件流、事件代理和Event对象常见的应用，希望对你们有些帮助和启发！本文首发地址为GitHub博客,写文章不易，...

laznrbfe 2019-08-23 13:53 评论0 收藏0