HTML DOM UiEventオブジェクトとは？detailプロパティの使い方を解説
HTML DOM UiEventオブジェクトとは
HTML DOMのUiEventオブジェクトは、ユーザーがHTML要素を操作した際に発生するイベントを表します。クリックやキー入力といったユーザー操作に起因するイベントの基底インターフェースとして機能し、MouseEventやKeyboardEventなどもUiEventを継承しています。
UiEventオブジェクトには、以下のプロパティとメソッドが用意されています。
| プロパティ/メソッド | 説明 |
|---|---|
| detail | イベントに関する詳細情報を含む数値を返します。clickイベントの場合は、連続クリックの回数を表します。 |
| view | イベントが発生したWindowオブジェクトへの参照を返します。 |
それでは、detailプロパティを使用した具体的な例を見てみましょう。
サンプルコード
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM UiEvent detail</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
#playArea {
display: inline-block;
border-radius: 50%;
background-color: #DC3545;
width: 50px;
height: 50px;
border: 3px solid #AC3509;
}
#clickOn {
border: 3px solid #F0FF33;
margin: 15px auto;
border-radius: 50%;
background-color: #FFF933;
width: 10px;
height: 10px;
}
h2 {
display: inline-block;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML-DOM-UiEvent-detail</legend>
<h2 id="highScore">High Score: 0</h2>
<h2 id="currScore">Current Score: 0</h2><br>
<div id="playArea"><div onclick="getHighScore(event)" id="clickOn"></div></div><br>
</fieldset>
</form>
<script>
var clickOn = document.getElementById("clickOn");
var playDisplay = document.getElementById("playArea");
var highScore = document.getElementById("highScore");
var currScore = document.getElementById("currScore");
var high = 0, score = 0;
function getHighScore(event) {
var score = event.detail;
currScore.textContent = 'Current Score: '+score;
if(score > high){
highScore.textContent = 'High Score: '+score;
high = score;
}
}
</script>
</body>
</html>
実行結果
黄色いdiv要素をクリックする前の画面は以下の通りです。
黄色いdiv要素を連続してクリックすると、クリック回数がdetailプロパティに反映され、スコアとハイスコアが更新されます。
その後、前回よりも少ない回数でクリックした場合の画面です。ハイスコアはそのまま維持され、現在のスコアのみが更新されます。
コードのポイント
このサンプルでは、黄色い小さなdiv要素がクリックされるたびにgetHighScore(event)関数が呼び出されます。関数内ではevent.detailによって連続クリックの回数を取得し、現在のスコアとして表示しています。取得したスコアがハイスコアを上回った場合にのみ、ハイスコアの表示が更新される仕組みです。
-
HTML DOM Ulオブジェクトとは？<ul>要素の操作方法とサンプルコードを解説
HTML DOM の Ul オブジェクトは、HTML の <ul>（順序なしリスト）要素を表すオブジェクトです。JavaScript を使うことで、リストの動的な生成や操作が可能になります。 <ul> 要素の作成方法 新しい <ul> 要素を作成するには、document.createElement() メソッドを使用します。 var ulObject = document.createElement(UL) HTML5で非推奨となったプロパティ ulObject には以下のプロパティが存在しますが、これらは HTML5 ではサポートされていないため注
-
HTML DOM UiEventオブジェクトとは？detailプロパティの使い方を解説
HTML DOM UiEventオブジェクトとは HTML DOMのUiEventオブジェクトは、ユーザーがHTML要素を操作した際に発生するイベントを表します。クリックやキー入力といったユーザー操作に起因するイベントの基底インターフェースとして機能し、MouseEventやKeyboardEventなどもUiEventを継承しています。 UiEventオブジェクトには、以下のプロパティとメソッドが用意されています。 プロパティ/メソッド 説明 detail イベントに関する詳細情報を含む数値を返します。clickイベントの場合は、連続クリックの回数を表します。 view イ