事件冒泡、事件捕获、事件流、阻止浏览器的默认行为、顶级对象window

一、事件流

// 事件冒泡、事件捕获
// 事件冒泡: 当一个元素的事件触发了，该事件会在当前元素的所有祖先元素中依次来触发（从里到外效果）
// 事件捕获：从外到里
// 不要存在以下误区：事件冒泡、事件捕获和元素注册上事件才有关系（错误）
// 和注册事件没有关系

// 事件流
// 事件流描述的是从页面中接收事件的顺序。(事件流，事件传播的流程)
// 事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即 DOM 事件流。
// 事件流会经历3个阶段： 
// 1. 捕获阶段
// 2. 目标阶段
// 3. 冒泡阶段 
//  1. 注册的事件只会在一个阶段触发（要么是捕获阶段、要么是冒泡阶段）
//  2. addEventListener的第三个参数来决定注册的事件是在哪个阶段触发
//     第三个参数 true  注册的事件是在捕获阶段触发
//     第三个参数 false  注册的事件是在冒泡阶段触发
//  3. 如果使用的是on注册的事件，会在冒泡阶段触发

// 简单理解：我们向水里面扔一块石头，首先它会有一个下降的过程，这个过程就可以理解为从最顶层向事件发生的最具体元素（目标点）的捕获过程；之后会产生泡泡，会在最低点（ 最具体元素）之后漂浮到水面上，这个过程相当于事件冒泡。 

二、阻止浏览器的默认行为

// 浏览器默认行为
// 1. a链接点击跳转页面
// 2. submit提交表单内容
// 3. 图片默认可拖拽

// 阻止浏览器默认行为
//  1. return false
//  2. 事件对象 e.preventDefault(); 也可以阻止事件冒泡
//  3. a的href属性 "javascript:void(0);"
//  前两种写法是可以阻止浏览器的所有默认行为
//  最后一种使用于阻止a链接的默认行为

三、顶级对象window

// 它是 JS 访问浏览器窗口的一个接口。
// 它是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。
// window.onload事件会在窗体加载完成后执行，通常我们称之为入口函数。
// window.onload 是窗口 (页面）加载事件，当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。

四、定时器

// 第一种定时器
// 延时器： 延时一段时间在执行
//  语法： setTimeout(fun, delay)
//  参数：
//      fun： 需要延时执行的函数
//      delay： 延时时间，单位是ms
// 清楚延时器 var timerId = setTimeout ();
//  返回值：返回了开启的延时器的id（数值类型，不会重复的）
// clearTimeout(timerId)  可以清除延时器

// 第二种定时器（重要）
// 定时器：每间隔一段时间来执行
// 开启：
//  var timerId = setInterval(fun, interval)
//  参数： 
//     fun： 定时执行的函数
//     interval： 间隔时间, ms
// 这个调用函数可以直接写函数，或者写函数名
//  返回值：返回开启的定时器的id（不会重复的纯数值） ==> 根据这个id清除
// 清除：clearInterval(timerId)