正文

事件&vue修饰符

IP云
IP云V管理员/6 阅读
08/04
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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)

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

if(div1.addEventListener){
div1.addEventListener('click', function(){
console.log('支持')
})
}else if(div1.attachEvent){
div1.attachEvent('click', function(){
console.log('不支持')
})
}

例子：

<body>
<div id='div1' style="width: 300px; height: 300px; background: #fddddf;">
<div id='div2' style="width: 150px;height: 150px;background: #cccccc;"></div>
</div>
<script>
let div1 = document.getElementById('div1')
let div2 = document.getElementById('div2')
// div1.addEventListener('click', _ => {
// console.log('div1 --- true')
// }, true)
div1.addEventListener('click', _ => {
stopBubble(_)
console.log('div1----false')
})
// div2.addEventListener('click', _ => {
// console.log('div2---- true')
// }, true)
div2.addEventListener('click', _ => {
stopBubble(_)
console.log('div2----fasle')
})
function stopBubble(e){
if(e && e.stopPropagation) {
e.stopPropagation() // 因此她支持W3C的stopPropagation() 方法
} else {
window.event.cancelBubble = true; // 否则，我们需要使用IE的方式来取消事件冒泡
}
}
</script>
</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)

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

  1. 使用sync的时候，子组件传递的事件名必须是 update:value，其中value必须与子组件中props中声明的名称完全一致

  2. 注意带有.sync 修饰符的v-bind不能和表达式一起使用（例如：v-bind:title.sync="doc.title + '!'"是无效的）。取而代之的是，只能提供一个想绑定的属性名

  3. 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修饰符，那它就会被渲染为驼峰名。另，如果你使用字符串模版，则没有这些限制。

事件&vue修饰符的更多相关文章

  1. 理解vue 修饰符sync

    也是在vux中看到了这个sync 现在我们来看看vue中的sync 我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移 ...

  2. vue修饰符学习

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. vue 修饰符（转载）

    大佬写的很详细,直接转载过来,随时可以参考, 原博:https://www.w3cplus.com/vue/vue-methods-and-event-handling.html 事件处理 如果需要在 ...

  4. 深入理解vue 修饰符sync

    [ vue sync修饰符示例] 在说vue 修饰符sync前,我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移除了 ...

  5. vue-learning：28 - component - 组件事件的修饰符&grave;&period;native &sol; &period;sync&grave;，以及组件属性&grave;model&grave;

    组件事件的修饰符.native / .sync,以及组件属性model .native 原生事件修饰符 在一个组件中,如果我们为其绑定一个原生的点击事件@click,基本是无效的. 在vue中对组件绑 ...

  6. 深入理解vue 修饰符sync【 vue sync修饰符示例】

    在说vue 修饰符sync前,我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移除了 .sync .但是在 2.0 发 ...

  7. Vue 修饰符once的方法使用

    once:只执行一次 代码: <!doctype html> <html lang="en"> <head> <meta charset= ...

  8. Vue中监听 键盘事件及修饰符

    键盘事件: keyCode 实际值 48到57     0 - 9 65到90           a - z ( A-Z ) 112到135       F1 - F24 8            ...

  9. vue 修饰符

    Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() 或 event.stopPropagation(). Vue.js通过由点(.) ...

随机推荐

  1. nodejs 使用Google浏览器进行可视化调试——Node Inspector工具

    1.npm安装Node Inspector工具,全局安装 命令行执行npm install -g node-inspector 2.启动Node Inspector工具,命令行执行 node-insp ...

  2. jquery之实例应用

    Query是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多),对javascript进行了封装,是的更加便捷的开发,并且在兼容性方面十分优 ...

  3. Android 百度地图的使用

    可以参考百度官网Android开发指南. 里面有详细的步骤和Sample例子. http://lbsyun.baidu.com/index.php?title=androidsdk/guide/int ...

  4. 小菜鸟学 Spring-bean scope &lpar;一&rpar;

    this information below just for study record of mine. 默认情况下:Spring 创建singleton bean 以便于错误能够被发现. 延迟加载 ...

  5. hibernate的第一个程序

    #建表语句 create database hibernate; use hibernate; create table user( id int primary key, name varchar( ...

  6. Centos安装桌面环境

    刚开始装系统的时候,没有选Gnome或者KDE,现在想装个玩玩. 简单的安装可以参考这个:http://huruxing159.iteye.com/blog/744750 centos安装是是使用li ...

  7. 新博客——That

    很久没写博客了,打算换个地方重新开始. 旧博客地址如下: http://blog.csdn.net/that163

  8. Photoshop给草坪上的人物加上唯美的紫色霞光

    最终效果 1.打开原图素材大图,创建可选颜色调整图层,对黄色,绿色进行调整,参数设置如图1,2,效果如图3.这一步给地面部分增加橙黄色. <图1> <图2> <图3&gt ...

  9. 南邮 base64全家桶

    这几天不想学逆向 做做crypto(菜还瞎j2做)..... 题目: 全家桶全家桶全家桶!我怎么饿了......密文(解密前删除回车):R1pDVE1NWlhHUTNETU4yQ0dZWkRNTUpY ...

  10. NGS概念大科普（转）

    NGS又称为下一代测序技术,高通量测序技术 以高输出量和高解析度为主要特色,能一次并行对几十万到几百万条DNA分子进行序列读取,在提供丰富的遗传学信息的同时,还可大大降低测序费用.缩短测序时间的测序技 ...