HTML DOM HashChangeEvent
HTML DOM HashChangeEventは、URLの＃部分が変更されるたびに発生するイベントを表すために使用されるインターフェイスの一種です。
プロパティ
HashChangeEventのプロパティは次のとおりです-
| プロパティ | 説明 |
|---|---|
| newURL | ハッシュが変更された後にドキュメントのURLを返すため。 |
| oldURL | ハッシュが変更される前にドキュメントのURLを返すには |
構文
以下は、HashChangeEventの構文です。
event.eventProperty
ここで、eventPropertyは上記の2つのプロパティのいずれかです。
例
HashChangeEventの例を見てみましょう。
<!DOCTYPE html>
<html>
<body onhashchange="showChange(event)">
<h1>HashChangeEvent example</h1>
<p>Change the hash by clicking the below button</p>
<button onclick="changeHash()">CHANGE</button>
<p id="Sample"></p>
<script>
function changeHash() {
location.hash = "NEWHASH";
}
function showChange() {
document.getElementById("Sample").innerHTML = "The url has been changed from " + event.oldURL + " to " + event.newURL;
}
</script>
</body>
</html> 出力
これにより、次の出力が生成されます-
変更ボタンをクリックすると-
上記の例では
ユーザーがクリックしたときにchangeHash（）メソッドを実行するボタンCHANGEを作成しました。
<button onclick="changeHash()">CHANGE</button>
changeHash（）メソッドは、ロケーションオブジェクトのハッシュプロパティを「NEWHASH」に変更します。ロケーションオブジェクトには、URLに関する情報が含まれています-
function changeHash() {
location.hash = "NEWHASH";
} ハッシュが変更されるとすぐに、bodyタグに関連付けられたonhashchangeイベントハンドラーが起動し、haschangeイベントをオブジェクトとして関数showChange（）-
に渡します。<body onhashchange="showChange(event)">
showChange（）メソッドは、受信したhashchangeイベントを使用して、IDが「sample」-
の段落要素にoldURLプロパティとnewURLプロパティを表示します。function showChange() {
document.getElementById("Sample").innerHTML = "The url has been changed from " + event.oldURL + " to " + event.newURL;
}に変更されました -
HTML DOMTouchEventtouchsプロパティ
HTML DOM TouchEvent touchesプロパティは、タッチサーフェスでトリガーされたすべての接触点のリストに対応するTouchListオブジェクトを返します。 注：タッチが指定されたノードまたはその子ノードのいずれかでトリガーされた場合、同じノードでトリガーされていなくても、次のタッチがカウントされます。 以下は構文です- TouchListオブジェクトを返す event.touches 注：モバイルまたはタッチアクセスのあるシステムでアクセスされるオンラインHTMLエディターでタッチイベントの例を実行しました。これは、画面を2秒間タッチするなどのタッチ操作を実行できる
-
HTMLDOMイベントタイププロパティ
HTML DOMイベントタイププロパティは、クリック、キープレス、ロード、タッチエンドなどのイベントのタイプに対応する文字列を返します。 以下は構文です- トランジションが実行された秒数を返す- event.type イベントタイプの例を見てみましょう プロパティ- 例 <!DOCTYPE html> <html> <head> <title>HTML DOM Event type</title> <style> form { width:70%;