JavaScript での DOM イベント バインディングのコンテンツ分析

この記事の内容は JavaScript での DOM イベント バインディングのコンテンツ分析に関するものです。必要な方は参考にしていただければ幸いです。

DOM レベル 2 イベント

element.addEventListener(type,handler,boolean)
最初の値は、追加なしのイベント タイプを表します。
2つ目は実行方法です。 (イベント ハンドラー関数)
3 番目の値はブール値で、デフォルトは false で、バブリング段階でのみ実行されます。 true はキャプチャフェーズで実行されます

element.removeEventListener(type, handler, boolean)
最初の値は追加なしのイベントタイプを表します。
2つ目は実行方法です。 (イベント ハンドラー関数)
3 番目の値はブール値で、デフォルトは false で、バブリング段階でのみ実行されます。 true の場合、キャプチャフェーズ中に
removal イベントを実行します。使用法は addEventListener と一致します。

element.attachEvent(type,handler) IE イベント バインディング。
element.detachEvent(type, handler) IE イベントの削除。
最初の値はイベントのタイプに on を加えたものを表します。
2つ目は実行方法です。 (イベント処理関数)、
IEのイベントモデルはバブリングモデルしかないので、渡す必要がある値は2つだけです。

クロスブラウザイベントバインディングを追加

var  addEvent = function(ele,type,handler){
    if(ele.addEventListener){
        ele.addEventListener(type,handler,false)
    }else if(ele.attachEvent){
        ele.attachEvent("on"+type,handler)
    }else{
        ele["on"+type]=handler
    }
}
addEvent(btn,"click",function(){console.log("点击")})

クロスブラウザバインディングを削除

function removeEvent(ele,type,handler){
    if(ele.removeEventListener){
        ele.removeEventListener(type,handler,false)
    }
    else if(ele.detachEvent){
        ele.detachEvent('on'+type,handler)
    }
    else{
        ele['on'+type]=null
    }
}
removeEvent(btn,"click",function(){console.log("点击")})

DOM 0レベルイベント
HTMLのon-属性

<button id="btn" onclick="console.log(1)">确定</button>
<button id="btn" onclick="fn()">确定</button>

引用符内の文字は実行可能な文字列です
HTMLのon-メソッドはjsとHTMLを密結合にするため、後のメンテナンスに不向きなのでお勧めしません。

DOMレベル0イベント

var btn=document.getElementById("btn")
btn.onclick=function(){
    console.log(1);
}
btn.onclick=function(){
    console.log(2);
}//2

同じイベントを追加すると、後のイベントが前のイベントを上書きします

関連推奨事項:

jsでのDOMイベントバインディングの詳細な説明

DOMイベントの詳細な説明JQuery _jquery でのバインディングの使用法

以上がJavaScript での DOM イベント バインディングのコンテンツ分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。