JavaScriptとHTML間のインタラクティブイベントについて_基礎知識

JavaScript と HTML 間の対話はイベントを通じて実現されます。 JavaScript は、非同期のイベント駆動型プログラミング モデルを使用します。ドキュメント、ブラウザー、要素、またはそれに関連するオブジェクトで何か特定のことが発生すると、ブラウザーはイベントを生成します。 JavaScript が特定のタイプのイベントを考慮する場合、そのタイプのイベントが発生したときに呼び出されるハンドラーを登録できます。

イベントの流れ

イベント フローは、ページからイベントを受け取る順序を記述します。たとえば、ネストされた div が 2 つあり、内側の div がクリックされた場合、内側の div が最初にクリック イベントをトリガーしますか? それとも外側の div がトリガーされますか?現在、主要なモデルは 3 つあります

IE のイベント バブリング: イベントは最初に最も具体的な要素によって受信され、その後、より具体的な要素に上方に伝播します

Netscape のイベント キャプチャ: イベント バブリングとは対照的に、特定性の低いノードはイベントを早く受け取り、最も特定的な要素は最後にイベントを受け取ります。

DOM イベント フロー: DOM レベル 2 イベントでは、イベント フローに、ターゲット ステージにあるイベント キャプチャ ステージと、イベント バブリング ステージの 3 つのステージが含まれると規定されています。最初に行われるのは、イベント キャプチャです。イベントを傍受する機会があり、その後実際のターゲットがイベントを受け取り、最後にバブル文の段階になります。

Opera、Firefox、Chrome、Safari はすべて DOM イベント ストリーミングをサポートします。IE はイベント ストリーミングをサポートせず、イベント バブリングのみをサポートします。

以下のHTMLがある場合は、div領域をクリックしてください

コードをコピー コードは次のとおりです:

< ;title> テスト ページ


/html>

イベントハンドラ

イベントは、ユーザーまたはブラウザ自体によって実行される特定のアクションです。たとえば、click、load、moseover などはすべてイベント タイプ (一般にイベント名と呼ばれます) であり、イベントに応答するメソッドはイベント ハンドラー、イベント リスナー、またはイベント ハンドラーと呼ばれます。イベント ハンドラー名は次のとおりです。イベントタイプ。

これを理解した上で、要素にイベント ハンドラーを追加する方法を見てみましょう

HTML イベント ハンドラー要素でサポートされる各イベントは、対応するイベント ハンドラーと同じ名前の HTML 属性を使用して指定できます。この属性の値は、実行可能な JavaScript コードである必要があります。ボタン

のクリック イベント ハンドラーを追加できます。

コードをコピー コードは次のとおりです:

HTML イベント ハンドラーには、実行する特定のアクションを含めることも、Web 上の他の場所で定義されたスクリプトを呼び出すこともできます。ページ 、今の例は次のように書くことができます

コードをコピー コードは次のとおりです:

上記のコードは、バブリング中にトリガーされるクリック イベントのハンドラーをボタンに追加します。同じ方法で、このプログラムも要素のスコープ内で実行されますが、クリック イベント

Copy code

コードは次のとおりです:


このように、ユーザーがボタンをクリックした後、2 つのイベント ハンドラーが追加された順序で実行されます。

addEventListener を通じて追加されたイベント ハンドラーは、removeEventListener を通じてのみ削除できます。これは、追加したばかりの匿名関数は同じメソッド本体を持っているため、削除できないことを意味します。ハンドルが違うので、イベントハンドラを削除する場合は次のように記述できます

コードをコピー

コードは次のとおりです:


以下はよくある IE の互換性の問題です。 。 。

IE は、addEventListener メソッドとremoveEventListener メソッドをサポートしていません。代わりに、2 つの類似したメソッド、attachEvent と detachEvent を実装します。IE はイベント バブリングを参照しているため、どちらのメソッドも同じ 2 つのパラメータを受け取ります。追加されたプログラムはバブリングステージに追加されます。

attachEvent を使用してイベント ハンドラーを追加するには、次のようにします

コードをコピー コードは次のとおりです:

結果は未定義ですが、これは後で紹介します。

attachEvent を使用して追加されたイベント ハンドラーは、detachEvent を使用して削除できます。また、条件は匿名関数でも削除できません。

コードをコピー コードは次のとおりです:

クロスブラウザー イベント ハンドラー

前の内容から、ブラウザーごとにイベント ハンドラーの追加と削除の方法が異なることがわかりました。クロスブラウザーのイベント ハンドラーを作成したい場合は、まず、さまざまなブラウザーでの処理の違いを理解する必要があります。ハンドラー

