JavaScriptday13:事件下

目录：

• 事件绑定方式
• 事件执行机制
• 函数补充

事件绑定方式：

• DOM0级、DOM2级

1. DOM0级：事件属性，事件赋值式

• 事件属性：把事件写在标签的属性里面
• <input type="button" οnclick="alertMessage()" value="按钮"/>

• 事件赋值式：

 2.DOM2级：监听方式：addEventListener、attachEvent

• 1.addEventListener

 2.attachEvent

 注意：两者都是dom2级监听绑定方式区别是前者IE7、8之前的版本使用，后者以下使用

• 三种赋值方式的区别：属性绑定事件区别于后两者后两者样式和行为分离，后两者的区别前者只能绑定同类型的事件一次，因为第二次事件会覆盖前者，而最后一种方式不会覆盖会依次执行

事件解绑：

• 属性赋值式解绑： 变量名.函数名（）=‘ ’
• 监听事件解绑：btn3.removeEventListener('click',事件处理函数名)

事件的执行机制 

1.事件的传播：嵌套的元素，当触发内层元素的事件时，外层的有相同事件的元素也会被触发

• 事件目标target：是你点击在哪个元素身上了，那么这个事件的目标就是什么
• 获取事件目标：var target=e.target

2.事件传播方向：冒泡，捕捉

• 冒泡：就是从事件 目标 的事件处理函数开始，依次向外，直到 window 的事件处理函数触发
  也就是从下向上的执行事件处理函数
• 捕捉：就是从 window 的事件处理函数开始，依次向内，只要事件 目标 的事件处理函数执行
  也就是从上向下的执行事件处理函数

 注意：1.addEventListener的第三个参数决定了是事件捕获还是事件冒泡false为冒泡，true为捕捉

2.事件的处理过程主要有三个阶段：捕获阶段，目标阶段，冒泡阶段； 

3.事件传播的阻止方法:

在W3C中，使用stopPropagation()方法。

在IE下使用cancelBubble = true方法。

• 事件委托：

1. 本来由元素自身实现的行为委托给上级元素实现

   2.应用场景

   循环遍历给多个元素绑定事件时考虑事件委托简化事件操作

   冒泡实现

   焦点事件不支事件委托

函数补充：

• 函数定义方式：

1. 声明式
2. 赋值式
3. 自调用函数：（function(形参){代码}）（实参）

 

4. arguments：在函数内部自带的变量，
表示所有实参的集合，
是伪数组

• unction fn(){

    console.log(arguments)
 }

   fn(10)