针对不同浏览器的事件绑定以及鼠标滚轮事件

前段时间在看《JavaScript高级程序设计》第十三章-事件, 还没看完, 只是看到里面的一些内容觉得在这里做一个记录和总结会比较好. 首先先来讲解一下绑定事件一共有几种方式以及他们的特点和浏览器的兼容性

一. DOM0级事件处理程序

所谓的DOM0级事件处理程序, 就是通过JavaScript指定事件处理程序的传统方式, 就是将一个函数赋值给一个事件处理程序属性, 比方说div.onclick这样的on+事件类型的方式, 这种方式至今仍然为所有现代浏览器所支持, 原因一是简单, 二是具有跨浏览器的优势.这种绑定方式很简单, 比如:

1. var oDiv = document.getElementById("myDiv");
2. oDiv.onclick = function(){
3.     alert(1);
4. }

可以从代码看出来这种绑定方式十分的简单而且通俗易懂, 此外也没有浏览器兼容问题.

阻止事件的默认行为: return false;

二. DOM2级事件处理程序

"DOM2级事件"定义了两个方法, 用于处理指定和删除事件处理程序的操作:addEventListener()和removeEventListener(). 所有DOM节点都包含这两种方法, 并且他们都接受3个参数: 要处理的石建明、作为事件处理程序的函数和一个布尔值. 最后这个布尔值如果是true, 表示在捕获阶段调用事件处理程序; 如果是false, 表示在冒泡阶段调用事件处理程序. 比如:

1. var btn = document.getElementById( 'myBtn' );
2. btn.addEventListener("click", function(){
3.     alert(this.id);
4. }, false);

使用DOM2级方法添加事件处理程序的主要好处是可以添加多个事件处理程序, 而且这些处理程序会按照添加他们的顺序触发.

浏览器兼容性: IE9、Firefox、Safari、Chrome和Opera支持DOM2级事件处理程序. IE8以及更早的版本不支持该方法.

阻止事件的默认行为: ev.preventDefault();

三.IE事件处理程序

IE实现了与DOM中类似的两个方法:attachEvent()和detachEvent(), 这两个方法接受相同的两个参数: 事件处理程序名称与事件处理程序函数. 由于IE8及更早版本只支持事件冒泡, 所以通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段. 使用方法:

1. var btn = document.getElementById("myBtn");
2. btn.attachEvent( "onclick" , function(){
3.     alert( "Clicked" );
4. });

注意, attachevent()中的第一个参数是onclick, 而非DOM的addEventListener()方法中的click.

在IE中使用attachEvent()和使用DOM0级方法的主要区别在于事件处理程序的作用域, 在使用DOM0级方法的情况下, 事件处理程序会在所属元素的作用域内运行; 在使用attachEvent()方法的情况下, 事件处理程序会在全局作用域中运行, 因此this等于window, 来看下面的例子:

1. var btn = document.getElementById("myBtn");
2. btn.attachEvent("onclick", function(){
3. alert(this === window);         //true
4. });

在编写跨浏览器的代码时, 牢记这一区别非常重要.

此外, 与addEventListener类似, attachEvent()方法也可以用来为一个元素添加多个事件处理程序. 不过, 与DOM方法不同的是, 这些事件处理程序不是以添加他们的顺序执行, 而是以相反的顺序被触发.

浏览器兼容性: 支持IE事件处理程序的浏览器有IE8及更早版本还有Oper7及更早版本
阻止事件的默认行为: return false;

四. 跨浏览器的绑定鼠标滚轮事件处理程序

接下来我想使用上面所述的几种绑定事件的方法写一个跨浏览器的鼠标滚轮事件处理程序:首先先说明一下, 在IE8及更早版本和Chrome中鼠标滚轮事件是onmousewheel, 且滚动产生的数值是保存在event.wheelDelta中, 向上滚动是+120, 向下滚动是-120, 而在火狐下支持的鼠标滚轮事件是DOMMouseScroll, 而且需要使用addEventListener来绑定, 滚动产生的数值保存在event.detail中, 向上滚动是-3, 向下滚动是+3

1. var oDiv  = document.getElementById( "myDiv" );
2. oDiv.onmousewheel = fn;
3. if( oDiv.addEventListener ){
4.     oDiv.addeventListener( 'DOMMouseScroll' , fn, false );
5. }
6. function fn(){
7.     var b = true;        //向上的话为true, 向下的话为false
8.     if( ev.wheelDelta ){
9.         b = ev.wheelDelta > 0? true : false;
10.     }
11.     else{
12.         b = ev.detail > 0? true : false;
13.     }
14.     if( ev.preventDefault ){
15.         ev.preventDefault()       //阻止火狐下的默认行为
16.     }
17.     return false;       //阻止IE和Chrome下的默认行为
18. }