JavaScriptの学習でよく遭遇するjsイベントハンドラー
イベントのイベント ハンドラーを指定するには、主に 3 つの方法があります。 1. html イベント ハンドラー: まず第一に、このメソッドは時代遅れです。 2. DOM レベル 0 イベント ハンドラー: このメソッドはシンプルでクロスブラウザーですが、要素に追加できるイベント ハンドラー関数は 1 つだけです。 DOM2 レベルのイベント ハンドラー: DOM2 レベルのイベント ハンドラーは、要素に対して複数のイベント ハンドラーを追加できます。
1. イベントハンドラー
前に述べたように、イベントはユーザーまたはブラウザ自体によって実行される特定のアクションです。クリック、ロード、マウスオーバーなどはイベントの名前です。イベントに応答する関数をイベントハンドラ(イベントハンドラ、イベントハンドラともいう)といいます。イベント ハンドラーの名前は「on」で始まるため、クリック イベントのイベント ハンドラーは onclick、load イベントのイベント ハンドラーは onload になります。
イベントのイベント ハンドラーを指定するには、主に 3 つの方法があります。
1. HTMLイベントハンドラー
まず、このメソッドは時代遅れです。アクション (JavaScript コード) とコンテンツ (HTML コード) は密接に結合しているためです。ただし、小さなデモを作成する場合には引き続き使用できます。
このメソッドには 2 つのメソッドもあり、どちらも非常に簡単です:
1 つ目: イベント ハンドラーと含まれるアクションを HTML に直接定義します。
コードは次のとおりです:
2 番目: HTML でイベント ハンドラーを定義し、実行されたアクションは他の場所で定義されたスクリプトを呼び出します。
コードは次のとおりです:
注:
1) イベント自体には、イベント変数を通じて直接アクセスできます。たとえば、onclick="alert(event.type)" とすると、クリック イベントがポップアップされます。
2) この値は、ターゲット要素が入力されるイベントのターゲット要素と等しくなります。たとえば、onclick="alert(this.value)" は、input 要素の値を取得できます。
2. DOM レベル 0 イベント ハンドラー
このメソッドはシンプルでクロスブラウザーですが、1 つの要素に 1 つのイベント ハンドラーしか追加できません。
このメソッドは複数のイベント ハンドラーを要素に追加するため、後のイベント ハンドラーが前のイベント ハンドラーを上書きします。
イベント ハンドラーの追加:
<input type="button" value="click me!" onclick="showMessage()"/> <script> function showMessage(){ alert("clicked!"); } </script>
イベント ハンドラーの削除:
コードは次のとおりです:
myBtn.onclick=null;
3. DOM2 レベルのイベント ハンドラー
DOM2 レベルのイベント処理プログラムは複数のイベント ハンドラーを要素に追加できます。イベント ハンドラーを追加および削除するための 2 つのメソッド、addEventListener() と RemoveEventListener() が定義されています。
どちらのメソッドも、イベント名、イベント処理関数、ブール値の 3 つのパラメーターが必要です。
このブール値は true、イベントはキャプチャ フェーズで処理され、false、イベントはバブリング フェーズで処理されます。デフォルトは false です。
イベント ハンドラーの追加: 次に、ボタンに 2 つのイベント ハンドラーを追加します。1 つは「hello」をポップアップし、もう 1 つは「world」をポップアップします。
<input id="myBtn" type="button" value="click me!"/> <script> var myBtn=document.getElementById("myBtn"); myBtn.addEventListener("click",function(){ alert("hello"); },false); myBtn.addEventListener("click",function(){ alert("world"); },false); </script>
イベント ハンドラーの削除: addEventListener を通じて追加されたイベント ハンドラーは、removeEventListener を通じて削除する必要があり、パラメーターは一貫している必要があります。
注: addEventListener を通じて追加された匿名関数は削除できません。以下のコードは機能しません。
コードは次のとおりです:
myBtn.removeEventListener("click",function(){alert("world"); },false);
removeEventListenerはaddEventListenerパラメータと一致しているようです上記では説明しましたが、実際には 2 番目の匿名関数のパラメータがまったく異なります。
したがって、イベント ハンドラーを削除するには、コードは次のように記述できます:
<input id="myBtn" type="button" value="click me!"/> <script> var myBtn=document.getElementById("myBtn"); var handler=function(){ alert("hello"); } myBtn.addEventListener("click",handler,false); myBtn.removeEventListener("click",handler,false); </script>
2. IE イベント ハンドラー
1. 実際のアプリケーション シナリオ
IE8 以下のブラウザーは addEventListener をサポートしません。実際の開発ではIE8以下のブラウザに対応させたい場合。ネイティブ バインディング イベントを使用し、互換性処理を行う必要がある場合は、代わりに jquery のバインドを使用できます。
2. IE8 イベントバインディング
IE8 以下のブラウザは、DOM のメソッドと同様の 2 つのメソッド、attachEvent() と detachEvent() を実装します。
どちらのメソッドも、イベント ハンドラー名とイベント ハンドラー関数という 2 つのパラメーターが必要です。
注:
IE11 は addEventListener のみをサポートします。
IE9 と IE10 は、attachEvent と addEventListener の両方をサポートしています。
TE8以下のバージョンはattachEventのみをサポートします!
次のコードを使用して、IE ブラウザのさまざまなバージョンでテストできます。
<input id="myBtn" type="button" value="click me!"/> <script> var myBtn=document.getElementById("myBtn"); var handlerIE=function(){ alert("helloIE"); } var handlerDOM= function () { alert("helloDOM"); } myBtn.addEventListener("click",handlerDOM,false); myBtn.attachEvent("onclick",handlerIE); </script>
添加事件处理程序:现在为按钮添加两个事件处理函数,一个弹出“hello”,一个弹出“world
<script> var myBtn=document.getElementById("myBtn"); myBtn.attachEvent("onclick",function(){ alert("hello"); }); myBtn.attachEvent("onclick",function(){ alert("world"); }); </script>
note:这里运行效果值得注意一下:
IE8以下浏览器中先弹出“world”,再弹出“hello”。和DOM中事件触发顺序相反。
IE9及以上浏览器先弹出“hello”,再弹出“world”。和DOM中事件触发顺序相同了。
可见IE浏览器慢慢也走上正轨了。。。
删除事件处理程序:通过attachEvent添加的事件处理程序必须通过detachEvent方法删除,且参数一致。
和DOM事件一样,添加的匿名函数将无法删除。
所以为了能删除事件处理程序,代码可以这样写:
<input id="myBtn" type="button" value="click me!"/> <script> var myBtn=document.getElementById("myBtn"); var handler= function () { alert("hello"); } myBtn.attachEvent("onclick",handler); myBtn.detachEvent("onclick",handler); </script>
note:IE事件处理程序中还有一个地方需要注意:作用域。
使用attachEvent()方法,事件处理程序会在全局作用域中运行,因此this等于window。
而dom2或dom0级的方法作用域都是在元素内部,this值为目标元素。
下面例子会弹出true。
<input id="myBtn" type="button" value="click me!"/> <script> var myBtn=document.getElementById("myBtn"); myBtn.attachEvent("onclick",function(){ alert(this===window); }); </script>
在编写跨浏览器的代码时,需牢记这点。
IE7\8检测:
//判断IE7\8 兼容性检测 var isIE=!!window.ActiveXObject; var isIE6=isIE&&!window.XMLHttpRequest; var isIE8=isIE&&!!document.documentMode; var isIE7=isIE&&!isIE6&&!isIE8; if(isIE8 || isIE7){ li.attachEvent("onclick",function(){ _marker.openInfoWindow(_iw); }) }else{ li.addEventListener("click",function(){ _marker.openInfoWindow(_iw); }) }
以上所述是小编给大家介绍的JavaScript事件学习小结(二)js事件处理程序的相关知识,希望对大家有所帮助!
相关推荐:
以上がJavaScriptの学習でよく遭遇するjsイベントハンドラーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ホットAIツール

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

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

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

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

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

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

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

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

