Js on と addEventListener の原則と使用法の違いを分析する

# 1. まず、この 2 つの使用法を紹介します。

1. on の使用法: onclick を例に挙げます

最初のもの:

obj.onclick = function(){
//do something..
}

2 つ目:

obj.onclick= fn;
function fn (){
//do something...
}

3 番目の方法: 関数 fn にパラメーターがある場合、無名関数を使用してパラメーターを渡します:

obj.onclick = function(){fn(param)};
function fn(param){
//do something..
}

は次のようには記述できません: 間違った記述: obj.onclick= fn(param):

このように記述された関数はクリックによるトリガーを待たずにすぐに実行されるため、

2 に特に注意してください。 ## 形式:

addEventListener(event,funtionName,useCapture)

パラメータ:

event: 「クリック」などのイベントの種類

funtionName: メソッドname
• useCapture(オプション): イベントがキャプチャフェーズで実行されるかバブリングフェーズで実行されるかを指定するブール値。
• true - イベント ハンドラーはキャプチャ フェーズ中に実行されます。
• false- false- デフォルト。イベント ハンドルはバブリング フェーズで実行されます。
• 書き方:

最初のタイプ:

obj.addEventListener("click",function(){
//do something
}));

2 番目のタイプは、パラメーターなしの関数名

obj.addEventListener("click",fn,fasle));
function fn(){
//do something..
}

3 番目のタイプ: 関数にパラメーターがある場合、匿名関数を使用してパラメーターを渡す必要があります

obj.addEventListener("click",function(){fn(parm)},false);

2。 2 つの違い

1. on イベントは後続の on イベントによって上書きされます

onclick を次のように扱います例:

//obj是一个dom对象，下同//注册第一个点击事件
obj.onclick(function(){
alert("hello world");
});
//注册第二个点击事件
obj.onclick(function(){
alert("hello world too");
});

最終的には、ポップアップ ボックスの出力のみになります:

hello world too

2.addEventListener は上書きされません。

//注册第一个点击事件
obj.addEventListener("click",function(){
alert("hello world");
}));
//注册第二个点击事件
obj.addEventListener("click",function(){
alert("hello world too");
}));

これは連続的に出力されます:

hello world
hello world too

3. addEventListener に関する注意事項:

1. addEventListener は IE9 以下と互換性がないことに注意してください。IE9 以下の場合は、attachEvent()

obj.attachEvent(event,funtionName);

を使用してください。 パラメーター:

event: イベント タイプ(前に「onclick」と記述する必要があります。これは addEventListener とは異なります)

funtionName: メソッド名 (パラメーターが必要な場合は、パラメーターを渡すために匿名関数も使用する必要があります) )

4. イベント収集:

1. マウス イベント:

click (クリック)

dbclick (ダブルクリック)
• mousedown(マウスダウン)
• mouseout(マウスを削除)
• mouseover(マウスを移動)
• mouseup(マウスアップ)
mousemove(マウスの動き)
• 2. キーボードイベント:

keydown(キー押下)

keypress(キープレス)
keyup(キーアップ)
• 3.HTMLイベント:
• load(ページのロード)
• アンロード(ページをアンロード)
• change(コンテンツを変更)
• scroll(スクロール)
• focus(フォーカスを取得)
• blur(フォーカスを失う)

5. 概要:

onXXX と addEventListener は両方とも、対応するコードを実行できるように、DOM 要素にイベント リスナーを追加します。イベント発生後の操作。これらを使用して、ページとユーザーのインタラクションを実現します。

関連する学習に関する推奨事項:

JavaScript ビデオ チュートリアル

以上がJs on と addEventListener の原則と使用法の違いを分析するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。