标签：off 不同 jquery use 监听 learning out 内容 eve
eventstop / prevent / capture / self / once / passvise按键码keycode / 按键别名left / middle / rightctrl / shift / alt / meta，以及 exact前面介绍的所有指令,包括插值{{ }}、v-html、v-if、v-show、v-for、v-bind都是绑定数据data的显示。但在实际中，还涉及到元素交互的绑定，即绑定元素事件。
javascript和HTML之间的交互是通过事件实现的，事件就是用户与浏览器发生交互的时候执行的某种动作，包括事件名称和事件处理程序（或DOM2级中的事件监听器）。
回顾，在原生javascript中为事件指定处理程序有三种方式：
DOM 2级事件处理程序
关于原生事件更多内容，如事件流、事件处理程序、事件对象、事件类型、事件委托等，可以阅读《javascript高级程序设计》第13章 P345
在HTML事件处理程序中，每个元素支持的事件，都可以使用on+事件名作为该元素的HTML特性来指定。
<button id="btn1" onclick="alert('事件绑定1')">按钮点击1</button>在HTML中定义事件处理程序可以直接包含要执行的js代码，也可以调用页面script元素中定义的脚本代码。
<button id="btn1" onclick="showMessage()">按钮点击2</button><script>
// HTML事件
function showMessage(e) {
alert("事件绑定2")
}
// 删除对应事件
document.getElementById("btn1").setAttribute("onclick",null)
</script>DOM 0级事件处理程序是通过javascript指定事件处理程序的最传统的方式。每个DOM元素对象（包括window和document）都有自己的事件处理程序属性，属性以on+事件名组成，且为小写形式，如元素的点击事件click，则元素的DOM对象对应的事件处理程序属性为onclick，将这种属性值设置为一个函数，就可以指定事件处理程序。
<button id="btn3">按钮点击3</button><script>
// DOM 0级事件
var btn3 = document.getElementById("btn3")
btn3.onclick = function () {
alert("事件绑定3")
}
// 删除对应事件
btn3.onclick = null
</script>而在DOM 2级事件处理程序是以事件监听器的形式绑定到DOM元素，如addEventListener("click", fn, canCapture)。
在DOM 2级事件中定义了两个方法，分别用于为元素添加事件监听和删除事件监听的操作：
addEventListener(eventName, fn, canCapture)removeEventListener(eventName, fn, canCapture)
通过addEventListener()添加的事件处理程序只能使用removeEventListener()移除。并且移除时传入的参数必须与添加时传入的参数完全相同。也就意味着addEventListener()添加的处理函数是匿名函数时将无法移除。
<button id="btn4">按钮点击4</button><script>
// DOM 2级事件
var btn4 = document.getElementById("btn4")
btn4.addEventListener("click", function () {
alert("事件绑定4")
}, false)
btn4.removeEventListener("click", function() { // 无效，移除匿名处理函数无效
alert("事件绑定4")
}, false)
function fn() {
alert("事件绑定")
}
btn4.addEventListener("click", fn, false)
btn4.removeEventListener("click", fn, false) // 有效
</script>在jQuery中通过on方法为元素对象绑定事件，并且为部分常用事件提供了简写形式。
<button id="btn5">jQuery按钮点击5</button>
<button id="btn6">jQuery简写按钮点击6</button><script>
// jQuery 绑定事件
$("#btn5").on("click",function () {
alert("jQuery事件绑定5")
})
$("#btn6").click(function () {
alert("jQuery的click简写形式")
})
// 移除该元素上所有事件
$("#btn5").off()
</script>在原生js还是jq中，常用的事件绑定写法都必须先获取到目标元素。而在vue中，使用指令v-on监听元素事件，在写法上类似THML事件处理程序。即同其它指令一样，将v-on指令写在具体绑定元素的开始标签中，将在触发时调用 JavaScript 代码。
<div id="app">
<button id="btn7" v-on:click="alert('VUE绑定的click事件7')">Vue绑定按钮点击7--内联形式</button>
<button id="btn8" v-on:click="alertMessage">Vue绑定按钮点击8--调用方法形式</button>
</div><script>
// Vue 绑定事件
new Vue({
el: "#app",
data: {},
methods: {
alertMessage() {
alert("VUE绑定的click事件8")
}
}
})
</script>许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。通常的作法是用 v-on 接收一个需要调用的方法名称，将具体的处理代码写在methods中（按钮8的写法）。
@同v-bind可以简写成:一样，v-on也可以简写成@
<button id="btn7" @click="alert('VUE绑定的click事件7')">v-on的简写形式@</button>点击查看DEMO：v-on on HTML / DOM / jQuery / Vue`
如果v-on的事件处理程序绑定的是无参方法时，那么事件对象会作为默认参数传入，这个事件对象是原生的DOM事件对象，同onclick或addEventListener()获取到的事件对象一模一样。
如果绑定的是有参方法时，也可以通过传入$event变量来获取事件对象。
<div id="app">
<div>计数：{{ counter }}</div>
<button v-on:click="counter++">click to add 1</button>
<button v-on:click="increase">click to add 1 by method</button>
<button v-on:click="increaseByNum(10, $event)">click to add num by method</button>
</div>new Vue({
el: "#app",
data: {
counter: 0
},
methods: {
increase(e) {
this.counter++;
console.log(e.type)
},
increaseByNum(n,e) {
this.counter += n;
console.log(e.type)
}
}
})在事件处理程序中，我们经常需要阻止事件的某些行为，比如<a href="#">标签默认跳转行为，或者阻止点击冒泡行为等。在原生js中通过事件对象event中对应的属性实现。
var link = document.getElementById("a");
link.onclick = function (event) {
event.preventDefault() // 阻止默认行为
event.stopPropagation() // 阻止事件冒泡
}在Vue事件绑定中，提供了简便操作，通过使用对应的修饰符即可实现。修饰符是由点开头的指令后缀来表示的。
<!-- 阻止单击事件默认的冒泡行为 -->
<div class="out" @click="outMsg">
<div class="inner" @click.stop="innerMsg">stop bubble</div>
</div>
<!-- 点击不会跳转至外部页面 -->
<a href="www.baidu.com" @click.prevent="alertMessage" style="background:orange">prevent</a>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式，即先触发外部元素事件，再触发内部元素事件 -->
<div class="out" @click.capture="outMsg">
<div class="inner" @click="innerMsg">can capture</div>
</div>
<!-- 点击事件将只会触发一次 Vue 2.1.4 新增-->
<button @click.once="alertMessage">once</button>
<!-- 只当在 event.target 是当前元素自身时触发处理函数，内部元素冒泡至外部元素不会再触发外部事件 -->
<div class="out" @click.self="outMsg">
<div class="inner" @click="innerMsg">out self</div>
</div>
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发，而不会等待 `onScroll` 完成 Vue 2.3.0 新增 -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>在键盘事件中，通常需要监听特定按键的事件行为，所以在Vue中可以直接通过键盘事件修饰符实现
<!-- 只有当keyCode=13的按键（enter)按下时执行submit方法 -->
<input v-on:keyup.13="submit">但实现上通过keyCode正逐渐被废弃，所以Vue从2.5.0版本开始，可以使用键盘事件对象中event.key属性的所有可能值作为按键码的别名使用。
<input v-on:keyup.enter="submit">
<input v-on:keyup.shift-left="submit">在键盘按键中，有几个特殊的用于组合键的按键ctrl / shift / alt / meta，叫做修饰键。
其中
meta在不同系统上代表不同，如在 Mac 系统键盘上，meta对应 command 键 (?)。在 Windows 系统键盘meta对应 Windows 徽标键 (?)
<!-- 按住Ctrl情况下点击Click才生效，即 ctrl+alt+click也会被触发 -->
<div @click.ctrl="doSomething">Do something</div>如果只想按下ctrl键时就触发，可以使用.exact修饰符（vue 2.5.0版本新增）
<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>同键盘事件修饰符一样，鼠标事件有3个对应的鼠标事件修饰符
.left.middle.right<!-- 只有鼠标右键按下时执行submit方法 -->
<button type="submit" @mousedown.right="submit">提交</button>vue-learning：8-template-v-on-and-modifier
标签：off 不同 jquery use 监听 learning out 内容 eve
原文地址：https://www.cnblogs.com/webxu20180730/p/10890593.html
