事件监听

事件监听

一、为何须要事件监听

问题：咱们可不能够为同一对象的同一事件绑定多个事件处理程序呢？

答：不能够，由于后面的绑定会覆盖前面的绑定。若是在实际项目开发中，想为同一对象的同一事件绑定多个事件处理程序，可使用事件监听。

二、事件监听的定义方式

因为Javascript是基于客户端浏览器的脚本语言，因此必须运行于不一样的浏览器端，因为不一样的浏览器具备不一样的标准，因此其也可能会具备兼容性问题，可是在实际项目应用中，咱们会把浏览器分为两大类：

① 基于IE内核的浏览器（IE8如下版本IE的浏览器、各类浏览器的兼容模式）

② 基于W3C内核的浏览器（火狐、谷歌、IE8以上版本的IE浏览器）

因此Javascript的事件监听在不一样内核浏览器下也有不一样的建立方式：

1）IE内核建立方式：

dom对象.attachEvent(type,callback);

参数说明：

type：事件类型，带'on'前缀，如onclick/onmouseover/onmouseout

callback：事件的处理程序，一般是一个匿名函数

2）W3C内核建立方式：

dom对象.addEventListener(type,callback,capture);

参数说明：

type：事件类型，不带'on'前缀，如click/mouseover/mouseout

callback：事件的处理程序，一般是一个匿名函数

capture（了解）：使用的浏览器模型，冒泡模型与捕获模型，还要特别注意：在IE内核浏览器中其只支持冒泡模型。

IE内核浏览器与W3C内核浏览器总结：

① 二者的绑定形式不一样

IE：attachEvent

W3C：addEventListener

② 二者的参数不一样

addEventListener具备第三个参数，表明浏览器模型

③ type的参数不一样

IE：必须添加一个'on'前缀

W3C：没有'on'前缀

④ 执行顺序不一样

IE：先绑定后触发

W3C：先绑定先触发

三、解决事件监听的兼容性问题

① 建立一个public.js文件做为Javascript核心库

② 定义一个$函数，用于获取指定id的dom对象

③ 建立一个公用函数，用于解决事件监听的兼容性问题

解决事件监听的兼容性问题核心：判断浏览器的类型，如何判断浏览器类型？

咱们在事件绑定时使用的attachEvent与addEventListener都是以属性的形式进行绑定的，因此咱们能够判断当前对象是否具备attachEvent或addEventListener属性。

④ 测试addEvent函数是否生效

四、移除事件监听

有些状况下，咱们可能须要动态移除事件监听，这个时候可使用如下方法：

1）基于IE内核的浏览器

添加：attachEvent(type,callback);

移除：detachEvent(type,callback);

参数说明：

type：要移除的事件类型(带'on'前缀)

callback：要移除的事件处理程序（必须是一个有名函数）

2）基于W3C内核的浏览器

添加：addEventListener(type,callback);

移除：removeEventListener(type,callback);

参数说明：

type：要移除的事件类型（不带'on'前缀）

callback：要移除的事件处理程序（必须是一个有名函数）

 

特别说明：记住若是一个事件想移除，其在添加事件监听时，其事件处理程序必须是一个有名函数，不然是没法移除的。

五、解决移除事件监听的兼容性问题

① 建立一个public.js公用文件做为Javascript代码库

② 在public.js文件中定义一个公用函数，用于解决移除事件监听的兼容性问题

③ 测试removeEvent方法是否可用