78 事件的绑定方式

事件绑定指的是为某个元素对象的事件绑定事件处理程序。

1、行内绑定式

事件的行内绑定式是通过HTML标签的属性设置实现的。

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

标签名可以是任意的HTML标签，如<div>标签、<button>标签等；
事件是由on和事件名称组成的一个HTML属性，如单击事件对应的属性名为onclick；
事件的处理程序指的是JavaScript代码，如匿名函数等。

<input type="text" onclick="函数名称">
	fucntion 函数名称(){this[window]}
		
<input type="text" onclick="过程代码this[当前元素]">

由于开发中提倡JavaScript代码与HTML代码相分离。因此，不建议使用行内式绑定事件。

2、动态绑定式

解决的问题：JavaScript代码与HTML代码混合编写的问题。
实现方式：在JavaScript代码中，为需要事件处理的DOM元素对象，添加事件与事件处理程序。

DOM元素对象.事件 = 事件的处理程序;

事件的处理程序一般都是匿名函数或有名的函数。

itnode.onclick = function(){
			this[itnode]
		}
itnode.onclick = 函数名称;
function 函数名称(){this[itnode]}

3、行内绑定式与动态绑定式的异同

不同点

• 实现语法不同，前者通过HTML标签的属性设置，后者在JS中处理DOM对象。
• 事件处理程序中关键字this的指向也不同。行内绑定式函数名称的写法，this指向window对象，行内绑定式直接代码的写法和动态绑定式的this都指向当前正在操作的DOM元素对象。
  
  相同点

行内绑定式和动态绑定式是最原始的事件模型（也称DOM1级事件模型）提供的事件绑定方式，在该模型中没有事件流的概念，也就是说事件不能传播。同一个DOM对象的同一个事件只能有一个事件处理程序。

4、事件监听式——dom2级方式事件设置

解决的问题：为了给同一个DOM对象的同一个事件添加多个事件处理程序，DOM2级事件模型中引入了事件流的概念，可以让DOM对象通过事件监听的方式实现事件的绑定。

实现的方式：由于不同浏览器采用的事件流实现方式不同，事件监听的实现存在兼容性问题，通常根据浏览器的内核可以划分为两大类，一类是早期版本的IE浏览器（如IE6~8），一类遵循W3C标准的浏览器（以下简称标准浏览器）。

事件监听的实现方式——早期版本的IE浏览器

IE浏览器方式（IE6/7/8）

DOM对象.attachEvent(type, callback); //设置
DOM对象.detachEvent(事件类型，事件处理); //取消

• 参数type指的是为DOM对象绑定的事件类型，它是由on与事件名称组成的，如onclick。
• 参数callback表示事件的处理程序。

事件监听的实现方式——标准浏览器

主流浏览器方式（包括IE9以上版本浏览器）

DOM对象.addEventListener(type, callback[, capture]);
DOM对象.removeEventListener(事件类型, 事件处理[, 事件流]);

• 参数type指的是DOM对象绑定的事件类型，它是由事件名称设置的，click。
• 参数callback表示事件的处理程序。
• 参数capture默认值为false，表示在冒泡阶段完成事件处理，将其设置为true时，表示在捕获阶段完成事件处理。
  （1）dom2级事件简单设置
  
  （2）同一事件设置多个事件处理程序
  （3）取消事件
  事件取消（removeEventListener/detachEvent）操作具体要求：
• 事件处理必须 是有名函数，不可以是匿名函数
• 事件取消的参数与绑定的参数完全一致（数量/内容）
  

事件流

多个彼此嵌套元素，他们拥有相同的事件，最内部元素事件被触发后，外边多个元素的同类型事件也会被触发，多个元素他们同类型事件同时执行的效果称为“事件流”。

冒泡型：事件从内部到外部依次执行。
捕捉型：事件从外部到内部依次执行。

事件流执行效果如下，为冒泡型 。

可以控制事件流


IE浏览器从开始到后期事件流始终是“冒泡型”的，直到IE9以后两种版本都开始支持。
网景的Navigator浏览器（现在火狐浏览器的许多血统来源于navigator浏览器）一开始的事件流是“捕捉型 ”。后期事件流有改进，针对捕捉型 、冒泡型都可以支持。

dom2级事件设置的特点

• 可以为同一个对象设置多个同类型事件。
• 事件取消也非常灵活。
• 对事件流也有很好的处理。