ホットトピック









JavaScript文字列置換法とFAQの詳細な説明 この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します:内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します 最も直接的な方法は、置換()メソッドを使用することです。 str = str.replace( "find"、 "置換"); この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace(/fi

記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。

この記事では、ブラウザでJavaScriptのパフォーマンスを最適化するための戦略について説明し、実行時間の短縮、ページの負荷速度への影響を最小限に抑えることに焦点を当てています。

フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...

この記事では、ブラウザ開発者ツールを使用した効果的なJavaScriptデバッグについて説明し、ブレークポイントの設定、コンソールの使用、パフォーマンスの分析に焦点を当てています。

この記事では、スクリプトのパフォーマンスを大幅に向上させるための10の簡単な手順の概要を説明します。 これらの手法は簡単で、すべてのスキルレベルに適用できます。 更新の維持:NPMのようなパッケージマネージャーを使用して、Viteなどのバンドラーを使用して確認してください

Sequelizeは、約束ベースのnode.js ormです。 PostgreSQL、MySQL、MariadB、SQLite、およびMSSQLで使用できます。このチュートリアルでは、Webアプリのユーザー向けに認証を実装します。また、人気のある認証ミドルであるPassportを使用します

この記事では、jQueryライブラリを使用してシンプルな画像カルーセルを作成するように導きます。 jQuery上に構築されたBXSLiderライブラリを使用し、カルーセルをセットアップするために多くの構成オプションを提供します。 今日、絵のカルーセルはウェブサイトで必須の機能になっています - 1つの写真は千の言葉よりも優れています! 画像カルーセルを使用することを決定した後、次の質問はそれを作成する方法です。まず、高品質の高解像度の写真を収集する必要があります。 次に、HTMLとJavaScriptコードを使用して画像カルーセルを作成する必要があります。ウェブ上には、さまざまな方法でカルーセルを作成するのに役立つ多くのライブラリがあります。オープンソースBXSLiderライブラリを使用します。 BXSLiderライブラリはレスポンシブデザインをサポートしているため、このライブラリで構築されたカルーセルは任意のものに適合させることができます
