一、默认事件
何为默认事件？比如 a 会跳转页面，submit 会提交表单等。
1. 普通js方法
e.preventDefault()函数。
<a href="http://www.baidu.com" onclick="stopDef(event)">百度</a>
function stopDef(e){
e.preventDefault();
}2. vue.js方法
.prevent 是vue 的内置修饰符，调用了 event.preventDefault()阻止默认事件
<div id="app">
<a href="http://www.baidu.com" @click.prevent="vueStopDef()">百度</a></div>
window.onload = function(){ new Vue({
el:"#app",
methods:{
vueStopDef(){ console.log("vue.js通过 .prevent 阻止默认事件")
}
}
});
}二、冒泡事件
何为事件冒泡？执行下段代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.div1 {
width: 500px;
height: 500px;
border: 1px solid black;
}
.div2 {
width: 400px;
height: 400px;
border: 1px solid black;
}
.div3 {
width: 300px;
height: 300px;
border: 1px solid black;
}
.div4 {
width: 200px;
height: 200px;
border: 1px solid black;
}
.div5 {
width: 100px;
height: 100px;
border: 1px solid black;
}
</style>
<script src="../js/vue.js"></script>
<script>
function fun01() {
console.log("点击了div1");
};
function fun02() {
console.log("点击了div2");
};
function fun03() {
console.log("点击了div3");
};
function fun04() {
console.log("点击了div4");
};
function fun05() {
console.log("点击了div5");
};
</script>
</head>
<body>
<div class="div1" onclick="fun01()">
<div class="div2" onclick="fun02()">
<div class="div3" onclick="fun03()">
<div class="div4" onclick="fun04()">
<div class="div5" onclick="fun05()">
div05 </div>
div04 </div>
div03 </div>
div02 </div>
div01 </div>
</body>
</html>当点击div05时，同时按顺序触发 div05、div04、div03、div02、div01；当点击div03的时候 ，同时按顺序出发div03、div02、div01 等。从内层div一层一层触发外层div事件，这种现象就是事件冒泡。
1. 普通 js 方法
e.stopPropagation()。上述代码中，在定义fun05()改成fun05(e)，同时在方法中加入e.stopPropagation()。在调用是 onclick=“fun05(event)”。当点击div05时，不会冒泡触发外层事件。
2. vue.js方法
.stop 是vue 的内置修饰符 调用了 e.stopPropagation()。阻止冒泡事件发生。下段代码中div5和div3出发点击事件时使用 .stop ，阻止冒泡事件发生。当点击div05 活着div03时，不会触发冒泡事件。
<div id="app" class="div1" @click="fun01">
<div class="div2" @click="fun02">
<div class="div3" @click.stop="fun03">
<div class="div4" @click="fun04">
<div class="div5" @click.stop="fun05">
div05 </div>
div04 </div>
div03 </div>
div02 </div>
div01</div>
window.onload = function (){ new Vue({
el:"#app",
methods:{
fun01(){ console.log("点击了div1");
},
fun02(){ console.log("点击了div2");
},
fun03(){ console.log("点击了div3");
},
fun04(){ console.log("点击了div4");
},
fun05(){ console.log("点击了div5");
}
}
});
}但是，还是有点问题，上段代码运行后，因为对div5 和div3阻止了冒泡事件。但是，当点击div4 的时候，div4发生冒泡事件，同时出发了div3的点击事件(后面的被div阻止了)。也就是说，即使自己本身使用.stop阻止冒泡事件(不去触发外层事件)，但是自身还是会被其它(内层事件)触发。这个时候，就需要 .self。
.self 是vue 的内置修饰符 对于所指定的元素 只有当前元素本身可以触发事件，修饰符可以连写。即，将上段代码div3绑定事件改为
<div @click.stop.self="fun03">此时，能出发 div3 的点击事件只有在点击div3时这一种情况。
js中addEventListener事件监听器参数详解
我们都知道addEventListener() 的参数约定是：useCapture是可选参数，默认值为false，目前DOM 规范做了修订：addEventListener() 的第三个参数可以是个对象值了。passive就是告诉浏览器我可不可以用stopPropagation...
js监听浏览器返回，pushState，popstate 事件，window.history对象
在WebApp或浏览器中，会有点击返回、后退、上一页等按钮实现自己的关闭页面、调整到指定页面、确认离开页面或执行一些其它操作的需求。可以使用 popstate 事件进行监听返回、后退、上一页操作。
CSS中的pointer-events属性实现点穿效果
具有层级关系的结构中，使用了pointer-events:none 属性将会使当前元素中的事件不会被捕获，从而实现了点穿的效果。而当代码示例中假如top元素具有子元素且显示指定pointer-events属性不为none的时候，top元素注册的事件将会被捕获/冒泡触发
js鼠标事件参数，获取鼠标在网页中的坐标
事件对象 event，JavaScript 将事件event作为参数传递，IE中把 event 事件对象作为全局对象 window 的一个属性，获取鼠标在网页中的坐标 = 鼠标在视窗中的坐标 + 浏览器滚动条坐标
js keyup、keypress和keydown事件 详解
js keyup、keypress和keydown事件都是有关于键盘的事件，当一个按键被pressed 或released在每一个现代浏览器中，都可能有三种客户端事件。
深入nodejs-核心模块Events详解（事件驱动）
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O的模型，使其轻量又高效。比如，文件操作中的fs事件流，网络编程所用到的tcp，http模块等，当你回想自己写的程序后，会发现很多操作都基于事件驱动，Events类。
纯CSS实现点击事件展现隐藏div菜单列表/元素切换
在写移动端导航的时候经常用到点击按钮出现/隐藏导航条的情况，最常见的方法当然还是前端框架直接调用，省心省力，不易出错；当然还有使用纯JS实现的小代码段。我这里整理了纯CSS实现方式，给需要的人和给自己做个笔记：实现原理利用CSS伪类:target
关于鼠标移动太快导致moseleave事件不触发的问题
我做的是一个table的编辑功能，当移入某行的时候展示编辑状态，在移出某行的时候显示的是原始状态，此时遇到一种情况，就是.当mousenter事件触发之后，由于鼠标移动得太快，同一个tr上绑定的mouseleave事件压根儿就没有执行。
Js事件传播流程
js事件传播流程主要分三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段。在我们平常用的addEventListener方法中，一般只会用到两个参数，一个是需要绑定的事件，另一个是触发事件后要执行的函数
vue公共事件总线eventBus的简单理解和使用
公共事件总线eventBus的实质就是创建一个vue实例，通过一个空的vue实例作为桥梁实现vue组件间的通信。它是实现非父子组件通信的一种解决方案。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!