JavaScript中几个重要的知识点（2） ---- DOM事件

JavaScript中几个最重要的大知识点

1. 面向对象

2. DOM事件

3. 异步交互ajax

事件

事件就是文档和浏览器的瞬间交互行为

1.事件类型

• 点击: click

• 滚轮: scroll

• 滑动: move

• 进入: enter

• 加载: load

2.事件机制

• 事件的监听(事件的绑定)

  • 通过on+事件名 这种类型绑定的事件都叫做DOM0级事件

  • DOM0级事件，同一个元素的同一个事件监听，绑定的触发运行函数，不能重复绑定，有且只能绑定一回，下一次绑定的会将上一次的给覆盖掉

  • 事件设为null，移除事件的监听

  • 监听事件，不仅是浏览器的一种机制，也是浏览器赋予DOM文档元素的属性，即事件的监听是时刻存在的，但是事件触发时候运行的处理函数，是我们自己定义的

• 事件的触发：触发事件时候运行绑定的处理函数

JS中的事件，其实是以一个类的形式存在的，每个绑定的事件其实都是这个类的一个实例 (引用数据类型的对象) ，浏览器会给我们的所有的事件触发函数中，默认传入一个实参，就是当前事件的事件对象(event)，在这个事件对象中，保存着当前事件所有信息

事件对象存在于所有的事件的触发处理函数中，事件对象中有一些常用的属性，用于控制交互中的效果。

• clientX/clientY：鼠标点击点对应屏幕左上角的位置信息

• pageX/pageY：鼠标点击的点对应body左上角的位置信息

• keyCode：键盘事件中键盘对应的键盘码

  • Backspace： keyCode:8 删除键

  • enter： keyCode：13 回车键

  • space： keyCode：32 空格键

  • arrowLeft/Up/Right/Down： keyCode：37 / 38 / 39 / 40 小键盘左 / 上 / 右 / 下

事件对象还存在一些兼容性：在标准浏览器下他的事件对象存在于当前函数的作用域中，而在ie中存在于window作用域下。

//处理事件对象的兼容性写法
event=event|| window.event;

//处理事件源的兼容性写法
event.target || event.srcElement

//处理事件冒泡的兼容性写法
event.stopPropagation() || event.cancelBubble=true;

//阻止默认行为的兼容写法
event.preventDefault() || event.returnValue=false;

3.事件委托的思想

有时候我们需要对一个DOM元素下的多个子元素绑定相同的事件，比如说为表格添加可删除一行的功能，一般的方法是循环绑定事件，但是这样的办法显然性能不高，这时候就可以只为其父元素绑定事件，通过事件委托来实现其多个子元素的相同事件效果。

事件委托的原理为：根据事件流的传播机制，我们在父级标签上监听事件，通过捕获和冒泡机制，在触发子集的事件的时候，冒泡传播给父级，来触发父级的事件处理函数

那么什么是事件得出传播机制呢？总的来说可以把事件流的传播机制分为两到三个阶段：

1. 事件捕获阶段：从DOM最外层标签HTML开始往子元素捕获事件源

2. 捕获到事件对象（可以归到第一阶段）

3. 冒泡传播：从捕获到事件源的元素开始往父级元素进行事件冒泡，DOM0级事件中，事件绑定函数的触发都发生在冒泡阶段

DOM2级事件

DOM2级事件就是DOM0级事件的优化，同一个文档对象同一个事件，可以绑定多个事件处理程序，还可以控制事件处理程序的执行阶段在捕获或者冒泡阶段执行。

1.在标准浏览器中，绑定DOM2级事件的方法为：addEventListener()

• 第一个参数为事件类型：[String] click / mouseover / blur ...

• 第二个参数为事件处理函数：[Function] listener

• 第三个参数为事件处理函数是否在冒泡阶段执行：[Boolean] ture/false

如果直接触发的是事件源的监听事件，没有事件委托的情况下，则冒泡和捕获会同时发生，此时会根据函数的书写先后顺序执行事件处理程序

事件绑定函数中的this指向当前绑定事件的DOM对象，this还等于currentTarget。
使用 removeEventListener() 来移除事件，参数必须与要移除的事件处理函数地址指针相同。

2.在低版本IE浏览器（6-8）中，绑定DOM2级事件的方法为：attachEvent()

IE中的DOM2级事件的事件处理程序,都是在冒泡阶段执行的。

• 第一个参数为事件类型：[String] onclick / onmouseover / onblur ...

• 第二个参数为事件处理程序：：[Function] listener

IE下DOM2级事件的处理函数是绑定在全局(window)下,所以其内部this指向window，IE下DOM二级事件还存在重复执行多次相同的处理函数和函数执行乱序的问题，可以用 订阅 - 发布 模式解决这些兼容性问题。
使用detachEvent()来移除事件，参数同样必须与要移除的事件地址指针相同