javaScriptブラウザを跨ぐイベントハンドラ
3215 ワード
最近は
javascript を読んでいますが、事件というのはまだまだ勉強したいことがたくさんあります.イベントハンドリング、イベントオブジェクト、イベントの伝播防止などの方法やオブジェクトにはブラウザの互換性の問題があります.開発過程では共通のイベントハンドリングツールとして作成したほうがいいです. (function(){
var EU = {};
//...
//
//...
window.EventUtil = EU;
})();
IE8 ：
IE8
IE attachEvent detachEventバインディングイベント
EU.addHandler = function(element,type,handler){
//DOM2 ，IE9
if(element.addEventListener){
element.addEventListener(type,handler,false);
}
else if(element.attachEvent){
//type 'on'
//IE9
element.attachEvent('on' + type,handler);
}
//DOM0 ，
else{
element['on' + type] = handler;
}
};
， ：
handlerは、バインディングイベント に したものと じでなければならない( じ を す).
EU.removeHandler = function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler);
}
else if(element.attachEvent){
element.detachEvent('on' + type,handler);
}
else{
//
element['on' + type] = null;
}
};
：
IE eventはグローバルオブジェクトであり、window.eventによって される.
EU.getEvent = function(event){
return event || window.event;
}
:
IE attachEventバインディングイベント、 thisはイベントをトリガするDOMではなく、windowである.ターゲットオブジェクトによってDOMノードを し、IE ではsrcElement であり、 のブラウザのtarget に する.
EU.addTarget = function(event){
return event.target || event.srcElement;
}
EU.preventDefault = function(event){
if(event.preventDefault){
event.preventDefault();
}
//IE
else{
event.returnValue = false; // true
}
}
EU.stopPropagation = function(event){
if(event.stopPropagation){
event.stopPropagation();
}
//IE
else{
event.cancelBubble = true;// false， returnValue
}
}
：
DOM のイベント
えば、DOM に して、 イベントと が、 でstopPropagationを すれば、 の を することができない.
Demo :http://runjs.cn/detail/hyrdjfyj
サブ と が に された「click」イベントの 、サブ のイベント にstopPropagationを してイベントの を すると、 バインディングのclickイベントは されない.Demo :http://runjs.cn/detail/sf0t1bso