JavaScript是一种基于对象和事件驱动的编程语言，可以实现页面的互动效果。在JavaScript高级程序设计中，js事件的相关知识是常见的知识点。本篇笔记主要介绍js事件的相关内容。
在Web应用中，经常需要处理用户的输入或操作，例如，鼠标单击、按键按下等操作。这种操作可以称之为事件，事件可以被JavaScript代码监听并进行相应的处理，从而实现页面的互动效果。
为了监听和处理事件，JavaScript提供了事件处理程序。事件处理程序可以是函数或是函数表达式，可以通过HTML元素的属性来指定，例如：
<button onclick="alert('Hello')">点击</button>
上述代码中，按钮元素的onclick属性会在按钮被点击时执行alert('Hello')语句。
另外，也可以通过JavaScript代码来为元素添加事件处理程序，例如：
var btn = document.querySelector('button');
btn.onclick = function() {
alert('Hello');
};
上述代码中，querySelector方法获取了第一个button元素，然后为按钮元素的onclick属性赋值一个函数表达式，函数表达式实现了弹出Hello的效果。
JavaScript事件模型分为两种：DOM0级事件和DOM2级事件。DOM0级事件是指通过HTML元素的属性来指定事件处理程序，例如上面示例中的按钮的onclick属性。DOM2级事件是指通过addEventListener()和removeEventListener()方法来实现事件处理程序的添加和删除。
这两种事件模型的主要区别在于多个事件处理程序的执行顺序。在DOM0级事件中，同一事件只能指定一个事件处理程序。在DOM2级事件中，一个元素可以为同一事件指定多个事件处理程序，多个事件处理程序的执行顺序由添加的顺序决定。
事件流描述的是事件从页面中接收的顺序，事件可以沿着两个方向流动：从文档顶部向下流动（捕获阶段）和从文档底部向上流动（冒泡阶段）。
当HTML元素嵌套时，事件的流动会按照HTML元素的嵌套结构依次触发，先从祖先元素开始触发，再依次向下触发。
<div id="outer">
<div id="inner">点击这里</div>
</div>
var outer = document.querySelector('#outer');
var inner = document.querySelector('#inner');
outer.addEventListener('click', function() {
console.log('outer');
}, true);
inner.addEventListener('click', function() {
console.log('inner');
}, true);
上述代码中，在outer元素和inner元素都添加了事件处理程序，第三个参数设置为true，则事件处于捕获阶段。这时，点击inner元素，会先触发outer元素的事件处理程序，然后再触发inner元素的事件处理程序。
在事件冒泡过程中，除非阻止事件冒泡，否则事件会一直冒泡到document对象，可以使用stopPropagation()方法来阻止事件冒泡。
另外，有些元素在默认情况下会执行一些操作，例如在表单中提交表单数据时，可以使用preventDefault()方法来阻止元素默认行为的执行。
<a href="https://www.baidu.com/">百度一下</a>
var a = document.querySelector('a');
a.addEventListener('click', function(event) {
event.preventDefault();
}, false);
上述代码中，在点击a元素时，将会阻止默认行为，不会打开新的页面。
本文链接：http://task.lmcjl.com/news/15815.html