ホームページ > 記事 > ウェブフロントエンド > javascript_javascript スキルで要素のイベントを指定する 3 つの方法

javascript_javascript スキルで要素のイベントを指定する 3 つの方法

WBOYオリジナル: 2016-05-16 16:40:101064ブラウズ

JavaScript では、要素にイベントを指定できます。
の 3 つの方法があります。 1. HTML で、onclick 属性
を使用します。 2. JavaScript では、onclick 属性
を使用します。 3. javascipt で、addEvenListener() メソッドを使用します

3 つの方法の比較
(1) 2 番目と 3 番目のメソッドでは、イベントオブジェクトを関数に渡して、その対応する属性を読み取ることができますが、メソッド 1 ではそれができません。
(2) 2 番目と 3 番目のオプションが推奨されます。最初のオプションはイベントからコンテンツを分離するのに役立たないため、イベントオブジェクトの関連コンテンツは使用できません。

構文の詳細
(1) 最初の方法では、onclick は大文字と小文字を区別しませんが、2 番目の方法では小文字を使用する必要があります。 HMTL では大文字と小文字が区別されませんが、JS では大文字と小文字が区別されるためです。
(2) 2 番目と 3 番目のメソッドでは、関数名を指定するときに二重引用符がありませんが、最初のメソッドは HTML 属性として二重引用符が必要です。
(3) 最初のメソッドには括弧が必要ですが、2 番目と 3 番目のメソッドには括弧が必要ありません。

onclick="clickHandler()"
document.getElementById("jsOnClick").onclick = clickHandler2; 
document.getElementById("addEventListener").addEventListener("click", clickHandler2);

完全なコードは次のとおりです:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Even Deom</title> 

</head> 
<body> 
<button id="htmlOnClick" onclick="clickHandler()">htmlOnClick</button> 
<button id="jsOnClick">jsOnClick</button> 
<button id="addEventListener">addEventListener</button> 

<script defer> 
function clickHandler() { 
alert("onclick attribute in html"); 
} 
function clickHandler2(e) { 
alert(e.target.innerHTML); 
} 
document.getElementById("jsOnClick").onclick = clickHandler2; 
document.getElementById("addEventListener").addEventListener("click", 
clickHandler2); 
</script> 
</body> 
</html>

JavaScript では、要素にイベントを指定できます。
の 3 つの方法があります。 1. HTML で、onclick 属性

を使用します。

2. JavaScript では、onclick 属性を使用します
(1) 関数名には二重引用符が含まれていないことに注意してください。

3. javascipt で、addEvenListener() メソッドを使用します

3 つの方法の比較
(1) 2 番目と 3 番目のメソッドでは、イベントオブジェクトを関数に渡して、その対応する属性を読み取ることができますが、メソッド 1 ではそれができません。

onclick="clickHandler()"
document.getElementById("jsOnClick").onclick = clickHandler2; 
document.getElementById("addEventListener").addEventListener("click", clickHandler2);

完全なコードは次のとおりです:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Even Deom</title>

</head>
<body>
<button id="htmlOnClick" onclick="clickHandler()">htmlOnClick</button>
<button id="jsOnClick">jsOnClick</button>
<button id="addEventListener">addEventListener</button>

<script defer>
function clickHandler() {
alert("onclick attribute in html");
}
function clickHandler2(e) {
alert(e.target.innerHTML);
}
document.getElementById("jsOnClick").onclick = clickHandler2;
document.getElementById("addEventListener").addEventListener("click",
clickHandler2);
</script>
</body>
</html>

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Web ページの実行中、プロンプトオブジェクトは abigimage 属性または method_javascript のヒントをサポートしません。次の記事：Web ページの実行中、プロンプトオブジェクトは abigimage 属性または method_javascript のヒントをサポートしません。

続きを見る

javascript_javascript スキルで要素のイベントを指定する 3 つの方法

関連記事