JS--事件对象中部分浏览器不兼容方法

浏览数：69 / 时间：2015年06月09日

测试时主要用的浏览器是Firefox 28.0、IE11、IE8、Chrome 34.0

一、什么是事件对象：当触发某个事件的时候，会产生一个事件对象，这个对象包含着所有的与事件有关的信息，包括导致事件的元素、事件的类型、以及其它与特定事件相关的信息。

　　事件对象：我们一般称作为event对象，这个对象是浏览器通过函数把这个对象作为参数传递过来的，可以通过arguments来获得函数传递过来的参数。

 1     function box(){
 2         alert(arguments.length);    //0
 3     }
 4     box();
 5 
 6     var box=document.getElementById("box");        //获得HTML界面上id为box的DIV 对象
 7     box.onclick=function(){
 8         alert(arguments.length);    //1    在事件绑定函数中获得了一个隐藏的变量
 9     }
10 
11     box.onclick = function(){
12         alert(argument.length);        //1
13         alert(typeof arguments[0]);    //object
14         alert(arguments[0]);            //IE11: object PointerEvent        Firefox/Chroms: obejct MouseEvent
15     }
16

View Code

　　通过arguments可以获得事件绑定函数中浏览器传递过来的参数对象，event，但是这种方式比较麻烦，可以通过直接接受参数的方法，但是存在浏览器的兼容性问题，

1 //兼容方法　　IE11和Chrome对下面两种方法都支持，Firefox只是支持第一种，IE8支持第二中
2     window.onload = function(){
3         var input = document.getElementsByTagName("input")[0];
4         input.onclick=function(event){　　//这个参数名称可以随便取
5             var e = event || window.event;
6             alert(e);
7         }
8     }

二、鼠标事件 　　

　　鼠标事件中的onclick是被单击事才触发的事件，因此检测的信息不是很重要，但是对于onmousedown和onmouseup事件中，event对象提供了一个button属性，用来获得鼠标按下的是哪一个键值存在浏览器的兼容性问题

　　//Firefox、Chrome、IE11 : 0(左键)、1(中键滚轮)、2(右键)
　//IE8 ：1(左键)、4(中键滚轮)、2(右键)

 1 //做兼容
 2     function getButton(event){
 3         var e = event || window.event;
 4         if(event){        //非IE8及以下，都支持这个属性，并且button属性和W3C返回的是一样的
 5             return e.button;    //直接返回
 6         }else if(window.event){
 7             switch(e.button){
 8                 case 1 : return 0;
 9                 case 4 : return 1;
10                 case 2 : return 2;
11             }
12         }
13     }
14     
15     //调用
16     document.onmouseup=function(event){
17         var button = getButton(event);
18         if(button == 0){
19             alert("按下了左键");
20         }else if(button ==1 ){
21             alert("按下了中键滚轮");
22         }else{
23             alert("按下了右键");
24         }
25     }

　　获得可视区以及屏幕的坐标，默认单位是像素 px

1     document.onclick = function(event){
2         var e = event || window.event;
3         alert(e.clientX);    //可视区X坐标，点击的地方距离可视区左边边框的距离
4         alert(e.clientY);    //可视区X坐标，点击的地方距离可视区上边边框的距离
5         
6         alert(e.screenX);    //屏幕X坐标，点击的地方距离整个屏幕左边的距离
7         alert(e.screenY);    //屏幕Y坐标，点击的地方距离整个屏幕上面的距离
8     }

　　修改键 ，通过event对象来判断是否是按下了ctrl、shift、Alt键

 1 //修改键        
 2     document.onclick = function(event){
 3         var e = event || window.event;
 4         if(e.ctrlKey){
 5             alert("按下了ctrl键");
 6         }
 7         if(e.shiftKey){
 8             alert("按下了shift键");
 9         }
10         if(e.altKey){
11             alert("按下了Alt键");
12         }
13     }
14     
15     //这三个键可以同时按下，那么上面三个都会答应出来，我们可以通过一个方法来获得按下的键
16     document.onclick = function(event){
17         var keys = getKeys(event);
18         alert(keys);
19     }
20     
21     function getKeys(event){
22         var e = event || window.event;
23         var keys=[];
24         
25         if(e.ctrlKey){
26             keys.push("Ctrl");
27         }
28         if(e.shiftKey){
29             keys.push("shift");
30         }
31         if(e.altKey){
32             keys.push("alt");
33         }
34         return keys;
35     }

View Code

三、键盘事件

　　键码：在发生 onkeydown 和 onkeyup 事件的时候，event对象中的keyCode属性会包含一个代码值，与键盘上一个特定的键对应。对数字和字母字符集，keyCode返回的就是对应的ASCII值，不区分大小写

1     document.onkeyup = function(event){
2         var e = event || window.event;
3         alert(e.keyCode);
4     }

View Code

　　//PS: Firefox 和 Safari 中分号键返回的是59，而其他几款浏览器返回的则是186

　　字符编码 ：Firefox、Chrome 和 Safari 的 event 对象都支持一个 charCode 属性，这个属性只有在发生 keypress 事件时才包含值，而且这个值是按下的那个键所代表字符的 ASCII 编码。此时的 keyCode 通常等于 0 或者也可能等于所按键的编码。

