Jun. 3rd,2022
＃
“onbeforematch”イベントハンドラ
| イベント名 | “beforematch”イベント |
| インターフェース | “Event”インターフェース |
| バブリング | Yes |
| キャンセル | Yes |
“onbeforematch”イベントハンドラは“hidden="until-found"”が指定された要素がアンカーリンクやブラウザのページ内検索機能等によってアクセスされることで表示される直前に発生する“beforematch”イベントを処理するためのイベントハンドラです。
“onbeforematch”イベントハンドラはすべてのHTMLの要素でコンテント属性とIDL属性として使用できます。また、すべての“Document”オブジェクトと“Window”オブジェクトでIDL属性として使用できます。
＃
サンプルコード
IDL属性
var count = 0;
document.getElementById("sampleElement").onbeforematch = function() {
count++;
document.getElementById("counterNumber").innerHTML = count;
};
<section>
<p><a href="#sampleElement">マンゴスチンについて</a></p>
</section>
<section id="sampleElement" hidden="until-found">
<h1>マンゴスチンについて</h1>
<p>
「マンゴスチン」はフクギ科フクギ属の常緑高木及びその果実のことである。
</p>
<p>
マンゴスチンの木は7メートルから25メートル程度の直立する幹を持つ円形または円錐形の樹冠を形成する高木である。肉厚で淡桃色の花を咲かせる。
</p>
<p>
マンゴスチンの果実は球形でやや硬い暗赤紫色の皮に包まれている。果肉部分は白色でミカンの房のような形をしている。
</p>
</section>
<p>イベントの発生回数：<output id="counterNumber">0</output>回</p>
マンゴスチンについて
「マンゴスチン」はフクギ科フクギ属の常緑高木及びその果実のことである。
マンゴスチンの木は7メートルから25メートル程度の直立する幹を持つ円形または円錐形の樹冠を形成する高木である。肉厚で淡桃色の花を咲かせる。
マンゴスチンの果実は球形でやや硬い暗赤紫色の皮に包まれている。果肉部分は白色でミカンの房のような形をしている。
イベントの発生回数：回
コンテント属性
var count = 0;
function counter(){
count++;
document.getElementById("counterNumber").innerHTML = count;
};
<section>
<p><a href="#sampleElement">マンゴスチンについて</a></p>
</section>
<section id="sampleElement" hidden="until-found" onbeforematch="counter();">
<h1>マンゴスチンについて</h1>
<p>
「マンゴスチン」はフクギ科フクギ属の常緑高木及びその果実のことである。
</p>
<p>
マンゴスチンの木は7メートルから25メートル程度の直立する幹を持つ円形または円錐形の樹冠を形成する高木である。肉厚で淡桃色の花を咲かせる。
</p>
<p>
マンゴスチンの果実は球形でやや硬い暗赤紫色の皮に包まれている。果肉部分は白色でミカンの房のような形をしている。
</p>
</section>
<p>イベントの発生回数：<output id="counterNumber">0</output>回</p>
マンゴスチンについて
「マンゴスチン」はフクギ科フクギ属の常緑高木及びその果実のことである。
マンゴスチンの木は7メートルから25メートル程度の直立する幹を持つ円形または円錐形の樹冠を形成する高木である。肉厚で淡桃色の花を咲かせる。
マンゴスチンの果実は球形でやや硬い暗赤紫色の皮に包まれている。果肉部分は白色でミカンの房のような形をしている。
イベントの発生回数：回
＃
