事件&vue修饰符

JavaScript 事件

HTML事件是发生在HTML元素上的事情。当在HTML页面帐使用JavaScript时，javascript可以触发这些事件

HTML 事件

HTML事件可以是浏览器的行为，也可以是用户的行为。以下是HTML 事件的实例：

HTML页面完成加载
HTML input 字段改变时
HTML 按钮被点击通常，当事件发生时，可以做些事情。在事件触发时，JavaScript 可以执行一些代码HTML元素钟可以添加事件属性，使用javascript代码来添加HTML元素

常见的HTML事件

onchange：HTML元素改变
onclick：用户点击HTML元素
onmouseover：用户在一个HTML元素上移动鼠标
onkeydown 用户按下键盘按键
onload 浏览器已完成页面的加载

javascript 可以做什么

事件可以用于处理表单验证，用户输入，用户行为及浏览器动作

页面加载时触发事件
页面关闭时触发事件
用户点击按钮执行动作
验证用户输入内容的合法性
等等。。。可以使用多种方法来执行JavaScript事件代码
HTML 事件属性可以直接执行 JavaScript 代码
HTML 事件属性可以调用 JavaScript 函数
你可以为 HTML 元素指定自己的事件处理程序
可以阻止事件的发生
等等

事件冒泡或事件捕获

事件传递有两种方式：冒泡与捕获。事件传递定义了元素事件触发的顺序。如果你将<p>元素插入到<div>元素中，用户点击<p>元素，哪个元素的“click”事件先被触发呢？在冒泡中，内部元素的事件会先被触发，然后再触发外部的元素，即：<p>元素的点击事件先触发，然后触发<div>元素的点击事件。在捕获中，外部元素的事件会被先触发，然后才会触发内部元素的事件，即：<div>元素的点击事件先触发，然后再触发<p>元素的点击事件addEventListener(event, function, useCapture); useCapture默认为false，即冒泡传递，当值为true时，事件使用捕获传递。

概念

DOM事件流存在三个阶段：事件捕获阶段、出于目标阶段、事件冒泡阶段事件捕获：通俗的理解就是，当鼠标点击或者触发dom事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获的方式注册了对应的事件的话，会先触发父元素绑定的事件。事件冒泡：与事件捕获恰恰相反，事件冒泡顺序是由内到外进行事件传播，直到根节点。

dom标准事件流的触发的先后顺序为：先捕获再冒泡，即当触发dom事件时，会进行事件捕获，捕获到事件源之后，通过事件传播进行事件冒泡。不同得浏览器有着不同得实现，IE10及以下不支持捕获事件，所以就少了一个事件捕获阶段，IE11、Chrome、FireFox、Safari等浏览器则同时存在。

addEventListener() 方法

方法设定一个事件监听器，当某一事件发生通过设定的参数执行操作。语法是：addEventListener(event, function, useCapture)

参数 event 是必须的，表示监听的事件，例如 click, touchstart 等，就是之前不加前缀 on 的事件。
参数 function 也是必须的，表示事件触发后调用的函数，可以是外部定义函数，也可以是匿名函数。
参数 useCapture 是选填的，填true或者false，用于描述事件是冒泡还是捕获，true表示捕获，默认的false表示冒泡

移除事件监听

如果要移除 addEventListener() 添加得事件，就要使用removeEventListener() 语法是：removeEventListener(event, function)

参数与addEventListener() 一致

兼容性

IE8 以及更早的版本，和Opera7.0以及更早的版本，不支持addEventListener() 和 removeEventListener() 方法，他们使用的是以下方法代替

添加事件：
- attachEvent(event, func)
移除事件：
- detachEvent(event, func)

用以下方法可以解决兼容性问题

1 if(div1.addEventListener){
2     div1.addEventListener('click', function(){
3         console.log('支持')
4     })
5 }else if(div1.attachEvent){
6     div1.attachEvent('click', function(){
7         console.log('不支持')
8     })
9 }

View Code

例子：

 1 <body>
 2     <div id='div1' style="width: 300px; height: 300px; background: #fddddf;">
 3         <div id='div2' style="width: 150px;height: 150px;background: #cccccc;"></div>
 4     </div>
 5     <script>
 6         let div1 = document.getElementById('div1')
 7         let div2 = document.getElementById('div2')
 8         // div1.addEventListener('click', _ => {
 9         //     console.log('div1 --- true')
10         // }, true)
11         div1.addEventListener('click', _ => {
12             stopBubble(_)
13             console.log('div1----false')
14         })
15         // div2.addEventListener('click', _ => {
16         //     console.log('div2---- true')
17         // }, true)
18         div2.addEventListener('click', _ => {
19             stopBubble(_)
20             console.log('div2----fasle')
21         })
22         function stopBubble(e){
23             if(e && e.stopPropagation) {
24                 e.stopPropagation() // 因此她支持W3C的stopPropagation() 方法 
25             } else {
26                 window.event.cancelBubble =  true; // 否则，我们需要使用IE的方式来取消事件冒泡
27             }
28         }
29     </script>
30 </body>

View Code

vue 修饰符

表单修饰符

填写表单，最常用的就是input， v-model 的修饰符

.lazy
- 在输入框完成之后，也就是光标离开之后，才会更新视图
.trim
- 过滤输入框中多余的空格，只能过滤首尾的空格，中间是不会过滤的
.number
- 将输入框中的内容转换为数字，但是只是首位输入数字才会转换，首位输入其他的就不会转换为数字了