イベント ハンドラーを追加する場合、addEventListener とattachEvent にはいくつかの主な違いがあります。
1. パラメーターの数が異なります。addEventListener には 3 つのパラメーターがあり、attachEvent には 2 つのパラメーターしかありません。 addEventListener の 3 番目のパラメーターは、追加されたイベント ハンドラーがキャプチャ フェーズで処理されるかバブリング フェーズで処理されるかを決定できます (通常、ブラウザーの互換性のためにバブリング フェーズに設定されます)

2. addEventListener の最初のパラメータはイベントの種類 (click、load など) ですが、attachEvent の最初のパラメータはイベント処理関数名 (onclick、onload) を指定します。

3. イベント ハンドラーのスコープが異なります。addEventListener のスコープは要素そのものであり、これはトリガー要素を参照し、attachEvent イベント ハンドラーはグローバル変数で実行されます。要素 ID

ではなく、未定義を返します

4. イベントに複数のイベント ハンドラを追加する場合、addEventListener は追加された順に追加されますが、attachEvent は不規則な順序で複数のイベント ハンドラを追加します (追加されるメソッドが少ない場合は、ほとんどのメソッドが追加されます)。加算順序は逆順で実行されますが、追加しすぎると不規則になります）ので、複数追加する場合は順序に頼らない方が良いです。関数の実行順序に依存する場合は、ブラウザーに依存せずに自分で処理するのが最善です。

これら 4 つの違いを理解した後、ブラウザーとの互換性が向上したイベント ハンドラーを追加するメソッドの作成を試みることができます

コードをコピー コードは次のとおりです:

