js基础操纵-事宜兼容性
写在前面
在WEB开辟过程当中，我们会常常的碰到种种事宜监听以及事宜处置惩罚的状况。
下面举个栗子申明下哈：
事宜（Event）即为用户的行动，比方：用户点击鼠标，发生onclick事宜；按下键盘，发生onkeyDown事宜；转变输入框的值，发生onchange事宜…
W3C范例划定，事宜是作为函数的参数传入的，比方：
<p id="demo">
<a>点击我将取得节点1</a>
<a>点击我将取得节点2</a>
</p>
<script type="text/javascript">
document.getElementById("demo").onclick=function(e)
{
alert(e.target);
}
</script>当在元素上点击时，弹出正告框，内容为点击我将取得节点。这里函数传入的参数e，就是事宜。浏览器会及时的依据用户点击的a标签的差别返回差别的节点内容。
这类做法在FireFox、Chrome、Safari等遵照W3C范例的浏览器下是没有题目的，惟独在IE(临时仅限于8.0以下版本)下是行不通的，IE采用了一种非范例的体式格局，并非将事宜作为函数参数传入，而是将事宜作为window对象的event属性：window.event通报进去的；而且，IE运用的是event.srcEvent来猎取目的事宜…
既然IE8以下不可，那有什么要领处理这个题目尼？
上面实在涉及到JS事宜的兼容性题目，下面我们将从事宜处置惩罚的角度来逐步的剖析这个题目。
固然，照样老话，一切的要领都来自网上，学到了才是本身的！！
然后，写在前面，带上我们可爱的小伙伴。空话不多说，下面我们最先看起吧！
基础引见
文章主假如对js的this举行简朴的申明和引见，顺带会增加一些代码，没办法，言语才能有限，申明不了的只能直接上代码了。
IE浏览器从IE9最先已支撑DOM2事宜处置惩罚递次，然则关于老版本的ie浏览器，任然运用attachEvent体式格局来为dom元素增加事宜。值得光荣的是微软已宣告2016年将不再对ie8举行保护，关于宽大前端开辟者无疑是一个福音。然而在曙光降临之前，依然须要对那些不支撑DOM2级事宜处置惩罚递次的浏览器举行兼容性处置惩罚。
嘛，下面，将逐步的处置惩罚事宜在通例状况下(额，就是W3C和IE)的处置惩罚体式格局。
通用的事宜侦听器函数完成
自创GitHub上markyun写的事宜侦听器函数完成。下面我只是做一些解释性申明
// event(事宜)东西集，泉源：https://github.com/markyun
markyun.Event = {
// 页面加载完成后
// 主假如原生JS，页面只能加载一次window.onload；这里运用该要领能够绑定多个要领。
readyEvent : function(fn) {
if (fn==null) {
fn=document;
}
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = fn;
} else {
window.onload = function() {
oldonload();
fn();
};
}
},
// 视才能离别运用dom0||dom2||IE体式格局 来绑定事宜
// 下面的递次：范例dom2，IE dom2， dom
// 参数： 操纵的元素,事宜称号 ,事宜处置惩罚递次
addEvent : function(element, type, handler) {
if (element.addEventListener) {
//事宜范例、须要实行的函数、是不是捕捉
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent('on' + type, function() {
handler.call(element);
});
} else {
element['on' + type] = handler;
}
},
// 移除事宜
removeEvent : function(element, type, handler) {
if (element.removeEnentListener) {
element.removeEnentListener(type, handler, false);
} else if (element.datachEvent) {
element.detachEvent('on' + type, handler);
} else {
element['on' + type] = null;
}
},
// 阻挠事宜 (主假如事宜冒泡，由于IE不支撑事宜捕捉)
stopPropagation : function(ev) {
if (ev.stopPropagation) {
ev.stopPropagation();// 范例w3c
} else {
ev.cancelBubble = true;// IE
}
},
// 作废事宜的默许行动
preventDefault : function(event) {
if (event.preventDefault) {
event.preventDefault();// 范例w3c
} else {
event.returnValue = false;// IE
}
},
// 猎取事宜目的
getTarget : function(event) {
// 范例W3C 和 IE
return event.target || event.srcElement;
},
// 猎取event对象的援用，取到事宜的一切信息，确保随时能运用event；
getEvent : function(e) {
var ev = e || window.event;
if (!ev) {
var c = this.getEvent.caller;
while (c) {
ev = c.arguments[0];
if (ev && Event == ev.constructor) {
break;
}
c = c.caller;
}
}
return ev;
}
}; 1.简朴的申明
IE下的事宜惯例
IE下的事宜对象是在window下的，而范例应当作为一个参数, 传为函数第一个参数;
IE的事宜对象定义的属性跟范例的差别，如：
cancelBubble 默许为false, 假如为true就是作废事宜冒泡; returnValue 默许是true，假如为false就作废默许事宜; srcElement, 这个指的是范例W3C下的猎取事宜目的target,Firefox下的也是srcElement;
其他申明
以上的一切要领，都来自网上。
一切的要领，都必须踏踏实实，在详细运用场景下去剖析、去挑选，我们应当根据详细的状况，来挑选要领。
由于浏览器的多样性，前端的运用场景常常很庞杂，机能优化充溢应战，也充溢时机。
学会了才是本身的，晓得会用会写，才是我们终究的目的。
