ホームページ ウェブフロントエンド jsチュートリアル DOM 要素とイベントの詳細な説明

DOM 要素とイベントの詳細な説明

May 25, 2020 pm 05:55 PM
dom イベント

DOM 要素とイベントの詳細な説明

イベントとは何ですか?

イベントは、ユーザーのアクションまたは要素の状態を指します。指定された要素は、関連するイベントをリッスンし、イベント ハンドラーをバインドします。

イベント処理関数とは何ですか?

この要素はイベントをリッスンし、イベントが発生すると自動的に操作を実行します。

1. イベント関数の分類

1. マウス イベント

onclick //单击
ondblclick //双击
onmouseover //鼠标移入
onmouseout //鼠标移出
onmousemove //鼠标移动
ログイン後にコピー

2. ロードされたドキュメントまたは要素:

onload //元素或文档加载完毕
ログイン後にコピー

3. フォーム制御状態監視:

onfocus //文本框获取焦点
onblur //文本框失去焦点
oninput //实时监听输入
onchange //两次输入内容发生变化时触发,或元素状态改变时触发
onsubmit //form元素监听,点击提交按钮后触发,通过返回值控制数据是否可以发送给服务器
ログイン後にコピー

2. 要素ノードの取得

1. ラベル名

var elems = document.getElementsByTagName("");
/*参数 : 标签名
返回值 : 节点列表,需要从节点列表中获取具体的元素节点对象,添加相应下标。
*/
ログイン後にコピー
##から要素ノードリストを取得#2、class属性値に基づいて要素ノードリストを取得

DOM 要素とイベントの詳細な説明##3、id属性値に基づいて要素ノードリストを取得

DOM 要素とイベントの詳細な説明#4, name 属性値に基づいて要素リストを取得

DOM 要素とイベントの詳細な説明

3. イベントバインディングメソッド


1. インライン メソッド: イベント名がラベル属性として要素にバインドされます

例:

<button onclick="alert()">点击</button>
ログイン後にコピー

2. 動的バインディング: 要素ノードを取得し、イベントを動的に追加します

例:

btn.onclick = function (){
};
ログイン後にコピー

推奨チュートリアル:

js 入門チュートリアル

以上がDOM 要素とイベントの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

イベント ID 4660: オブジェクトが削除されました [修正] イベント ID 4660: オブジェクトが削除されました [修正] Jul 03, 2023 am 08:13 AM

一部の読者がイベント ID4660 に遭遇しました。何をすればよいかわからないことが多いため、このガイドで説明します。イベント ID 4660 は通常、オブジェクトが削除されたときにログに記録されるため、コンピューター上でイベント ID 4660 を修正する実際的な方法も検討します。イベントID4660とは何ですか?イベント ID 4660 は Active Directory 内のオブジェクトに関連しており、次のいずれかの要因によってトリガーされます。 オブジェクトの削除 – オブジェクトが Active Directory から削除されるたびに、イベント ID 4660 のセキュリティ イベントがログに記録されます。手動変更 – ユーザーまたは管理者がオブジェクトのアクセス許可を手動で変更すると、イベント ID 4660 が生成される場合があります。これは、権限設定の変更、アクセス レベルの変更、またはユーザーやグループの追加または削除を行うときに発生する可能性があります。

iPhone のロック画面で今後のカレンダーイベントを取得する iPhone のロック画面で今後のカレンダーイベントを取得する Dec 01, 2023 pm 02:21 PM

iOS 16 以降を実行している iPhone では、今後のカレンダー イベントをロック画面に直接表示できます。それがどのように行われるかを知るために読んでください。文字盤の複雑機構のおかげで、多くの Apple Watch ユーザーは、手首を一目見て次のカレンダーイベントを確認できることに慣れています。 iOS16 とロック画面ウィジェットの登場により、デバイスのロックを解除しなくても、同じカレンダーのイベント情報を iPhone で直接表示できるようになりました。カレンダー ロック画面ウィジェットには 2 つの種類があり、次に予定されているイベントの時間を追跡したり、イベント名とその時間を表示する大きなウィジェットを使用したりできます。ウィジェットの追加を開始するには、Face ID または Touch ID を使用して iPhone のロックを解除し、長押しします。

