javascript_javascript スキルで要素のイベントを指定する 3 つの方法-jsチュートリアル-php.cn

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

WBOY

リリース： 2016-05-16 16:40:10

オリジナル

1144 人が閲覧しました

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>

ログイン後にコピー