事件处理

说明

通过v-on绑定事件，也可以简写为@

分类

• 内联事件处理器
• 方法事件处理器

内联事件处理器

说明

事件被触发时执行的内联js语句

EG

vue
<button v-on:click='numbers++'></button>

<button @click='numbers++'></button>

方法事件处理器

说明

接受一个组件内定义的方法名或对某个方法的调用，自动接受原生DOM事件并触发执行

EG

vue
<script lang='ts'>
...
let userinfos1 = ref([1,2,3])
const changeuserinfos1 = ()=>{
  userinfos1.value=[3,4,5]
}
</script>

<template>
	<p @click="changeuserinfos1">{{ userinfos1 }}</p>
</template>

配合TS使用标注类型

对于原生DOM事件需要手动标注类型

vue
<script lang='ts'>
...
let userinfos1 = ref([1,2,3])

/*
(parameter) target: any
参数“target”隐式具有“any”类型

const changeuserinfos1 = (target)=>{
  userinfos1.value=[3,4,5];
  console.log('target', target)
}

*/

const changeuserinfos1 = (target: MouseEvent)=>{
  userinfos1.value=[3,4,5];
  console.log('target', target)
}
</script>

<template>
	<p @click="changeuserinfos1">{{ userinfos1 }}</p>
</template>

常见的原生DOM元素的类型

ts
interface HTMLElementTagNameMap {
    "a": HTMLAnchorElement;
    "abbr": HTMLElement;
    "address": HTMLElement;
    "applet": HTMLAppletElement;
    "area": HTMLAreaElement;
    "article": HTMLElement;
    "aside": HTMLElement;
    "audio": HTMLAudioElement;
    "b": HTMLElement;
    "base": HTMLBaseElement;
    "bdi": HTMLElement;
    "bdo": HTMLElement;
    "blockquote": HTMLQuoteElement;
    "body": HTMLBodyElement;
    "br": HTMLBRElement;
    "button": HTMLButtonElement;
    "canvas": HTMLCanvasElement;
    "caption": HTMLTableCaptionElement;
    "cite": HTMLElement;
    "code": HTMLElement;
    "col": HTMLTableColElement;
    "colgroup": HTMLTableColElement;
    "data": HTMLDataElement;
    "datalist": HTMLDataListElement;
    "dd": HTMLElement;
    "del": HTMLModElement;
    "details": HTMLDetailsElement;
    "dfn": HTMLElement;
    "dialog": HTMLDialogElement;
    "dir": HTMLDirectoryElement;
    "div": HTMLDivElement;
    "dl": HTMLDListElement;
    "dt": HTMLElement;
    "em": HTMLElement;
    "embed": HTMLEmbedElement;
    "fieldset": HTMLFieldSetElement;
    "figcaption": HTMLElement;
    "figure": HTMLElement;
    "font": HTMLFontElement;
    "footer": HTMLElement;
    "form": HTMLFormElement;
    "frame": HTMLFrameElement;
    "frameset": HTMLFrameSetElement;
    "h1": HTMLHeadingElement;
    "h2": HTMLHeadingElement;
    "h3": HTMLHeadingElement;
    "h4": HTMLHeadingElement;
    "h5": HTMLHeadingElement;
    "h6": HTMLHeadingElement;
    "head": HTMLHeadElement;
    "header": HTMLElement;
    "hgroup": HTMLElement;
    "hr": HTMLHRElement;
    "html": HTMLHtmlElement;
    "i": HTMLElement;
    "iframe": HTMLIFrameElement;
    "img": HTMLImageElement;
    "input": HTMLInputElement;
    "ins": HTMLModElement;
    "kbd": HTMLElement;
    "label": HTMLLabelElement;
    "legend": HTMLLegendElement;
    "li": HTMLLIElement;
    "link": HTMLLinkElement;
    "main": HTMLElement;
    "map": HTMLMapElement;
    "mark": HTMLElement;
    "marquee": HTMLMarqueeElement;
    "menu": HTMLMenuElement;
    "meta": HTMLMetaElement;
    "meter": HTMLMeterElement;
    "nav": HTMLElement;
    "noscript": HTMLElement;
    "object": HTMLObjectElement;
    "ol": HTMLOListElement;
    "optgroup": HTMLOptGroupElement;
    "option": HTMLOptionElement;
    "output": HTMLOutputElement;
    "p": HTMLParagraphElement;
    "param": HTMLParamElement;
    "picture": HTMLPictureElement;
    "pre": HTMLPreElement;
    "progress": HTMLProgressElement;
    "q": HTMLQuoteElement;
    "rp": HTMLElement;
    "rt": HTMLElement;
    "ruby": HTMLElement;
    "s": HTMLElement;
    "samp": HTMLElement;
    "script": HTMLScriptElement;
    "section": HTMLElement;
    "select": HTMLSelectElement;
    "slot": HTMLSlotElement;
    "small": HTMLElement;
    "source": HTMLSourceElement;
    "span": HTMLSpanElement;
    "strong": HTMLElement;
    "style": HTMLStyleElement;
    "sub": HTMLElement;
    "summary": HTMLElement;
    "sup": HTMLElement;
    "table": HTMLTableElement;
    "tbody": HTMLTableSectionElement;
    "td": HTMLTableDataCellElement;
    "template": HTMLTemplateElement;
    "textarea": HTMLTextAreaElement;
    "tfoot": HTMLTableSectionElement;
    "th": HTMLTableHeaderCellElement;
    "thead": HTMLTableSectionElement;
    "time": HTMLTimeElement;
    "title": HTMLTitleElement;
    "tr": HTMLTableRowElement;
    "track": HTMLTrackElement;
    "u": HTMLElement;
    "ul": HTMLUListElement;
    "var": HTMLElement;
    "video": HTMLVideoElement;
    "wbr": HTMLElement;
}

事件修饰符

事件修饰符名称	用途
.stop	阻止事件的冒泡行为
.prevent	阻止元素的默认行为(如a标签默认点击跳转行为)
.self	只有在event.target是当前元素自身时触发处理函数
.once	事件只会触发一次
'.passive'	事件只会在捕获阶段触发
'.`passive'	不拦截默认事件

passive修饰符

在滚动监听@scoll，@touchmove时，每次都使用内核线程查询prevent会使滑动卡顿,使用.passive 修饰符跳过内核线程查询，可以大大提高流畅度。参考

按键修饰符

EG

vue
<!-- 仅在 `key` 为 `Enter`(回车符) 时调用 `change` --> 
<input @keyup.enter="change" />

按键别名

• .enter 回车键
• .tab Tab键
• .delete (捕获“Delete”和“Backspace”两个按键)
• .esc 左上角Esc按键
• .space 空格键
• .up 小键盘上方向键
• .down 小键盘下方向键
• .left 小键盘左方向键
• .right 小键盘右方向键

鼠标按键修饰符

• .left 鼠标左键
• .right 鼠标右键
• .middle 鼠标滚轮键下按