JavaScript登録イベント処理関数の説明例_JavaScriptスキル
イベントは JavaScript の中核となるコンテンツであり、その重要性についてはここでは紹介しません。イベントがトリガーされた後、それを処理するイベント処理関数が必要になります。たとえば、ボタンがクリックされたときに div の背景が緑色に設定されるように定義できます。次に、それを実現する方法を見てみましょう。この効果のコード例は次のとおりです:
<html>
<head>
<meta charset=" utf-8">
<title>javascript如何注册事件处理函数</title>
<style type="text/css">
#mydiv{
width:100px;
height:100px;
background-color:red;
}
</style>
<script type="text/javascript">
function changebg(){
var mydiv=document.getElementById("mydiv");
mydiv.style.backgroundColor="green";
}
</script>
</head>
<body>
<div id="mydiv"></div>
<button id="bt">点击查看效果</button>
</body>
</html>
上記のコードでは、ボタンをクリックすると div の背景色が緑色に設定されます。これは、コードがボタンの onclick イベントのイベント ハンドラー関数を登録しているためです。この関数は div の背景色を設定できます。緑に。オブジェクト イベントのイベント処理関数を登録する方法を例を示して簡単に紹介します:
方法 1:
イベント ハンドラー関数を HTML コードに直接登録する、つまり HTML 属性によってイベント ハンドラー関数を直接設定するこのメソッドは、HTML の属性値として使用されます。記事の。メリットとデメリットは次のとおりです。
- 1. 理解しやすく、使いやすい。
- 2. すべての主要なブラウザがこのメソッドをサポートしています。
- 3. HTML コードが混在しているため、ページが非常に複雑になり、パフォーマンスとコンテンツの分離の原則に矛盾します。
- 4. 同じオブジェクトには、同じ種類のイベント ハンドラーを 1 つだけ登録できます。
方法 2:
イベントハンドルモード、いわゆるイベントハンドルはイベント処理機能であり、指定されたオブジェクトの指定されたイベントがイベントハンドラに相当します。この方法でイベント処理関数を登録するには、まずオブジェクトへの参照を取得し、次にイベント ハンドルをオブジェクトの対応するイベント処理関数属性に割り当てる必要があります。実際、メソッド 1 も一種のイベント ハンドラー メソッドです。
コード例は次のとおりです:
<html>
<head>
<meta charset=" utf-8">
<title>javascript如何注册事件处理函数</title>
<style type="text/css">
#mydiv{
width:100px;
height:100px;
background-color:red;
}
</style>
<script type="text/javascript">
window.onload=function(){
var mydiv=document.getElementById("mydiv");
var bt=document.getElementById("bt");
bt.onclick=function(){
mydiv.style.backgroundColor="green";
}
}
</script>
</head>
<body>
<div id="mydiv"></div>
<button id="bt">点击查看效果</button>
</body>
</html>
上記のコードでは、まず document.getElementById("bt") を使用してボタン オブジェクトの参照を取得し、次にイベント ハンドル (イベント ハンドラー関数) をボタン オブジェクトの onclick イベント属性に割り当てます。 onclick イベントはボタンがクリックされるとトリガーされ、イベント ハンドラーでコードが実行されます。メリットとデメリットは次のとおりです。
- 1. シンプルでわかりやすい。
- 2 つのブラウザでサポートされています。
- 3. 同じオブジェクトには、同じ種類のイベント ハンドラーを 1 つだけ登録できます。
方法 3:
これは、より高度なイベント登録メソッド、つまりイベント リスナーです。このメソッドは、指定されたオブジェクトに指定された種類のイベントのハンドラー関数が 1 つしか登録できないという問題を解決します。ただし、以下に示す特定の互換性の問題があります:
1).IE ブラウザ:
IE ブラウザでは、attachEvent() メソッドと detachEvent() メソッドを使用して、指定したオブジェクトのイベント処理関数を登録したり、登録されたイベント処理関数を削除したりできます。
構文形式は次のとおりです:
element.attachEvent("onevent",eventListener)
この関数には 2 つのパラメータがあり、最初のパラメータはイベント タイプの名前、2 番目のパラメータは登録するイベント ハンドラ関数です。
コード例は次のとおりです:
<html>
<head>
<meta charset=" utf-8">
<title>javascript如何注册事件处理函数</title>
<style type="text/css">
#mydiv{
width:100px;
height:100px;
background-color:red;
}
</style>
<script type="text/javascript">
window.onload=function(){
var mydiv=document.getElementById("mydiv");
var bt=document.getElementById("bt");
bt.attachEvent("onclick",changebg);
function changebg(){
mydiv.style.backgroundColor="green";
}
}
</script>
</head>
<body>
<div id="mydiv"></div>
<button id="bt">点击查看效果</button>
</body>
</html>
上記のコードは、attachEvent() 関数を使用してボタンの onclick イベント ハンドラーを登録しますが、これは IE ブラウザーでのみ有効です。 detachEvent() 関数を使用して、最初に登録されたイベント処理関数を切り離します。構文形式は次のとおりです。
element.detachEvent("onevent",eventListener)
形式はattachEvent()関数と同じです。
特記事項: 最初のパラメータには on を含める必要があります。たとえば、クリック イベントは「onclick」と記述する必要があります。
2) 標準ブラウザ:
標準ブラウザ（IE9およびIE9以降のブラウザを含む）では、addEventListener()関数およびremoveEventListener()関数を使用して登録処理関数の登録および削除を行います。
構文形式は次のとおりです:
element.addEventListener('event',eventListener,useCapture);
この関数には 3 つのパラメータがあります。最初のパラメータは、登録されるイベント ハンドラ関数です。3 番目のパラメータは、このハンドラ関数がイベント配信プロセスのキャプチャ フェーズ中に呼び出されるか、バブルアップされるかを指定します。ステージが呼び出されます。デフォルトの条件では、このプロパティの値は false です。これは、イベント ハンドラーがバブリング ステージ中に呼び出されることを意味します。
特記事項: 最初のパラメータに on を含めることはできません。たとえば、クリック イベントを「onclick」と記述することはできませんが、「click」と記述する必要があります。
コード例は次のとおりです:
<html>
<head>
<meta charset=" utf-8">
<title>javascript如何注册事件处理函数</title>
<style type="text/css">
#mydiv{
width:100px;
height:100px;
background-color:red;
}
</style>
<script type="text/javascript">
window.onload=function(){
var mydiv=document.getElementById("mydiv");
var bt=document.getElementById("bt");
bt.addEventListener("click",changebg);
function changebg(){
mydiv.style.backgroundColor="green";
}
}
</script>
</head>
<body>
<div id="mydiv"></div>
<button id="bt">点击查看效果</button>
</body>
</html>
以上代码在IE9和IE9以上或者其他标准浏览器中，点击按钮可以将div的背景颜色设置为绿色。使用removeEventListener()函数可以解除原来注册的事件处理函数，语法格式如下:
element.removeEventListener('event', eventListener, useCapture);
格式和addEventListener()函数式一样的。
跨浏览器注册事件处理函数:
只要加个判断语句即可，代码如下:
var EventUtil={
//注册
addHandler: function(element, type, handler){
if (element.addEventListener){
element.addEventListener(type, handler, false);
} else if (element.attachEvent){
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
},
//移除注册
removeHandler: function(element, type, handler){
if (element.removeEventListener){
element.removeEventListener(type, handler, false);
} else if (element.detachEvent){
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
}
}
};以上就是本文的详细内容，希望对大家的学习有所帮助。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7615
15
1387
52
88
11
29
136
小紅書に複数のアカウントを登録するにはどうすればよいですか?複数のアカウントを登録するとバレてしまうのでしょうか？
Mar 25, 2024 am 09:41 AM
ソーシャルネットワーキングと電子商取引を統合したプラットフォームとして、Xiaohongshu にはますます多くのユーザーが参加しています。ユーザーの中には、Xiaohongshu とのやり取りをより良くするために複数のアカウントを登録したいと考えている人もいます。では、小紅書に複数のアカウントを登録するにはどうすればよいでしょうか? 1.小紅書に複数のアカウントを登録するにはどうすればよいですか? 1. 別の携帯電話番号を使用して登録する 現在、Xiaohongshu は主に携帯電話番号を使用してアカウントを登録します。ユーザーは複数の携帯電話番号カードを購入し、それを使用して複数の小紅書アカウントを登録しようとすることがあります。ただし、複数の携帯電話番号カードを購入するのは面倒でコストがかかるため、このアプローチにはいくつかの制限があります。 2. 電子メールを使用して登録する 携帯電話番号に加えて、電子メールを使用して小紅書アカウントを登録することもできます。ユーザーは複数のメールアドレスを用意し、それらのメールアドレスを使用してアカウントを登録できます。しかし
漫画マンガアカウントの登録方法
Feb 28, 2024 am 08:00 AM
Manwa Comic プラットフォームには、誰もが探索できる豊富な漫画リソースが用意されています。漫画公式プラットフォームに簡単にアクセスするだけで、あらゆる素晴らしい漫画作品を楽しむことができます。各友達は、自分の好みに応じて読むお気に入りの漫画を簡単に見つけることができます。では、Manwa Comic の公式アカウントを登録するにはどうすればよいでしょうか? この Web サイトの編集者が、困っているすべての人を助けることを願って、この詳細なチュートリアル ガイドをお届けします。萬和コミックス-公式入口：https://fuw11.cc/mw666 萬和コミックスアプリダウンロードアドレス：https://www.siemens-home.cn/soft/74440.html 萬和コミックス非本土エリア入口：https:/
携帯電話番号に何が登録されているか確認する方法「詳しく解説：携帯電話番号登録のAPP問い合わせ方法」
Feb 07, 2024 am 08:24 AM
あなたにもそのような経験があるかどうかはわかりませんが、あなたの携帯電話には、不可解なテキスト メッセージや、一部の Web サイトへの登録情報、その他の確認情報が頻繁に送信されます。実際、私たちの携帯電話番号は多くの見慣れない Web サイトに関連付けられている可能性があり、たとえあなたが知らなくても、今日私があなたに共有するのは、ワンクリックですべての見慣れない Web サイトのバインドを解除する方法を教えることです。ステップ 1: 番号サービス プラットフォームを開く この手法は非常に実用的です。手順は次のとおりです。WeChat を開き、検索ボックスのプラス アイコンをクリックし、[友達の追加] を選択して、検索するコード番号サービス プラットフォームを入力します。番号サービスプラットフォームというのがあるのですが、これはもちろん公的機関のもので、情報通信研究機構が立ち上げたもので、誰もがワンクリックで携帯電話番号情報のバインドを解除することができます。ステップ 2: 電話が自分用にマークされているかどうかを確認する
小紅書アカウントを登録するにはどうすればよいですか?小紅書アカウントを登録するには何が必要ですか?
Mar 22, 2024 am 10:16 AM
小紅書は、生活、エンターテイメント、ショッピング、共有を統合したソーシャル プラットフォームであり、多くの若者の日常生活に欠かせないものとなっています。では、Xiaohongshu アカウントを登録するにはどうすればよいでしょうか? 1.小紅書アカウントを登録するにはどうすればよいですか? 1. 小紅書公式ウェブサイトを開くか、小紅書アプリをダウンロードします。下の「登録」ボタンをクリックすると、さまざまな登録方法を選択できます。現在、Xiaohongshu は、携帯電話番号、電子メール アドレス、サードパーティ アカウント (WeChat、QQ、Weibo など) による登録をサポートしています。 3. 関連情報を入力します。選択した登録方法に応じて、対応する携帯電話番号、電子メール アドレス、またはサードパーティのアカウント情報を入力します。 4. パスワードを設定します。アカウントを安全に保つために強力なパスワードを設定してください。 5. 検証を完了します。プロンプトに従って、携帯電話認証または電子メール認証を完了します。 6. 個人を完璧にする
163メールの登録方法
Feb 14, 2024 am 09:20 AM
163 メールボックスを使用したいときにアカウントを持っていないことが判明するユーザーもいますが、現時点でアカウントを登録する必要がある場合はどうすればよいでしょうか?それでは、編集者が紹介する163メールの登録方法を見てみましょう。 1. まずはブラウザで163メール公式サイトを検索し、ページ内の[新規アカウント登録]をクリックします; 2. 次に[フリーメール]または[VIPメール]を選択します; 3. 最後に選択後、情報を入力しますそして[今すぐ登録]をクリックします。
小紅書アカウントを登録するにはどうすればよいですか?アカウントが異常な場合はどうやって回復しますか?
Mar 21, 2024 pm 04:57 PM
Xiaohongshu は、世界で最も人気のあるライフスタイル共有プラットフォームの 1 つとして、多くのユーザーを魅了しています。では、Xiaohongshu アカウントを登録するにはどうすればよいでしょうか?この記事では、Xiaohongshuアカウントの登録プロセスを詳しく紹介し、Xiaohongshuアカウントの異常を回復する方法の質問に答えます。 1.小紅書アカウントを登録するにはどうすればよいですか? 1. 小紅書 APP をダウンロードします。モバイル アプリ ストアで小紅書 APP を検索してダウンロードし、インストールが完了したら開きます。 2. アカウントの登録：Xiaohongshu APPを開いた後、ホームページの右下隅にある「Me」ボタンをクリックし、「登録」を選択します。 3. 登録情報を入力します。画面の指示に従って、携帯電話番号、設定パスワード、確認コード、その他の登録情報を入力します。 4. 個人情報の入力: 登録が成功したら、プロンプトに従って名前、性別、誕生日などの個人情報を入力します。 5. 設定
qooappアカウントの登録方法
Mar 19, 2024 pm 08:58 PM
qooapp は多くのゲームをダウンロードできるソフトウェアですが、アカウントを登録するにはどうすればよいですか? ユーザーがまだパスを持っていない場合は、「登録」ボタンをクリックし、登録方法を選択する必要があります。操作方法はこのアカウント登録方法の紹介だけで十分ですが、以下で詳しく紹介しますので、ぜひご覧ください。 qooapp アカウントの登録方法? 回答: クリックして登録し、登録方法を選択してください. 具体的な方法: 1. ログイン インターフェースに入った後、以下をクリックしてください. まだパスをお持ちでない場合は、今すぐお申し込みください。 2. 次に、必要なログイン方法を選択します。 3. その後すぐに使用できます。公式 Web サイトの登録: 1. Web サイト https://apps.ppaooq.com/ を開き、右上隅をクリックして登録します。 2. 登録を選択
WeChat登録からどれくらいの時間が経過したかを確認するにはどうすればよいですか? WeChatへの登録期間を確認する方法
Mar 13, 2024 am 08:52 AM
WeChatは豊富な機能と多くのユーザーを備えた人気のソーシャルソフトウェアです。 WeChat への登録期間を確認したい場合、WeChat 自体には登録時間を確認する機能が直接提供されていませんが、いくつかの間接的な方法で推測することができます。ただし、さまざまな要因が結果の精度に影響を与える可能性があるため、これらの方法は完全に正確というわけではありません。登録時間について正確な要件がある場合は、WeChat カスタマー サービスに問い合わせて相談することをお勧めします。 WeChat登録からどれくらいの時間が経過したかを確認するにはどうすればよいですか? WeChat にどれだけ登録されているかを確認する最初の方法は、QQ メールボックスをチェックすることです。 QQ を使用して WeChat にログインする場合、登録が成功すると、QQ メールボックスに WeChat からようこそメールが届きます。 QQ メールボックスで「WeChat」を検索してそのようなメールがあるかどうかを確認し、登録時間を決定します。 2 番目の方法は、次のように見ることです。
