JS事件之IE与其他浏览器的兼容性

一、事件对象

事件对象
- 当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数
在事件对象中封装了当前事件相关的一切信息，比如鼠标的坐标 键盘那个按键被按下 鼠标滚轮滚动的方向...

onmousemove
- 该事件将会在鼠标在元素中移动时被触发

clientX可以获取鼠标指针的水平坐标
clientY可以获取鼠标指针的垂直坐标

不兼容IE8

var x = window.event.clientX;
var y = window.event.clientY

不兼容火狐

在IE8中，响应函数被触发时，浏览器不会传递事件对象
在IE8及以下，将事件对象作为window对象的属性保存的
event = event || window.event;                                                                                                                                                                                                                                                                                                                                          
pageX pageY 获取鼠标相对于当前页面的坐标
但是在IE8中不能使用

二、事件冒泡

事件的冒泡(Bubble)
- 所谓的事件冒泡指的就是事件向上传导，当后代元素上的事件被触发时，其祖先元素的相同元素也会被触发
- 在开发中，大部分情况冒泡都是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡
可以将事件对象的cancelBubble设置为true，既可以取消冒泡

三、事件的委派

我们希望之绑定一次事件，即可应用到多个元素上，即使元素是后添加的
我们可以尝试将其绑定给元素的共同祖先元素

事件的委派
- 指将事件统一绑定给元素的共同祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素
从而通过祖先元素的响应函数来处理事情

- 事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能

四、多事件的绑定

使用 对象.事件 = 函数 的形式绑定响应函数
只能同时为一个元素的一个事件绑定一个响应函数
不能绑定多个，如果绑定多个，则后边的会覆盖前边的
-----------------------------------------------------------------
addEventListener
- 通过这个方法也可以为元素绑定响应函数
- 参数
1.事件的字符串 不要on
2.回调函数，当事件触发时，该函数被调用
3.是否在捕获阶段触发事件，需要一个布尔值，一般传false

使用addEventListener可以同时为一个元素的相同事件同时绑定多个响应函数
这样当事件触发时，响应函数将会按照函数的绑定顺序执行

这个方法不支持IE8及其以下浏览器
--------------------------------------------------------------------
attachEvent()
- 在IE8中可以使用attachEvent()来绑定事件
- 参数
1.事件的字符串 要on
2.回调函数，当事件触发时，该函数被调用
这个方法也可以同时为一个事件绑定多个处理函数
不同的是它是后绑定的先执行，执行顺序和addEventListener相反

addEventListener 中的this，是绑定事件的对象
attachEvent 中的this，是window
需要统一一个方法this

参数：
obj 要绑定事件的对象
eventStr 事件的字符串(不要on)
callback 回调函数

function bind(obj,eventStr,callback) {
if (obj.addEventListener){
//大部分浏览器兼容的方式
obj.addEventListener(eventStr,callback,false);
}else {
/*
this是谁有调用方式决定
callback.call(obj)
*/

//IE8及以下
obj.attachEvent("on" + eventStr,function () {
//在匿名函数中调用回调函数
callback.call(obj);
})
}

}

五、事件的传播

事件的传播
- 关于事件的传播网景公司和微软公司有不同的理解和设计

- 微软 认为事件应该是由内向外传播，也就是事件触发时，应该先触发当前元素上的事件
然后在向当前元素的祖先元素上传播，也就是事件应该在冒泡阶段执行
- 网景 认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先
然后再向内传播给后代元素

- W3C综合了两个公司的方案，将事件的传播分为三个阶段
1.捕获阶段
- 在捕获阶段时。从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
2.目标阶段
- 事件捕获到目标元素，捕获结束开始在元素上触发事件
3.冒泡阶段
- 事件从目标元素向它的祖先元素传递，依次触发祖先元素上的事件

- 如果希望在捕获阶段就触发事件，可以将addEventListener的第三个参数设置为true
一般情况下，我们不会希望在捕获阶段触发事件，所以这个参数一般都是false

- IE8及以下的浏览器中没有捕获阶段

this是谁有调用方式决定
callback.call(obj)

六、拖拽事件

- 流程
1.当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown
2.当鼠标移动时，被拖拽元素跟随鼠标移动 onmousemove
3.当鼠标松开时，被拖拽元素固定在当前位置 onmouseup

当调用一个函数的setCapture方法后，这元素将会把下一次所有的鼠标按下的相关的事件捕获到自身上
setCapture方法只有IE支持，火狐中调用也不会报错，
但是使用chrome调用时，会报错。

当我们去拖拽一个网页中的内容时，浏览器会默认去搜索引擎中的搜索内容
此时会导致拖拽功能的异常，这个是浏览器提供的默认行为，
如果不希望发生这行为，则可以通过return false来取消默认行为

但是这招对IE8不起作用

参数：- 开启拖拽的元素

function drag(obj) {
obj.onmousedown = function (event) {
obj.setCapture && obj.setCapture();
event = event || window.event;
var ol = event.clientX - obj.offsetLeft;
var ot = event.clientY - obj.offsetTop;

document.onmousemove = function (event) {
event = event || window.event;
var left = event.clientX - ol;
var top = event.clientY - ot;
obj.style.left = left + "px";
obj.style.top = top + "px";
};

document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
box1.releaseCapture && box1.releaseCapture();
};

return false;
}
} 

七、滚轮事件

onmousewheel
- 鼠标滚轮滚动事件，会在滚轮滚动时触发
但是火狐不支持该属性

在火狐中需要使用DOMMouseScroll 来绑定事件
注意该事件需要通过addEventListener()函数来绑定

event.wheelDelta;可以获取鼠标滚轮滚动的方向,不看大小，只看正负 向上正，向下负

event.wheelDelta火狐不支持,event.detail火狐中适合 向上负，向下正

使用addEventListener()方法绑定响应函数，取消默认行为不能使用return false
需要使用event来取消默认行为
但是IE8不支持 event.preventDefault(); 会报错

当滚轮滚动时，如果浏览器有滚动条，滚动条会随着滚动
这是浏览器的默认行为，如不希望发生，则取消
return false;

八、键盘事件

键盘事件：
onkeydown
- 按键被按下
- 对于onkeydown来说，如果一直按着按钮不放手，则一直触发
- 当onkeydown被连续触发时，第一次和第二次质检的间隔货稍微长一点，其他的会非常的快
onkeyup
- 按键被松开

键盘事件一般都会绑定给可以获取到焦点的对象，或者是document

可以通过keyCode来获取按钮的编码,

除了keyCode,事件对象中还提供了几个属性
altKey
ctrlKey
shiftKey
- 这三个用来判断alt ctrl shift 是否被按下
如果按下则返回true，否则返回false