JavaScript 高度なプログラミング 第 2 版 第 12 章 イベントの要点のまとめ (一般的に使用されるクロスブラウザ検出方法)_JavaScript スキル

var EventUtil={ //クロスブラウザ ハンドラー -- - メソッドの作成
addHandler:function(element,type,handler){
if(element.addEventListener){
element.addEventListneter(type,handler,false)
}else if(element. attachEvent) {
element.attachEvent("on" type,handler);
}else{
element["on" type]=handler;
}
}
removeHandler: function( element,type,handler){ //クロスブラウザ ハンドラ --- 削除メソッド
if(element.removeEventListener){
element.removeEventListneter(type,handler,false)
}else if ( element.detachEvent){
element.detachEvent("on" type,handler);
}else{
element["on" type]=handler;
> getEvent:function(event){ //クロスブラウザ イベント オブジェクト --- イベント オブジェクトへの参照を返します
return event?event:window.event;
getTarget:function(event); { // クロスブラウザ イベント オブジェクト --- イベントのターゲットを返します
returnevent.target||event.srcElement
}
preventDefault:function(event){ //クロスブラウザ イベント;オブジェクト --- キャンセル デフォルトのイベント
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}
stoppropagation:function (event){ //クロスブラウザ イベント オブジェクト---ブロック イベント フロー
if(event.stoppropagation){
event.stoppropagation()
}else{
event.canceBubble=false ;
}
}
getManyTarget:function(event){ //ブラウザ間で関連要素を取得します
if(event.popularTarget){
return event.popularTarget; 🎜>}else if(event.toElement){
return envent.toElement;
}else if(event.fromElement){
return events.fromElement;
}else{
return null ;
}
}
getButton:function(event){ //マウスイベントのボタン属性検出
if(document.implementation.hasFeature("MouseEvent","2.0")){
イベントを返す。ボタン;
}else{
switch(event.button){
ケース 0:
ケース 1:
ケース 3:
ケース 5:
ケース7:
return 0;
ケース 2:
ケース 6:
return 2
ケース 4:
return 1
}
}
}
getCharCode:function (event){ //クロスブラウザー文字エンコーディング---charCode 属性検出
if(typeofevent,charCode=="number"){
returnevent.charCode>}else; {
return event.keyCode;
}
}
}


イベント デリゲーション: メモリを削減し、パフォーマンスを向上させる、多すぎるイベント ハンドラーの解決策。イベントのシミュレーション: これはより複雑であり、ゆっくりと研究する必要があります。