js--day14事件流事件流描述的是从页面中接收事件的顺序。事件发生时会在元素节点之间按照特定的顺序传播，这个传播过

事件流

事件流描述的是从页面中接收事件的顺序。事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程也叫做DOM事件流

结论：
- 当咱们绑定了一个事件并执行后，这个事件并没有随着执行完毕而消失，会在节点之间进行传播
- 只有相同的事件之间才会进行传播
- 事件传播一般只发生在祖先元素和后代元素之间
完整的事件流阶段：
1. 捕获阶段事件从外面往里面进行传播，在大的元素上面触发，再给小的传播
2. 当前目标阶段
3. 冒泡阶段：事件会从里面往外面进行传播，在小的元素里面触发，再给大的传播

阻止冒泡

e.stopPropagation()

div{
    width: 200px;
    height: 300px;
    background-color: hotpink;
    display: none;
}

<button>显示</button>
<div></div>
<script>
    var btn = document.querySelector('button')
    var box = document.querySelector('div')
    btn.onclick = function(e){
        box.style.display = 'block'
        // alert(1)
        e.stopPropagation()
    }
    document.onclick = function(){
        box.style.display = 'none'
        // alert(2)
    }
</script>

事件委托机制

事件委托（委派）指将事件统一绑定给元素的共同祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素从而通过祖先元素的响应函数来处理事件。

事件委托是利用了冒泡，通过委托可以减少事件绑定的次数，提高程序的性能。

target - event中的target表示触发事件的对象

oul.onclick = function(eve){
var e = eve || window.event;
var target = e.target || e.srcElement;
//如果触发事件的对象是我们期望的元素，则执行，否则不执行
if(target.nodeName == "LI"){
   console.log(target.innerHTML);
   }
}

优势：

节省性能
可以给页面上暂时不存在的元素绑定事件

浏览器的默认行为

指的是浏览器默认自带的一些东西
- 右键菜单
- 默认选中文字
- 超链接点击会跳转
- 表单点击提交
- 当鼠标拖拽过快的时候出现禁止图标
- 在文本框里面输入内容
- ···
阻止默认行为方案
- return false 推荐使用
- e.preventDefault()
- e.returnValue = false 低版本的IE浏览器（在测试的过程中发现现在的浏览器版本升级了后，这个也可以使用了）
例子：自定义鼠标右键事件

        *{
           margin: 0;
           padding: 0;
       }
       div{
           width: 200px;
           height: 300px;
           background-color: hotpink;
           position: absolute;
           display: none;
       }

<div></div>
<script>
   var box = document.querySelector('div')

   // 鼠标右键
   oncontextmenu = function(e){
       
       box.style.display = 'block'

       // 获取鼠标坐标
       var x = e.clientX
       var y = e.clientY

       box.style.left = x + 'px'
       box.style.top = y + 'px'

       return false
   }

   // 鼠标左键
   document.onclick = function(){
       box.style.display = 'none'
   }

</script>

事件监听

事件绑定分为两种类型：
- 事件绑定:
  - 简单易用，被所有的浏览器所支持，兼容性更好
  - 只有冒泡阶段，没有捕获阶段
  - 相同的事件不能重复绑定
- 事件监听:
  - 是一个方法，使用起来稍微复杂
  - 冒泡阶段和捕获阶段同时存在
  - 可以绑定相同的事件
  - 兼容性没有事件绑定那么好
事件监听语法：
- ele.addEventListener()
- ele.removeEventListener()
参数
- 参数1表示的是事件名称，不需要加on，字符串类型
- 参数2表示的是回调函数，里面写具体的业务代码
- 参数3表示的是冒泡（false，默认）还是捕获（true）

ES5

一、严格模式

除了正常运行模式，ECMAscript 5 添加了第二种运行模式："严格模式"（strict model）。顾名思义，这种模式使得Javascript在更严格的条件下运行。

1、严格模式的特点

a、消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;

b、消除代码运行的一些不安全之处，保证代码运行的安全；

c、提高编译器效率，增加运行速度；

d、为未来新版本的Javascript做好铺垫。

"严格模式"体现了Javascript更合理、更安全、更严谨的发展方向，包括IE 10在内的主流浏览器，都已经支持它

另一方面，同样的代码，在"严格模式"中，可能会有不一样的运行结果；一些在"正常模式"下可以运行的语句，在"严格模式"下将不能运行。掌握这些内容，有助于更细致深入地理解Javascript，让你变成一个更好的程序员。

