3.1。イベントの発生方法*
最初のケースでは、ユーザーは[ボタン]をクリックしてクリックイベントを生成するなど、Webページで特定の操作を実行します。 2番目のケースでは、ユーザーがWebページで動作していない場合、イベントも発生する可能性があります。たとえば、ブラウザはページ全体を読み込んでおり、これによりロード完了イベントが生成されます。イベントが生成された後、ブラウザは、イベントを生成したノードが対応するイベント処理コードをバウンドしたかどうかを探します。その場合、コードはそれを処理するために呼び出されます。そうでない場合、親ノードは引き続き上方に検索され、対応するイベント処理コード(イベントバブル)はありません。
3.2。バインディングイベント処理コード**
1)イベント処理コードをHTMLタグにバインドします
例:<a id = "a1" href = "" onclick = "f1();"> click </a>
2)イベント処理コードをDOMノードにバインドします
var obj = document.getElementById( 'a1'); obj.onclick = f1;
知らせ:
a。 f1に「()」を追加しないでください。 「()」を追加すると、F1がすぐに実行されることを意味します。
b。匿名関数の行バインディングを使用できます。
つまり、obj.onclick = function(){// code。 }
c。 DOMノードへのバインディングイベント処理コードは、HTMLなしでJSコードを完全に分離できます。これは、コードメンテナンスに便利です。
d。パラメーターをバインドされた関数に渡す必要がある場合。匿名関数を解決できます。
つまり、obj.onclick = function(){f(parameter); }
3)ブラウザ独自のバインディング方法を使用します(理解)
異なるブラウザには独自のバインディング方法があり、互換性がないため、できるだけ使用しないようにしてください。
スクリプトスクリプトは<body>で記述できます
次の図に相当します
パラメーターが渡された場合はどうなりますか?匿名関数を使用します
[ケース3.1]トップHTMLタグへのバインディングイベント処理コード**
3.3。イベントオブジェクト***
1)イベントオブジェクトを取得します
IEブラウザ:イベントを直接使用して取得できます
Firefox:メソッドにパラメーターイベントを追加する必要があります
一般に、IEとFirefoxと互換性があるため、メソッドにパラメーターイベントを追加します。
2)イベントオブジェクトの役割
a。マウスクリックの座標を取得します
event.clientx event.clienty
b。イベントソース(イベントを生成したオブジェクト)を取得する
firefox:event.targetはIEブラウザーを取得します:event.srcelement gets
3.4。イベントバブル**
1)イベントバブルとは何ですか?イベントがノードで生成されると、イベントは順番に上向きにアップロードされます(親ノードに親ノードがある場合、親ノードに最初にアップロードしてから、アップロードします)。
2)バブルを禁止する方法は? event.cancelbubble = true;
2)「イベントバブル」現象は、[リンクをクリックした]ダイアログボックスを閉じ、ダイアログボックスのポップアップ「Divをクリックしました」をポップアップし続けます。
【ケース3.4イベントオブジェクト**
<html>
<! - イベントオブジェクト - >
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -
JSは、イベント駆動型を使用してユーザー操作に応答します。
たとえば、マウスまたはキーを介したブラウザウィンドウまたはWebページ要素(ボタン、テキストボックス...)で実行される操作は、イベント(イベント)と呼ばれます。
マウスまたはホットキーによってトリガーされる一連のプログラムのアクションは、イベントドライバーと呼ばれます。
ハンドラーまたは関数は、イベントハンドラー(イベントハンドラー)と呼ばれるイベントを処理するために使用されます。
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -
ブラウザ互換性処理
<スクリプト言語= "javascript"> <! - if(window.xmlhttprequest){// mozilla、safari、ie7、ie8 if(!window.activexobject){// mozilla、safari、alert( 'mozilla、safari'); } else {alert( 'ie7 .8'); }} else {alert( 'ie6'); } // - > </script>- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -つづく
イベントには複数の方法が必要です。使用して分離できます。
<入力型= "button" value = "red" onclick = "mychange(this)、sayhello()"/>
<body onkeydown = "showkey(event)" onload = "abc()" onunload = "abc2()">
JSイベント主導のメカニズムのブラウザ互換方法に関する上記の記事は、私があなたと共有するすべてのコンテンツです。参照を提供できることを願っています。wulin.comをもっとサポートできることを願っています。