事件修饰符

.stop
- 由于事件冒泡机制。在给元素绑定点击事件的时候，也会触发父级的点击事件,该修饰符会阻止事件冒泡。相当于调用了event.stopProgation() 方法
.prevent
- 用于阻止事件的默认行为，例如，当点击提交按钮时阻止对表单的提交。相当于调用了event.preventDefault() 方法
- 修饰符可以同时使用多哥，但是可能会因为顺序而有所不同。用@click.prevent.self会阻止所有的点击，而@click.self.prevent只会阻止对元素自身的点击。【从左往右判断】
.self
- 只当事件是从事件绑定的元素本身触发时才触发回调。比如从 .stop时候知道子元素会冒泡到父元素导致触发父元素的点击事件，当添加了.self 以后，点击button不会触发父元素的点击事件，只有当点击父元素的时候，才会触发。

  
    <div @click.self="func2"> 
       <input type="text" v-model.lazy="value">
       <Button @click="func1">点击</Button>   <div></div>
     </div>

.once
- 只能用一次，绑定了事件以后只能触发一次，第二次就不会触发
.capture
- 完整的事件机制是：捕获阶段 --- 目标阶段 --- 冒泡阶段，默认事件是从目标开始象上冒泡，这个修饰符就是返过去，事件触发从包含这个元素的顶层开始往下触发
.passive
- 当在监听元素的滚动事件的时候，会一致触发onscroll事件，在pc端是没啥问题的，但是在移动端，会让网页变卡，因此需要使用这个修饰符的时候，相当于给onscroll事件加了一个.lazy 修饰符
.native
- 在写自己的组件时可能会绑定一些事件，但是直接绑定到组件上可能会失效，此时，必须使用.native 来修饰这个事件，可以理解为该修饰符的作用就是把一个vue组件转换为一个普通的HTML标签。
- 使用.native 修饰符来操作普通HTML标签是会领事件失效的

鼠标按钮修饰符

刚刚我们讲到这个click事件，我们一般是会用左键触发，有时候我们需要更改右键菜单啥的，就需要用到右键点击或者中间键点击，这个时候就要用到鼠标按钮修饰符

.left: 左键点击
.right：右键点击
.middle：中间点击

键值修饰符

其实这个也算是事件修饰符的一种，因为它都是用来修饰键盘事件的。比如onkeyup，onkeydown啊

.keyCode
- 如果不用keyCode修饰符，那我们每次按下键盘都会触发shout，当我们想指定按下某一个键才触发这个shout的时候有用了。

v-bind 修饰符

.sync
- 有些情况下，可能需要对一个prop进行双向绑定。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以修改父组件，且在父组件和子组件都没有明显的改动来源

  
  <!-- 父组件 -->
   <comp :myMessage="bar" @update:myMessage="func"></comp>

  
  // 父组件
  func(e){
   this.bar = e;
 }

  
  // 子组件
  //子组件js
  func2(){
   this.$emit('update:myMessage',params);
 }

现在这个.sync修饰符就是简化了上面的步骤

  
  <!-- 父组件 -->
  <comp :myMessage.sync='bar'></comp>

  
  this.$emit('update:myMessage', params)

这样确实会很方便，但是也要注意

使用sync的时候，子组件传递的事件名必须是 update:value，其中value必须与子组件中props中声明的名称完全一致
注意带有.sync 修饰符的v-bind不能和表达式一起使用（例如：v-bind:title.sync="doc.title + '!'"是无效的）。取而代之的是，只能提供一个想绑定的属性名
v-bind.sync 用在字面量的对象是无法工作的，例如（v-bind.sync="{title:'sdsd'}"）,是无法正常工作的。

.propProperty：节点对象在内存中存储的属性，可以访问和设置。Attribute：节点对象的其中一个属性( property )，值是一个对象。可以通过点访问法 document.getElementById('xx').attributes 或者 document.getElementById('xx').getAttributes('xx') 读取，通过 document.getElementById('xx').setAttribute('xx',value) 新增和修改。在标签里定义的所有属性包括 HTML 属性和自定义属性都会在 attributes 对象里以键值对的方式存在。其实attribute和property两个单词，翻译出来都是属性，但是《javascript高级程序设计》将它们翻译为特性和属性，以示区分

  
  <!-- 这里的id,value,style都属于property -->
  <!-- index属于attribute -->
  <!-- id、title等既是属性，也是特性。修改属性，其对应的特性会发生改变；修改特性，属性也会改变 -->
 <input id="uid" title="title1" value="1" :index="index">
 <!-- input.index === undefined -->
 <!-- input.attributes.index === this.index -->

从上面我们可以看到如果直接使用v-bind绑定，则默认会绑定到dom节点的attribute。所以，为了防止污染HTML结构和通过自定义属性存储变量，避免暴露数据就可以使用该修饰符

  
  <input id='id1' title='title' :index.prop='index'>
 <!-- input.index === this.index -->
 <!-- input.attributes.index === undefined -->

.camel由于HTML特性是不区分大小写的<svg :viewBox="viewBox"></svg>实际上会渲染为<svg :viewbox="viewBox"></svg>这将导致渲染失败，因为 SVG 标签只认 viewBox，却不知道 viewbox 是什么。如果我们使用.camel修饰符，那它就会被渲染为驼峰名。另，如果你使用字符串模版，则没有这些限制。