ホームページ >ウェブフロントエンド >フロントエンドQ&A >JavaScriptのDOMイベントとは何ですか?

JavaScriptのDOMイベントとは何ですか?

青灯夜游オリジナル: 2021-11-19 18:39:222890ブラウズ

js dom イベントには、中止、アフタープリント、ブラー、キャンプレイ、変更、クリック、コピー、カット、dblclick、ドラッグ、ドロップ、終了、エラー、フォーカス、オープン、ロード、再生などが含まれます。

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

HTML DOM イベント

HTML DOM イベントを使用すると、JavaScript で HTML ドキュメント内の要素にさまざまなイベントハンドラーを登録できます。

イベントは、イベントが発生するまで実行されない関数 (ユーザーがボタンをクリックしたときなど) と組み合わせて使用されることがよくあります。

#changeこのイベントは、フォーム要素のコンテンツ、選択されたコンテンツ、または選択された状態が変更されたときに発生します# #clickcontextmenucopycutdblclickdragdragenddragenterdragleavedragoverdragstartdropdurationchange#ended#errorこのイベントは、外部ファイルのロード中にエラーが発生した場合に発生します。 focusこのイベントは、要素がフォーカスを取得したときに発生します。 focusinこのイベントは、要素がフォーカスを取得しようとしているときに発生します。 focusoutこのイベントは、要素がフォーカスを失いかけたときに発生します。 fullscreenchangeこのイベントは、要素が全画面モードで表示されるときに発生します。 fullscreenerrorこのイベントは、要素を全画面モードで表示できない場合に発生します。 hashchangeこのイベントは、URL のアンカー部分が変更されたときに発生します。 inputこのイベントは、要素がユーザー入力を取得したときに発生します。 invalidこのイベントは、要素が無効な場合に発生します。 keydownこのイベントは、ユーザーがキーを押したときに発生します。 keypressこのイベントは、ユーザーがキーを押したときに発生します。 keyupこのイベントは、ユーザーがキーを放したときに発生します。 loadこのイベントは、オブジェクトがロードされたときに発生します。 loadeddataこのイベントは、メディアデータがロードされた後に発生します。 loadedmetadataこのイベントは、メタデータ (サイズや期間など) が読み込まれるときに発生します。 loadstartこのイベントは、ブラウザが指定されたメディアの検索を開始したときに発生します。このイベントは、このイベントソースを通じてメッセージを受信したときに発生します。このイベントは、ユーザーが要素上でマウスボタンを押すと発生します。このイベントは、ポインターが要素上を移動すると発生します。このイベントは、ポインターが要素の外に移動すると発生します。このイベントは、ポインターが要素上を移動すると発生します。このイベントは、ユーザーがマウスポインターを要素またはその子要素の外に移動すると発生します。#selectこのイベントは、ユーザーがテキスト ( および

) を選択した後に発生します。<td></td>
</tr>
<tr> # show<td></td>このイベントは、<menu> 要素がコンテキスト メニューとして表示されるときに発生します。 <td></td>
</tr>
<tr>stalled<td></td>このイベントは、ブラウザがメディア データを取得しようとしたが、データが利用できない場合に発生します。 <td></td>
</tr>
<tr>storage<td></td>このイベントは、Web ストレージ領域が更新されたときに発生します。 <td></td>
</tr>
<tr>submit<td></td>このイベントは、フォームが送信されたときに発生します。 <td></td>
</tr>
<tr>suspend<td></td>このイベントは、ブラウザが意図的にメディア データを取得しない場合に発生します。 <td></td>
</tr>
<tr>timeupdate<td></td>このイベントは、再生位置が変更されたときに発生します。 <td></td>
</tr>
<tr>toggle<td></td>このイベントは、ユーザーが <details> 要素を開いたり閉じたりしたときに発生します。 <td></td>
</tr>
<tr>touchcancel<td></td>このイベントは、タッチが中断されたときに発生します。 <td></td>
</tr>
<tr>touchend<td></td>このイベントは、タッチ スクリーンから指が離れたときに発生します。 <td></td>
</tr>
<tr>touchmove<td></td>このイベントは、指が画面上でドラッグされると発生します。 <td></td>
</tr>
<tr>touchstart<td></td>このイベントは、タッチ スクリーン上に指が置かれると発生します。 <td></td>
</tr>
<tr>transitionend<td></td>このイベントは、CSS トランジションが完了すると発生します。 <td></td>
</tr>
<tr>unload<td></td>このイベントは、ページがアンロードされた後に発生します (<body> の場合)。 <td></td>
</tr>
<tr>volumechange<td></td>このイベントは、メディアのボリュームが変更されたときに発生します。 <td></td>
</tr>
<tr>waiting<td></td> このイベントは、メディアが一時停止されたが再開が予想される場合に発生します。 <td></td>
</tr>
<tr>wheel<td></td>このイベントは、マウス ホイールが要素上で上下にスクロールすると発生します。 <td></td>
</tr>
</tbody></table>[推奨学習: <p>JavaScript 上級チュートリアル<a href="https://www.php.cn/course/list/2.html" target="_blank">]</a></p><p>以上がJavaScriptのDOMイベントとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>声明：</span><div>この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。</div></div></div><div class="nphpSytBox"><span>前の記事：<a class="dBlack" title="JavaScript は厳密に型指定された言語ですか?" href="https://m.php.cn/ja/faq/484551.html">JavaScript は厳密に型指定された言語ですか?</a></span><span>次の記事：<a class="dBlack" title="JavaScript は厳密に型指定された言語ですか?" href="https://m.php.cn/ja/faq/484581.html">JavaScript は厳密に型指定された言語ですか?</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>関連記事</h2><em><a href="https://m.php.cn/ja/article.html" class="bBlack"><i>続きを見る</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle"
     style="display:block"
     data-ad-format="fluid"
     data-ad-layout-key="-6t+ed+2i-1n-4w"
     data-ad-client="ca-pub-5902227090019525"
     data-ad-slot="8966999616"></ins><script>     (adsbygoogle = window.adsbygoogle || []).push({});
