js事件：
onclick
ondblclick 双击
onmousedown
onmousemove
onmouseout
onmouseover
onmouseup
键盘事件:
onkeydown
onkeypress
onkeyup
JS中的事件冒泡和事件捕获：
事件冒泡、事件捕获、阻止默认事件
事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。
事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。
event.stopPropagation 停止传播事件
event.preventDefault:阻止默认行为
1、事件冒泡。如下代码：
<body>
<div><input type="button" value="测试事件冒泡"/></div>
</body>
<script type="text/javascript">
var input = document.getElementsByTagName("input")[0];
var div = document.getElementsByTagName("div")[0];
var body = document.getElementsByTagName("body")[0];
input.onclick = function (e) {
this.style.border = "5px solid red"
alert("red")
}
div.onclick = function (e) {
this.style.border = "5px solid green"
alert("red")
}
body.onclick = function (e) {
this.style.border = "5px solid yellow"
// var e = e || window.e;
alert("red")
}
</script>
点击button事件，连同父元素绑定的事件一同触发。依次弹出”red“,"green","yellow"
2、阻止事件冒泡：
上面代码中我们修改input的事件代码如下：
input.onclick = function (e) {
this.style.border = "5px solid red";
var e = e || window.e;
alert("red");
e.stopPropagation();
}
这个时候只会弹出”red“，因为阻止了事件冒泡。
3、事件捕获：从顶层元素到目标元素或者从目标元素到顶层元素，和事件冒泡是一个相反的过程。
修改代码如下：
input.addEventListener("click", function () {
this.style.border = "5px solid red";
alert("red")
}, true);
div.addEventListener("click", function () {
this.style.border = "5px solid green";
alert("green")
}, true);
body.addEventListener("click", function () {
this.style.border = "5px solid yellow";
alert("yellow")
}, true)
点击button事件，这时候会依次弹出”yellow“,"green","red",如果把addEventListener方法的第三个参数改成false，则表示只在冒泡的阶段触发，弹出的依次为：”red“,"green","yellow"。
这是因为在W3C模型中，任何事件发生时，先从顶层开始进行事件捕获，直到事件触发到达了事件源元素。然后，再从事件源往上进行事件冒泡，直到到达document。
只要记住：
第三个参数若是true，则表示采用事件捕获，若是false，则表示采用事件冒泡。
ele.addEventListener('click',fun,true) true=捕获。false=冒泡
4、阻止默认事件
1.通过on这种方式的绑定的，使用return false;
2.addEventListener绑定的，使用e.preventDefault();
如下：
<a href="https://www.baidu.com" id="btn">百度一下</a>
btn.onclick = function () {
document.body.innerHTML = "hello world";
return false;
}
btn.addEventListener("click", function (e) {
document.body.innerHTML = "hello world";
var e = e || window.e;
e.preventDefault();
},false);
上面两个事件都能阻止事件向下进行（阻止页面跳转）。
Vue相关事件基础
事件处理：
监听事件：v-on 指令监听DOM事件。
eg:<button v-on:click="aaa()">点击</button>
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
事件绑定的简写:
<a v-on:click="doSomething"></a>
<a @click="doSomething"></a>
Vue中属性的绑定的简写直接是: === 'v-bind:'
事件冒泡：
<div id="app">
<div @click="show1()">
<input type="button" value="按钮" @click="show()">
</div>
</div>
var vm = new Vue({
el: "#app",
data: {},
methods: {
show: function () {
alert("input click");
},
show1: function () {
alert("div click");
}
}
});
点击按钮会执行show，show1方法。
练习：现在需要组织事件冒泡该怎么做呢？
有两种方法：
1）修改input标签代码如下即可：
<div @click="show1()">
<input type="button" value="按钮" @click.stop="show()">
</div>
此时点击按钮，就只会执行show()方法了。
2）使用event对象，具体如下：
show:function(event){
alert("input click");
event.cancelBubble = true;
},
默认事件：
如下代码（以鼠标右键菜单事件为例）：
<div id="app">
<input type="button" value="按钮1" @contextmenu="show()">
<input type="button" value="按钮2" @contextmenu.prevent="show1()">
</div>
按钮1右击，会出现弹窗，然后右击的默认菜单也会出现。
按钮2右击，只会出现弹窗，默认的事件会被阻止。
网友评论