　　　　 IE 和 Opera 则是在 keyCode 中保存字符的 ASCII 编码。

　　　　 keypress:按键按下并且松开时才会触发的事件，等价于onclick

　　　　需要做浏览器的兼容

1 document.onkeypress = function(event){
2         var e = event || window.event;
3         if(typeof e.charKode == "number"){      
4             alert(e.charCode);    //火狐、IE11、chrome都支持
5         }else{
6             alert(e.keyCode);        //IE8 ，Chrome、IE11
7         }
8     }

　　PS: 火狐中按F5键同样会有值返回，而shift等键按下的时候没有值输入，因为它根本就不会触发这个事件

　　可以通过方法 String.fromCharCode(); 方法将ASCII值转换成实际的字符

四、W3C 与 IE

　　在标准的DOM级事件中，event对象包含与创建它的事件有关的属性和方法，触发的事件不一样可用的属性和方法也不一样，此处罗列三个不一样的地方，

　　获得事件源 　　W3C: target IE8: srcElement IE11和Chrome两种方法都支持

 1     window.onload = function(){
 2         var input = document.getElementsByTagName("input")[0];
 3         input.onclick = function(event){
 4             getSrc(event);    //去调用另外一个函数，
 5         }
 6     }
 7     
 8     function getSrc(event){
 9         var e = event || window.event;
10         alert(e.target);    //HTMLInputElement
11         alert(e.target.tarName);    //INPUT    
12         alert(e.srcElement);        //HTMLIntElement    Firefox:null
13         alert(typeof e.srcElement);        //Firefox: undefiend
14     }

View Code

　　做浏览器的兼容

 1     function getSrc(event){
 2         var e = event || window.event;
 3         if(event){
 4             return e.target;
 5         }
 6         if(window.event){
 7             return e.srcElement;
 8         }
 9     }
10     //因为 typeof e.target 返回的是undefined，故等价于  return e.target || e.srcElement;

　　取消事件冒泡

 1     
 2 //事件冒泡
 3 window.onload=function(){
 4         document.onclick=function(event){
 5             alert("document");
 6         }
 7         //document.getElementsByTagName("html")[0].onclick=function(event){
 8         document.documentElement.onclick = function(event){
 9             alert("html");
10         }
11         document.body.onclick=function(event){
12             alert("body");
13         }
14         document.getElementById(‘box‘).onclick = function () {
15             alert(‘div‘);
16         };
17 
18         document.getElementsByTagName("input")[0].onclick=function(event){
19             alert("input");
20         }    
21     }
22     
23     //上面的代码中，如果在按钮input上面进行点击，那么上面五个点击事件都会被触发，这就是冒泡
24     
25     //IE和W3C取消冒泡的方式不一样，同样是IE8和Firefox之间的区别，IE11和Chrome两种方法都支持
26     //如果只是希望在input上面执行单击事件，那么将最后一个单击事件函数改一改
27     //W3C  
28     document.getElementsByTagName("input")[0].onclick=function(event){
29             alert("input");
30             if(event.bubbles){        //也可以不用判断。直接取消
31                 event.stopPropagation();
32             }
33         }    
34         
35     //IE8
36     document.getElementsByTagName("input")[0].onclick=function(){
37             alert("input");
38             var e = window.event;
39             e.cancelBubble = true;
40         }

View Code

　　做浏览器的兼容

2     document.getElementsByTagName("input")[0].onclick=function(event){
3             alert("input");
4             var e = event || window.event;
5             window.event ? e.cancelBubble : e.stopPropagation();
6             //(typeof e.stopPropagation == ‘function‘)?e.stopPropagation:e.cancelBubble=true;
7         }

　　阻止默认事件发生，比如页面上有一个超链接元素 <a href="http://www.baidu.com">百度</a>

1 //比如页面上有一个超链接元素 <a href="http://www.baidu.com">百度</a>
2     window.onload=function(){
3         var a = document.getElementsByTagName("a")[0];
4         a.onclick = function(){
5             alert("a");
6         }
7     }
8     //在点击了这个a标签后，先打印出字符 a 然后会自动的跳转到百度页面，而这个跳转就是默认行为

默认事件

 1 //W3C            IE11 Chrome都支持
 2     window.onload=function(){
 3         var a = document.getElementsByTagName("a")[0];
 4         a.onclick = function(event){
 5             alert("a");
 6             if(cancelable){    //如果为真，表示可以取消默认行为，也可以不进行此判断，直接取消
 7                 event.preventDefault();
 8             }
 9         }
10     }
11     
12     //IE8        IE11已经不支持了，但是Chrome还是支持
13     window.onload=function(){
14         var a = document.getElementsByTagName("a")[0];
15         a.onclick = function(){
16             var e = window.event;
17             alert("a");
18             e.returnValue = false;    //默认为true
19         }
20     }
21

取消默认行为方法

　　　　做浏览器的兼容，新版本的IE已经不支持旧版本的方法

1     //做兼容
2     window.onload=function(){
3         var a = document.getElementsByTagName("a")[0];
4         a.onclick = function(event){
5             alert("a");
6             var e = event || window.event;
7             typeof e.preventDefault == "function" ? e.preventDefault() : e.returnValue = false;
8         }
9     }