事件&vue修饰符
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 }
例子:
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>
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修饰符,那它就会被渲染为驼峰名。另,如果你使用字符串模版,则没有这些限制。