</script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/ja/faq/484462.html" title="JavaScript文字列をブール値に変換する方法" class="aBlack">JavaScript文字列をブール値に変換する方法</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/484463.html" title="JavaScriptでコピー＆ペースト機能を実装する方法" class="aBlack">JavaScriptでコピー＆ペースト機能を実装する方法</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/484537.html" title="JavaScriptで浮動小数点数を整数に変換する方法" class="aBlack">JavaScriptで浮動小数点数を整数に変換する方法</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/484542.html" title="JavaScript のメモリ リークの原因は何ですか?" class="aBlack">JavaScript のメモリ リークの原因は何ですか?</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/484543.html" title="JavaScriptの参照データ型とは何ですか" class="aBlack">JavaScriptの参照データ型とは何ですか</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-5902227090019525"
     data-ad-slot="5027754603"></ins><script>     (adsbygoogle = window.adsbygoogle || []).push({});
</script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！</p></div><div class="footermid"><a href="https://m.php.cn/ja/about/us.html">私たちについて</a><a href="https://m.php.cn/ja/about/disclaimer.html">免責事項</a><a href="https://m.php.cn/ja/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p>                © php.cn All rights reserved
            </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
    var _times = times || -1, //100次
    _interval = interval || 20, //20毫秒每次
    _self = this,
    _selector = this.selector, //选择器
    _iIntervalID; //定时器id
    if( this.length ){ //如果已经获取到了，就直接执行函数
        func && func.call(this);
    } else {
        _iIntervalID = setInterval(function() {
            if(!_times) { //是0就退出
                clearInterval(_iIntervalID);
            }
            _times <= 0 || _times--; //如果是正数就 --

_self = $(_selector); //再次选择
            if( _self.length ) { //判断是否取到
                func && func.call(_self);
                clearInterval(_iIntervalID);
            }
        }, _interval);
    }
    return this;
}
$("table.syntaxhighlighter").wait(function() {
    $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
      $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body><script>  var _paq = window._paq = window._paq || [];
  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="https://tongji.php.cn/";
    _paq.push(['setTrackerUrl', u+'matomo.php']);
    _paq.push(['setSiteId', '9']);
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
  })();