function addEvent(node, type, handler) {
if (!node) return false;
if (node.addEventListener) {
node.addEventListener(type, handler, false) ;
; trueを返す;
> > return false; 解決策、IE の場合は、そのタイプに追加します。現時点では 4 番目の問題に対する解決策はありません。ユーザーは注意する必要があります。通常の状況では、この方法を試すのは良いことだとは思いませんが、ハンドラーのスコープが異なるため、ハンドラーにこのような操作があると、実際、IE ではほとんどの関数でこの操作が行われます。





コードをコピー

コードは次のとおりです。

function addEvent(node, type, handler) { if (!node) return false; if (node.addEventListener) { node.addEventListener(type, handler, false); return true; } else if (node .attachEvent) {

。 🎜> }

この方法でこの問題は解決できますが、これは匿名イベント ハンドラーを追加するのと同じことです。イベント ハンドラーを detachEvent でキャンセルすることはできません。解決策としては、jQuery の創設者である John Resig のアプローチから学ぶことができます。





コードをコピー


コードは次のとおりです:

function addEvent(node, type, handler) {
if (!node) return false;
if (node.addEventListener) {
node.addEventListener(type, handler, false) ;
Node[タイプハンドラー] = function() {
node['e' type handler](window.event);
trueを返す;
}
falseを返す;
}


イベントハンドラをキャンセルする場合

コードをコピーします

コードは次のとおりです。function RemoveEvent(node, type, handler) { if (!node) return false; if (node.removeEventListener) { node.removeEventListener(type, handler, false);

return true;

}
else if (node .detachEvent) {
node.detachEvent('on' type, node[type handler]); 🎜> }


John Resig はクロージャーを非常に巧みに使用しており、非常に優れています。


イベントオブジェクト


DOM 上のイベントがトリガーされると、イベント オブジェクト イベントが生成されます。このオブジェクトには、イベントを生成した要素、イベント タイプ、その他の関連情報など、イベントに関連するすべての情報が含まれます。すべてのブラウザはイベント オブジェクトをサポートしますが、その方法は異なります。

DOM 内のイベント オブジェクト DOM 互換ブラウザはイベント オブジェクトを生成し、それをイベント ハンドラーに渡します。先ほど作成した addEvent メソッドを適用します

コードをコピー

コードは次のとおりです。

var btnClick = document.getElementById('btnClick ');

addEvent(btnClick, 'クリック', ハンドラー);
点击button的时候我们可以看到弹出内容是click的弹窗

event对象包含与创建它的特定事件有关的属性和方法，触发事件的类型不同，可用的属性和方法也不同，但是所有事件都会包含

属性/方法	类型	读/写	说明
bubbles	Boolean	只读	事件是否冒泡
cancelable	Boolean	只读	是否可以取消事件的默认行为
currentTarget	Element	只读	事件处理程序当前处理元素
detail	Integer	只读	与事件相关细节信息
eventPhase	Integer	只读	事件处理程序阶段：1 捕获阶段，2 处于目标阶段，3 冒泡阶段
preventDefault()	Function	只读	取消事件默认行为
stopPropagation()	Function	只读	取消事件进一步捕获或冒泡
target	Element	只读	事件的目标元素
type	String	只读	被触发的事件类型
view	AbstractView	只读	与事件关联的抽象视图，等同于发生事件的window对象

在事件处理程序内部，this始终等同于currentTarget，而target是事件的实际目标。

要阻止事件的默认行为，可以使用preventDefault（）方法，前提是cancelable值为true，比如我们可以阻止链接导航这一默认行为

复制代码 代码如下:

document.getElementsByTagName('a').onclick = function (e) {
            e.preventDefault();
        }

stopPaopagation()方法可以停止事件在DOM层次的传播，即取消进一步的事件捕获或冒泡。我们可以在button的事件处理程序中调用stopPropagation（）从而避免注册在body上的事件发生

复制代码 代码如下:

var handler = function (e) {
            alert(e.type);
            e.stopPropagation();
        }
        addEvent(document.body, 'click', function () { alert('Clicked body')});
        var btnClick = document.getElementById('btnClick');
        addEvent(btnClick, 'click', handler);

若是注释掉e.stopPropagation(); 在点击button的时候，由于事件冒泡，body的click事件也会触发，但是调用这句后，事件会停止传播。

IE中的事件对象访问IE中的event对象有几种不同的方式，取决于指定事件处理程序的方法。直接为DOM元素添加事件处理程序时，event对象作为window对象的一个属性存在

复制代码 代码如下:

var handler = function () {
            var e = window.event;
            alert(e.type);
        }
        var btnClick = document.getElementById('btnClick');
        btnClick.onclick = handler;

我们通过window.event取得了event对象，并检测到了其类型，可是如果事件处理程序是通过attachEvent添加的，那么就会有一个event对象被传入事件处理程序中

复制代码 代码如下:

var handler = function (e) {
            alert(e.type);
        }
        var btnClick = document.getElementById('btnClick');
        attachEvent(btnClick, handler);

当然这时候也可以通过window对象访问event，方便起见，我们一般会传入event对象，IE中所有的事件都包含以下属性方法

属性/方法	类型	读/写	说明
cancelBulle	Boolean	读/写	默认为false，设置为true后可以取消事件冒泡
returnValue	Boolean	读/写	默认为true，设为false可以取消事件默认行为
srcElement	Element	只读	事件的目标元素
type	String	只读	被触发的事件类型

クロスブラウザー イベント オブジェクト DOM と IE のイベント オブジェクトは異なりますが、類似点に基づいて、クロスブラウザー イベント オブジェクト ソリューションを作成できます

コードをコピー コードは次のとおりです。

function getEvent(e) {
リターン e | ウィンドウ.イベント;
}

function getTarget(e) {
return e.target || e.scrElement;
}

関数PreventDefault(e) {
if (e.preventDefault)
e.preventDefault();
else
e.return Value = false;
}

function stopPropagation(e) {
if (e.stopPropagation)
e.stopPropagation();
else
e.can celBubble = true;
}

一般的な HTML イベント

よく使用される HTML イベントがいくつかあります。これらのイベントは、ここでは簡単に説明しているだけです。詳細な使用法については、Baidu や Google で検索する必要があります。

1.load: ページが完全に読み込まれたときにウィンドウでトリガーされ、画像が読み込まれたときに img 要素でトリガーされ、埋め込みコンテンツが読み込まれたときに object 要素でトリガーされます
2.unload: ページ完全にロードされています アンインストール後にウィンドウでトリガーされるか、埋め込みコンテンツがアンインストールされた後にオブジェクト要素でトリガーされます
3.select: ユーザーがテキスト ボックスで文字を選択するとトリガーされます
4.change:フォーカスが変更された後にテキスト ボックスの値が変更されます
5.submit: ユーザーがフォームを送信したときにトリガーされます
6.resize: ウィンドウまたはフレーム サイズが変更されたときにウィンドウ上でトリガーされます
7.scool:ユーザーが要素上でスクロール バーを使用して要素をスクロールします。 Trigger
8.focus: ページまたは要素がフォーカスを取得したときにウィンドウと対応する要素でトリガーされます
9.blur: ウィンドウと対応する要素でトリガーされます。ページまたは要素がフォーカスを失います
10.beforeunload: ページをアンロードします。以前はウィンドウ
でトリガーされました。11.mousewheel: HTML はカウントされません。ユーザーがマウス ホイールを使用してページを操作し、ページを垂直にスクロールするとトリガーされます。方向