この記事では、javascript に関する関連知識を提供します。主に、マウス イベント、キーボード イベントなど、一般的な JavaScript イベント タイプに関する関連問題を紹介します。一緒にそれについて話しましょう。ぜひご覧ください。お役に立てれば幸いです。みんな。
[関連する推奨事項: JavaScript ビデオ チュートリアル、Web フロントエンド]
マウス イベント
#イベント タイプ
- click: ユーザーがマウスのメイン ボタン (通常は左ボタン) をクリックするか、フォーカス中に Enter キーを押します。 when
- dblclick: ユーザーがマウスのメイン ボタンをダブルクリックするとトリガーされます (頻度はシステム構成によって異なります)
- mousedown: ユーザーがいずれかのマウス ボタンを押したときにトリガーされます
- Mouseup: ユーザーがマウスを持ち上げるとトリガーされます。 いずれかのマウス ボタンが押されたときにトリガーされます。 #mousemove: マウスが要素上を移動するとトリガーされます。
- mouseover: マウスが要素に入るとトリガーされます
- mouseout: マウスが要素から離れるとトリガーされます
- mouseenter: マウスが要素に入るとトリガーされ、イベントはバブルしません
- mouseleave: マウスが要素から離れるとトリガーされ、イベントはバブルしますバブルではありません
違い:
- 子要素に関係なく、親要素から次の要素に何度も移動します。子要素は、親要素に対して、依然として退出としてカウントされます
- enter と Leave は、依然として親要素の一部である子要素を考慮してください
- mouseenter と Mouseleave はバブルしません
イベント オブジェクト
イベント ハンドラー内のすべてのマウス イベントとイベント オブジェクトは MouseEvent- altKey です。イベントがトリガーされたとき、キーボードの alt キーが押されたかどうか
- ctrlKey: イベントがトリガーされたときに、キーボードの Ctrl キーが押されたかどうか
- shiftKey: イベントがトリガーされたときキーボードの Shift キーが押されているかどうかに関係なく、トリガーされます。
- button: イベントがトリガーされるとき、マウス ボタンのタイプ
- 0: 左ボタン
- 1: 中ボタン
- 2: 右ボタン
##位置
ページ: ページX、ページY、ページからの現在のマウスの距離の水平および垂直座標- client: clientX、clientY、マウスはビューポートを基準としています 座標
- offset: offsetX、offsetY、イベント ソースのパディングを基準としたマウス
- screen: screenX, screenY、画面を基準としたマウス
- x, y、 clientX、clientY
- movement に相当: moveX、movementY、マウス移動イベントでのみ有効、最後のマウス位置を基準としたオフセット距離
- #キーボードイベント
keydown: キーボード上の任意のキーを押すとトリガーされます。押したままにすると、このイベントが繰り返しトリガーされます
- keypress:
- 文字キーを押すとトリガーされますキーボードの
- keyup: キーボードの任意のキーを持ち上げることによってトリガーされます
- keydown、ブロックされている場合はキーを押します イベントのデフォルトの動作がなければ、テキストは表示されません。
KeyboardEvent
コード: キー文字列を取得し、キーボード レイアウトに適応させます。
- key: キーボード レイアウトに合わないキー文字列を取得します。印刷された文字を取得できます。
- keyCode: キーボード コードを取得します。
focus: 要素要素がユーザーと対話できるときにトリガーされます (ユーザーと対話できるすべての要素がフォーカスされます)。イベントはバブルしません
- blur: 要素がフォーカスを失ったときにトリガーされ、イベントはバブルしません。
- submit: フォーム イベントを送信します。フォーム要素内でのみ有効です。
- change: テキスト変更イベント
- input: テキスト変更イベント、即時にトリガー
- その他のイベント
load、DOMContentLoaded、readystatechange
- windowload:ページ内のすべてのリソースが読み込まれたイベント Imageload:画像リソースが読み込まれたイベント
ブラウザでページをレンダリングするプロセス:
readystate (ページには 3 つの状態がありますページのソース コードを取得します
ドキュメント ノードを作成します
- 次から順に dom ツリーに要素を追加します。上から下へ、要素が追加されるたびに事前レンダリングが行われます。
- 構造に従って子ノードを順番にレンダリングします。
- ドキュメントの DOMContentLoaded: dom の後に発生します。ツリーが構築されます
): ロード中 (読み込み中)、インタラクティブ (対話型)、完了 (完了)
インタラクティブ: DOMContentLoaded イベントをトリガーします
js コードをページの下部に書き込む必要がありますできるだけ＃＃＃＃＃ ＃
css はページの上部に記述する必要があります : ちらつきを避けます (ページの下部に配置すると、最初に要素にスタイルがなくなるため、次を使用します)醜いデフォルトのスタイルを使用し、CSS がファイルを読み取ったときにスタイルを再変更します)
JS をページの最後に書き込む必要があります :後続のレンダリングのブロックを回避し、JS 要素の実行時にページ内のコンテンツを取得できないことを回避します。
unload、beforeunload
beforeunload: ウィンドウ イベント。ウィンドウが閉じられたときに実行され、ウィンドウが閉じるのを防ぐことができます。
unload : window イベント、ウィンドウが閉じられたときに実行されます。
- scroll
イベントはウィンドウがスクロールされたときに実行されます。
scrollTop とscrollLeft を介して、スクロール距離を変更できます。を取得して設定します。
- resize
ウィンドウ サイズが変更されるとイベントが実行され、ビューポート サイズが監視されます
- contextmenu
右クリック メニュー イベント
- 貼り付け
イベントの貼り付け
- コピー
イベントのコピー
- カット
遠方からの写真
##要素の位置
- offsetParent
- offsetLeft, offsetTop //配置された要素からの距離は、要素の座標を基準とした body
- getBoundingClientRect メソッド
イベント シミュレーション
- クリック シミュレートされたクリック
- sumbit シミュレーションフォームを送信
- dispatchEvent シミュレーション イベント
- window.scrollX、window.pageXOffset、window.scrollY、window.pageYOffset
- scrollTo 、scrollBy
を使用できます。scrollBy: ウィンドウからの x 軸と y 軸の距離を増やすことを意味します。オリジナルに基づいています。scrollBy(x, y)
- resizeTo、resizeBy
javascript ビデオ チュートリアル 、webフロントエンド＃＃＃] ＃＃＃
以上がJavaScript での一般的なイベント タイプの整理の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM去掉重复并排序的方法：1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句，去掉数组中的重复元素，返回去重后的新数组；2、利用sort()对去重数组进行排序，语法“去重数组.sort()”。
JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题，包括了Symbol类型的描述、Symbol不会隐式转字符串等问题，下面一起来看一下，希望对大家有帮助。
原来利用纯CSS也能实现文字轮播与图片轮播！Jun 10, 2022 pm 01:00 PM怎么制作文字轮播与图片轮播？大家第一想到的是不是利用js，其实利用纯CSS也能实现文字轮播与图片轮播，下面来看看实现方法，希望对大家有所帮助！
JavaScript对象的构造函数和new操作符（实例详解）May 10, 2022 pm 06:16 PM本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于对象的构造函数和new操作符，构造函数是所有对象的成员方法中，最早被调用的那个，下面一起来看一下吧，希望对大家有帮助。
JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于面向对象的相关问题，包括了属性描述符、数据描述符、存取描述符等等内容，下面一起来看一下，希望对大家有帮助。
javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM方法：1、利用“点击元素对象.unbind("click");”方法，该方法可以移除被选元素的事件处理程序；2、利用“点击元素对象.off("click");”方法，该方法可以移除通过on()方法添加的事件处理程序。
foreach是es6里的吗May 05, 2022 pm 05:59 PMforeach不是es6的方法。foreach是es3中一个遍历数组的方法，可以调用数组的每个元素，并将元素传给回调函数进行处理，语法“array.forEach(function(当前元素,索引,数组){...})”；该方法不处理空数组。
整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于BOM操作的相关问题，包括了window对象的常见事件、JavaScript执行机制等等相关内容，下面一起来看一下，希望对大家有帮助。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
ドリームウィーバー CS6
ビジュアル Web 開発ツール
MantisBT
Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。
ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境
メモ帳++7.3.1
使いやすく無料のコードエディター
DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、
ホットトピック
7444
15137152