onclickとaddEventListenerの違い

普段は自分でJSを書く時に、onclickまたはaddEventListenerという二つの方法で一つのイベントをバインドすることがあります.
最初にコードを書く時はonclickが一番多いです.その後、ゆっくり勉強しているうちにaddEventListenerということを認識しました.彼らはイベントを結びつけるために使うものだと知っていますが、違いは分かりません.また、onclickバインディングイベントを使うのがもっと簡単だと自分で何度も感じました.やっと次第に理解し合ってきました.彼らの間の関係と違いをまとめます.

と同じ点:すべてイベントハンドラで、バインディング応答イベントの関数をサポートします.

異なる点:

の出現の時間は異なっています.

onclickは、DOM 0レベルイベントハンドラであり、第4世代Webブラウザに登場する(IE 4、Netscape 4).現在のブラウザは相変わらず

を使用している.

addEventListenerは、DOM 2レベルイベントハンドラ

である.

は捕獲状況をサポートする.

onclickはイベントキャプチャをサポートしていません.すなわち、イベントバブルのみをサポートします.

addEventListenerはイベントトラッピングをサポートしています.すなわち、3番目のパラメータ設定はtrue

です.

は、複数の処理関数を紐付けることができるかどうか

onclickは、DOM上の属性の一つであり、この属性はデフォルトでは一つのオブジェクトしか指すことができないので、一つの処理関数

だけをサポートしています.

addEventListenerは、複数の処理関数

をバインディングすることをサポートする.

処理関数を除去する方法が違います.

btn.onclick = null

removeEventListener

最後に、onclickとaddEventListenerのコード例を見てみましょう.

var btn = document.getElementById('myBtn')
btn.onclick = function(){
    //           
}

btn.onclick = null  //       
//              

var btn = documen.getElementById('myBtn')

var handler = function(){
    //           
}

btn.addEventListener('click', handler, false)  //    false(  ),true   

//       
btn.removeEventListener('click', handler, false)  //