3、严格模式时注意事项

a、全局变量声明时必须加var

b、this 无法指向全局对象

c、函数内重名属性 - 在函数上下文中不允许重复的参数名称

d、arguments对象

arguments对象不允许被动态改变

arguments.callee()对象不允许被自调用

e、新增保留字； implements, interface, let, package, private, protected, public, static, yield

some():

方法用于检测数组中的元素是否满足指定条件（函数提供）。如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。否则返回false

var arr = [18, 29, 30, 22, 26, 21]
// some(): 方法用于检测数组中的元素是否满足指定条件（函数提供）。如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。否则返回false
var res = arr.some(function(item, index){
    // console.log(item, index)
    return item >= 30
})
console.log(res) // true

every():

方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。如果有一个不符合就返回false

var arr = [18, 29, 30, 15, 26, 21]
var res = arr.every(function(item){
    return item >= 18
})
console.log(res)

reduce() / reduceRight()

累加器，可以把数组里面的每一项数组元素进行相加或者拼接

函数参数:
- 回调函数
  - 参数1表示第一次计算的结果
  - 参数2表示的是后面需要进行计算的数组元素（每一次都是变化的）
- 默认选项（你可以设置初始值）

// 展开二维数组
var arr = ['王成', ['a', 'b'], [10, 20, 30]]
var res = arr.reduce(function(first, item){
    return first.concat(item)
}, [])
console.log(res)

  var arr = [10, 20, 30, 50, 80]
  var sum = arr.reduceRight(function(first, item){
      // console.log(first, item)
      return first + item
  })
  console.log(sum)

ES6

声明变量

区别：
- var存在变量声明提升，可以重复声明相同的变量
- let不存在变量声明提升，不能重复声明相同的变量，存在块级作用域
- const声明常量（不能修改的），不存在变量声明提升，不能重复声明相同的变量，存在块级作用域

let：

块级作用域一种普遍存在于各个语言中的作用域范围；

在一个大括号中用let声明的变量在外部不可访问了，每个大括号都是独立的作用域

for(var  i = 0 ; i < aLi.length ; i ++){
    aLi[i].onclick = function(){
    console.log(i);  //永远都是aLi.length
	}
}

for(let i = 0 ; i < aLi.length ; i ++){
    aLi[i].onclick = function(){
        console.log(i);// 对应下标
    }
}

        var aBtn = document.querySelectorAll('button')
        for(var i=0; i<aBtn.length; i++){
            aBtn[i].onclick = function(){
                console.log(i)//永远都是aBtn.length
            }
        }

for(let i=0; i<aBtn.length; i++){
    // 作用域：可以把这个区域给你锁死，变量存储在这里了
    aBtn[i].onclick = function(){
        // 作用域，先在当前的作用域查找有没有i，没有找到就去上一级作用域进行查找
        console.log(i)// 对应下标
    }
}

const

const声明的是一个常量

const a = 20;

a = 30;    //Uncaught TypeError: Assignment to constant variable.

箭头函数

对普通函数的一种简化

语法 : const fn = ()=>{}

说明:
- 箭头函数只能通过变量表达式方式声明
- 箭头函数只有一个参数的时候可以省略小括号不写
- 箭头函数的花括号如果省略，那么表示你把函数的返回值也省略不写
注意点:
- 如果省略了箭头函数的花括号，返回的是基本数据类型，直接返回不了引用数据类型，如果要返回使用小括号包裹
- 箭头函数没有自己的this，如果里面写了this，那么this指向的是上一级代码的this

扩展运算符：...

功能：展开、合并、复制

        // 展开
var arr = [10, 20, 30]
function fn(a, b, c){
    console.log(a, b, c)
}
// fn(arr[0], arr[1], arr[2])
fn(...arr)

// 合并
function fn(..
  console.lo
}
fn(10, 20, 30)

// 复制
const obj = {
  name: '王成',
  age: 18,
  like: ['篮球'
}
const obj2 = {
  ...obj
}
console.log(obj2)

flat()

可以把多维数组展开为指定的维数的数组

var arr = [['a', 'a'], [1, 20, ['王成']], [[20,  20, ['a'], ['哈哈', '嘿嘿', [10, 20]]]]]
// var res = arr.flat(3)
var res = arr.flat(Infinity)
console.log(res)