ネイティブ JS イベントの追加と削除のカプセル化_JavaScript スキル

IE ブラウザでイベントを追加または削除するには、attachEvent と detachEvent を使用します。他の標準ブラウザでは、addEventListener とremoveEventListener が使用されます。以下はイベントの追加と削除をカプセル化しています。コードを見てみましょう!

/**
* @description 事件绑定，兼容各浏览器
* @param target
* 事件触发对象
* @param type
* 事件
* @param func
* 事件处理函数
*/
function bind(target, type, func) {
if (target.addEventListener) {// 非ie 和ie9
target.addEventListener(type, func, false);
} else if (target.attachEvent) { // ie6到ie8
target.attachEvent("on" + type, func);
} else {
target["on" + type] = func; // ie5
}
}
/**
* @description 事件移除，兼容各浏览器
* @param target
* 事件触发对象
* @param type
* 事件
* @param func
* 事件处理函数
*/
function unbind(target, type, func) {
if (target.removeEventListener) {
target.removeEventListener(type, func, false);
} else if (target.detachEvent) {
target.detachEvent("on" + type, func);
} else {
target["on" + type] = null;
}
}

addEventListener の 3 番目のパラメータの意味に関するその他の追加

addEventListener の 3 番目のパラメータ

W3C DOM でトリガー イベントを追加するために使用される関数は AddEventListener と呼ばれますが、この関数の 3 番目のパラメーターが何に使用されるのかがわかりません。いつも何気なく設定していて、まったく見つかりませんでした。どれくらい違うのか、二日前に ppk on javascript を読んだときにようやく説明を見ました。昔存在した DOM 標準ドキュメントについては、実際にこのパラメータに関する情報を探したことはありませんでした。全て。

このパラメータは useCapture と呼ばれ、true または false のブール値です。 true が送信された場合、ブラウザは Capture メソッドを使用します。 false の場合は、特定の条件下でのみ影響します。通常は false を使用することをお勧めします。影響があるのは、ターゲット要素 (target 要素) に祖先要素 (ancestor 要素) があり、同じイベントに対応する機能がある場合だと思います。写真を見るとより明らかです。

2 層の div ブロックの例

この図に示すように、私の例には 2 つの div 要素があり、どちらにもクリック イベントが設定されています。一般的に、内側の青い要素をクリックすると、クリック イベントがトリガーされるだけではありません。同時に赤い要素のクリック イベントもトリガーされ、このときの 2 つのクリック イベントの順序は useCapture パラメーターによって制御されます。 false の場合はバブリングが使用されるため、最初に青い要素のクリック イベントが実行され、次に赤い要素のクリック イベントが実行されます。バブリングとは異なり、アウトサイドインで実行され、最初に赤い要素のクリックイベントが実行され、次に青い要素のクリックイベントが実行されます。キャプチャとバブリングの 2 つの例が添付されています。2 つのファイルの唯一の違いは、イベントの順序が異なることがわかります。

異なるレイヤーの要素が異なる useCaptures を使用する場合はどうなるでしょうか?つまり、最初に、最も外側の要素からターゲット要素までキャプチャするイベント セットを検索します。ターゲット要素に到達し、ターゲット要素のイベントを実行した後、元の要素に沿って外側にバブリングするイベント セットを検索します。パス。