</script></html>

イベント	説明
abort	このイベントは、メディアの読み込みが中止されたときに発生します。
afterprint	このイベントは、ページの印刷が開始されるとき、または印刷ダイアログボックスが閉じられるときに発生します。
animationend	このイベントは、CSS アニメーションが完了すると発生します。
animationiteration	このイベントは、CSS アニメーションが繰り返されるときに発生します。
animationstart	CSS このイベントは、アニメーションが開始されるときに発生します。
beforeprint	このイベントは、ページが印刷される直前に発生します。
beforeunload	このイベントは、ドキュメントがアンロードされる直前に発生します。
blur	このイベントは、要素がフォーカスを失ったときに発生します。
canplay	このイベントは、ブラウザがメディアの再生を開始できるときに発生します。
canplaythrough	このイベントは、ブラウザがバッファリングを停止せずにメディアを再生できる場合に発生します。

このイベントは、ユーザーが要素をクリックしたときに発生します。
このイベントは、ユーザーが要素を右クリックしてコンテキストメニューを開くと発生します。
このイベントは、ユーザーが要素のコンテンツをコピーすると発生します。
このイベントは、ユーザーが要素のコンテンツを切り取ると発生します。
このイベントは、ユーザーが要素をダブルクリックすると発生します。
このイベントは、要素がドラッグされると発生します。
このイベントは、ユーザーが要素のドラッグを終了したときに発生します。
このイベントは、ドラッグされた要素がドロップターゲットに入ると発生します。
このイベントは、ドラッグされた要素がドロップターゲットから離れるときに発生します。
このイベントは、ドラッグされた要素がドロップターゲット上にあるときに発生します。
このイベントは、ユーザーが要素のドラッグを開始すると発生します。
このイベントは、ドラッグされた要素がドロップターゲットにドロップされると発生します。
このイベントは、メディアの継続時間が変更されたときに発生します。
このイベントは、メディアが最後に到達すると発生します。















	#message
	mousedown
	mouseenter
	mouseleave
	mousemove
	mouseout
mouseover	このイベントは、ポインターが要素またはその子要素の上を移動すると発生します。
mouseup	このイベントは、ユーザーが要素上でマウスボタンを放したときに発生します。
offline	このイベントは、ブラウザがオフラインで動作し始めると発生します。
online	このイベントは、ブラウザがオンラインで動作し始めると発生します。
open	このイベントは、イベントソースへの接続が開かれたときに発生します。
pagehide	このイベントは、ユーザーが移動するページから離れたときに発生します。
pageshow	このイベントは、ユーザーが Web ページに移動すると発生します。
paste	このイベントは、ユーザーがコンテンツを要素に貼り付けると発生します。
pause	このイベントは、ユーザーまたはプログラムによってメディアが一時停止されたときに発生します。
play	このイベントは、メディアが開始されたとき、または一時停止が解除されたときに発生します。
playing	このイベントは、バッファリング後にメディアの再生が一時停止または停止されたときに発生します。
popstate	このイベントは、ウィンドウの履歴が変更されたときに発生します。
progress	このイベントは、ブラウザーがメディアデータを取得しているときに発生します。
ratechange	このイベントは、メディアの再生速度が変更されたときに発生します。
reset	このイベントは、フォームがリセットされるときに発生します。
resize	このイベントは、ドキュメントビューのサイズが変更されるときに発生します。
scroll	このイベントは、スクロール要素のスクロールバーがスクロールされるときに発生します。
search	このイベントは、ユーザーが検索フィールドに入力すると発生します。
seeked	このイベントは、ユーザーがメディア内の新しい場所への移動/ジャンプを終了したときに発生します。
seeking	このイベントは、ユーザーがメディア内の新しい場所への移動/ジャンプを開始すると発生します。