今日は主に演習と昨日の復習、イベントの学習です
1.イベントの流れ
-
概念: イベント フローは、イベントがページから受信される順序を表します。イベントが発生すると、特定の順序で要素ノード間で伝播されます.この伝播プロセスは、DOMイベントフローとも呼ばれます.
-
イベント フロー: イベント バブリングとイベント キャプチャに分けられます
-
完全なイベントには、キャプチャ フェーズ -> ターゲット フェーズ -> バブリング フェーズが含まれます。
-
イベントバブリング：
イベントが発生すると、イベントが広がり始めます（内側から外側へ、または外側から内側へ）。したがって、最も内側の要素がイベントをトリガーすると、すべての要素の同じイベントが順番に (イベントをトリガーした要素から上に向かって) トリガーされますが、イベントのバブリングはほとんど役に立ちません。イベントバブルをブロックします。
存在兼容问题
eve.stopPropagation();
eve.cancelBubble = true; //兼容IE
//兼容写法：
function stopBubble(e){
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
}
- イベント キャプチャ:
イベント バブリングの正反対です。イベントが発生すると、親要素が先にイベントを受信し、特定の要素が最後にイベントを受信する必要があると考えられています。
2、イベント監視
- イベント トリガー ステージは、主にイベント フローによるものです。DOM0 レベルのイベント処理ステージと DOM2 レベルのイベント処理です。
- DOM0 レベル (イベント バインディング) は、すべてのブラウザでサポートされている、理解しやすく操作しやすい割り当て方法です;
element.onclick = function(){} - DOM2 レベル (イベント監視) はすべての DOM ノードのメソッドであり、繰り返しバインドできますが、ブラウザーの互換性に問題があります。
- 構文
obj.addEventListener('click', funcation(){}, false);
パラメータ 1 はバインドするイベントを示します (追加する必要があります); パラメータ 2 は関数を示します; パラメータ 3 はキャプチャまたはバブリングを示します (false バブリング、true Capture)
IE の下のイベント名だけが必要であることに注意してください
兼容写法：
/*
+ 事件
+ 函数（把函数作为参数给函数使用）
+ 需要给绑定的元素
*/
function addEvent(ele, l, cb){
if(ele.addEventListener){
ele.addEventListener(l, cb, false);
}else{
//因为在IE低版本的浏览器下是没有事件捕获的
ele.attachEvent('on'+l, cb);
}
}
3. コールバック関数
- コールバック関数 (callback、cb)
- 概念: 関数ポインタ (アドレス) がパラメータとして別の関数に渡される場合、このポインタが参照する関数を呼び出すために使用される場合、これをコールバック関数と呼びます。
- 理解: 関数を別の関数のパラメーターとして使用し、この状況をコールバック関数と呼びます
例子：
function add(num1, num2){
return num1 + num2;
}
function sub(num1, num2){
return num1 - num2;
}
function mul(num1, num2){
return num1 * num2;
}
function divs(num1, num2){
return num1 / num2;
}
function calc(num1, num2, callback){
return callback(num1, num2);
}
var res = calc(10, 20, add);
console.log(res);
function fn(){
console.log(1);
}
setInterval(fn, 1000);
4. イベント委任メカニズム
- 問題の説明: イベントをバインドする従来の方法では、同じイベントがバインドされ、実際には for ループが何度もバインドされるため、
ブラウザーのパフォーマンスが大幅に消費されます。後で新しく作成されたタグ、イベントはあなたにバインドされません - この種の問題に対して、イベントを一度だけバインドし、他の要素をバインドする方法が提案されました。
- 解決策: イベント委任を使用する - 自分がしていることを他の人に任せる
- 概念: イベント委任 (委譲) は、要素の共通の祖先要素にイベントを均一にバインドすることを指します。そのため、子孫要素のイベントがトリガーされると、祖先要素にバブルアップして、の応答関数を介してイベントを処理します。祖先の要素。
- イベント委任イベント オブジェクト ターゲット ターゲットを使用 - 誰がクリックしてもその要素が表示されます
- 利点:
1. パフォーマンスを節約できます
2. ページに一時的に存在しない要素にイベントをバインドできます
5. 補足
isNaN(): 文字が非数値かどうかを判断します。数値の場合は false を返し、非数値の場合は true を返します 注:
isNaN('10') は暗黙的な型変換のために false を返します
toFixed(): 小数点以下の桁数を取る