JavaScript事件

一、事件处理

1、基本概念

        (1) 事件：JavaScript可以侦测到的行为(用户在页面上进行的某种操作)

页面加载(浏览器打开页面)、单击鼠标、鼠标进入某个区域、焦点事件、键盘

        (2) 事件处理程序：用户进行了某种操作后，所运行的JavaScript程序段

        (3) 事件驱动式：当事件发生后才去执行相应的程序

        (4) 事件流：事件发生时，会在发生事件的元素节点与DOM树根节点之间按照特定的顺序进行传播，这个事件传播的过程就是事件流

        (5) 在web中对事件流的解决方案

        事件捕获：网景公司(Netscape)。事件流传播的顺序应该是从DOM树的根节点到发生事件的元素节点。

        事件冒泡：微软公司(Microsoft)。事件流传播的顺序应该是从发生事件的元素节点到DOM树的根节点。

        冒泡的前提：父级也定义了相应的事件，当子元素与父元素有相同的事件时，当子元素被触发时父元素也会被触发----冒泡机制

        W3C的事件流处理：事件发生阶段采用捕获方式(此时不处理)，在事件处理阶段采用冒泡

        (6) 事件捕获的实现：

        addEventListener(事件名，事件处理程序，事件处理方式)

        参数1：事件名(click、change、mousedown)

        参数2：事件处理程序()

        参数3：事件处理方式(true--表示采用事件捕获方式，false---采用事件冒泡方式) 默认为false

2、事件的绑定方式

        (1) 行内绑定方式

<标签名 事件名="事件处理程序"></标签名>

事件处理程序中的this代表的是window对象

        (2) 动态绑定式

DOM对象名.事件名 = 事件处理程序

        (3) 事件监听式：可以给DOM对象的同一个事件绑定多个事件处理程序

DOM对象.attachEvent(type,callback); //早期浏览器

DOM对象.addEventListener(type,callback,[capture]) //标准浏览器

注意：行内绑定式和动态绑定式的区别

不同点：

        (1) 行内绑定式中事件名作为标签的属性，动态绑定式中事件名作为DOM对象的属性

        (2) 行内绑定式的事件处理程序中的this代表的是window对象，动态绑定式的事件处理程序中的this代表的是触发事件的DOM对象

相同点：一个DOM对象的同一个事件只能有一个处理程序

3、删除事件绑定：

DOM对象.removeEventListener(type，callback)