JavaScript高级程序设计 阅读笔记（十七） js事件

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元素时，将会阻止默认行为，不会打开新的页面。