ホームページ > 記事 > ウェブフロントエンド > JavaScript イベントに関する重要な手順_JavaScript のヒント
JavaScript イベントに関する重要な手順_JavaScript のヒント
- WBOYオリジナル
- 2016-05-16 18:43:30827ブラウズ
1. JavaScript 非同期コールバック
コードをコピー コードは次のとおりです:
<スクリプト言語="javascript ">
//処理関数 window.onload にロードされたコールバック関数を登録します。
window.onload =loaded
//メソッド window.alert のアドレスを show 関数に渡します。 >var show = window .alert;
show("success")
}
2, イベントobject
以下 js の実装では、textarea のテキスト ボックスに Enter を入力するときに改行が発生しません。つまり、Enter キーを無効にします
コードをコピー コードは次のとおりです。 < textarea >< /textarea>
3、このキーワード
ブラウザは、このキーワードを関数 (このキーワードを含む関数) を参照する現在の要素とみなします
コードをコピーします
コードは次のとおりです。
<スクリプト言語 = " javascript">gt;
var li = document.getElementsByTagName("li");
for (var i = 0; i
li[ i]. onclick = handeClick;
}
function handeClick()
{
this.style.backgroundColor = "red";
}
4. イベントのバブリングをキャンセルする
通常、子要素のスタイルを変更するか、イベントをトリガーすると、バブリングの原則に従って、その親要素がこのようなことが起こらないようにするには、イベントのバブリングをキャンセルする必要があります。
次の例は、マウスがホバーしている現在の要素に赤い境界線を追加することを示しています。イベントのバブリングを防止しないと、要素の上にマウスを移動するたびに、その要素とその親要素に赤い境界線が表示されますが、これは望ましくないことです。
コードをコピー
コードは次のとおりです。
5. ブラウザのデフォルト動作をリロードします。
ブラウザにはすべてこのデフォルト動作があります。つまり、 タグをクリックすると、href 属性のアドレスにリンクされることがあります。これは発生したくないが、警告ボックスをポップアップするなどの独自の効果を実装したいと考えています。例は次のとおりです。
コードをコピー コードは次のとおりです:
ブラウザのデフォルト動作を再読み込み
🎜>
7 、バインド イベント リスナー
コードをコピー
コードは次のとおりです:
//addEventt() イベントを追加します
//Scott Andrew のオリジナルの addEvent() 関数
//elm 要素、document.getElementId('btn1')
//evType イベント名を入力してください「onclick」は「click」に、「onblur」は「blur」に変更する必要があることに注意してください。これは、イベント名に「on」が含まれないことを意味します。Click
///fn はもちろんです。 showalert
function addEvent(elm, evType, fn, useCapture)
{
if (elm.addEventListener) {//firefox、navigation などを使用することをお勧めします。elm.addEventListener(evType, fn, useCapture); } else if (elm.attachEvent) {//IE var r = elm.attachEvent('on' evType,fn );
} else
{
elm['on' evType] = fn;
}
}
//removeEvent() ログアウト イベント
//パラメータ名は addEvent() と同じです function
function RemoveEvent(elm, evTye, useCapture)
{
if (elm.detachEvent)
{
elm.detachEvent('on' evType );
}
else if (elm.removeEventListener)
{
elm.removeEventListener(evType , userCapture);
{
elm['on' evType] = fn;
}
}
//removeEvent() ログアウト イベント
//パラメータ名は addEvent() と同じです function
function RemoveEvent(elm, evTye, useCapture)
{
if (elm.detachEvent)
{
elm.detachEvent('on' evType );
}
else if (elm.removeEventListener)
{
elm.removeEventListener(evType , userCapture);