JavaScript では、「oninput」イベントの目的は何ですか? JavaScript では、「oninput」イベントの目的は何ですか? Aug 26, 2023 pm 03:17 PM

入力ボックスに値が追加されると、oninput イベントが発生します。次のコードを実行して、JavaScript で oninput イベントを実装する方法を理解してください。例<!DOCTYPEhtml><html> <body> <p>以下のように記述します:</p> <inputtype="text&quot

jQueryで選択要素の変更イベントバインディングを実装する方法 jQueryで選択要素の変更イベントバインディングを実装する方法 Feb 23, 2024 pm 01:12 PM

jQuery は、DOM 操作、イベント処理、アニメーション効果などを簡素化するために使用できる人気のある JavaScript ライブラリです。 Web 開発では、選択した要素のイベント バインディングを変更する必要がある状況によく遭遇します。この記事では、jQuery を使用して選択要素変更イベントをバインドする方法を紹介し、具体的なコード例を示します。まず、ラベルを使用してオプションを含むドロップダウン メニューを作成する必要があります。

vue3 で dom またはコンポーネントへの ref バインディングが失敗する理由とその解決方法は何ですか? vue3 で dom またはコンポーネントへの ref バインディングが失敗する理由とその解決方法は何ですか? May 12, 2023 pm 01:28 PM

Vue3ref バインディング DOM またはコンポーネントの失敗理由分析シナリオの説明 Vue3 では、コンポーネントまたは DOM 要素をバインドするために ref を使用することがよくありますが、関連するコンポーネントをバインドするために ref が明確に使用されていることがよくありますが、ref バインディングが失敗することがよくあります。 ref バインディングが失敗する状況の例 ref バインディングが失敗するほとんどのケースは、ref がコンポーネントにバインドされているときにコンポーネントがまだレンダリングされていないため、バインディングが失敗することです。または、コンポーネントが最初にレンダリングされず、ref がバインドされていない場合、コンポーネントのレンダリングが開始されると、ref もバインドされ始めますが、ref とコンポーネントの間のバインディングが完了していません。このとき、問題が発生します。コンポーネント関連のメソッドを使用する場合。 ref にバインドされたコンポーネントが v-if を使用するか、その親コン​​ポーネントが v-if を使用してページに

vue dom とはどういう意味ですか? vue dom とはどういう意味ですか? Dec 20, 2022 pm 08:41 PM

DOM はドキュメント オブジェクト モデルであり、HTML プログラミング用のインターフェイスであり、ページ内の要素は DOM を通じて操作されます。 DOM は HTML ドキュメントのメモリ内オブジェクト表現であり、JavaScript を使用して Web ページと対話する方法を提供します。 DOM は、ドキュメント ノードをルートとするノードの階層 (またはツリー) です。

Vue3 で DOM ノードを取得する方法は何ですか? Vue3 で DOM ノードを取得する方法は何ですか? May 11, 2023 pm 04:55 PM

1. ネイティブ js は DOM ノードを取得します。 document.querySelector (セレクター) document.getElementById (id セレクター) document.getElementsByClassName (クラス セレクター).... 2. vue2 で現在のコンポーネントのインスタンス オブジェクトを取得します。コンポーネント インスタンスには、対応する DOM 要素またはコンポーネントへの参照を保存する $refs オブジェクトが含まれています。したがって、デフォルトでは、コンポーネントの $refs は空のオブジェクトを指します。まず ref="name" をコンポーネントに追加してから、this.$refs を渡します。

jQueryでよく使われるイベントは何ですか jQueryでよく使われるイベントは何ですか Jan 03, 2023 pm 06:13 PM

jquery で一般的に使用されるイベントは次のとおりです: 1. ウィンドウ イベント; 2. マウス イベント (マウス クリック、移動イン イベント、移動アウト イベントなどを含む、ユーザーがドキュメント上でマウスを移動またはクリックしたときに生成されるイベント)。 3. キーボード イベント。ユーザーがキーボードのキーを押すか離すたびに、キー押下イベント、キー解放イベントなどのイベントが生成されます。 4. フォーム イベント(要素がフォーカスを取得したとき、focus() など)イベントがトリガーされ、フォーカスを失うと、blur() イベントがトリガーされ、フォームが送信されると submit() イベントがトリガーされます。

See all articles