Javascript事件の知識点整理-2014.2.8

5150 ワード

整理する JavaScript

イベント

一、事件の流れ
1、ボタンをクリックしながら、ボタンのコンテナ要素をクリックし、ページ全体をクリックしました.「同心円」の例
2、イベントフローは、ページでイベントを受け取る順序を説明する.
3、イベントの泡が発生しました.イベントの開始時には、最も具体的な要素(ドキュメント内のネストがこの一番深いノードに達することができます.)によって受信され、段階的に、より具体的でないノード(ドキュメント)に伝播されます.
4、イベントキャプチャ:あまり具体的でないノードは、より早くイベントを受信するべきであり、最も具体的なノードは、最後にイベントを受信するべきである.イベントキャプチャは、イベントが予定されている目標に達する前に捕獲することが意図されている.
5、DOMイベントフロー:三つの段階:イベント捕獲段階、目標段階から、イベントの泡発生段階

二、イベントハンドラP 348
1、HTMLイベントハンドラ
1.1、ユニーク
         1、要素属性値をカプセル化した関数を作成します.この関数にはイベントオブジェクトイベントがあります.
         2、スコープを広げる
1.2、欠点
         1、時差問題.ユーザはHTML要素がページ上に現れると、該当イベントをトリガする可能性がありますが、その時点での時間処理プログラムはまだ実行条件を備えていない可能性があります.
         2、このように時間処理プログラムの役割を拡張すると、別のブラウザに接続すると、結果が違ってきます.
         3、HTMLはJavaScriptと緊密に結合されている.

2、DOM 0級事件処理プログラム
2.1、存在の理由
         1、簡単です
         2、ブラウザをまたぐ
2.2、各要素(documentとwindowを含む)には自分のイベントハンドラの属性があります.使用する前に、操作対象の参照を取得しなければなりません.
2.3、コードが実行される前にイベントハンドラは指定されませんので、コードがページの中にボタンの後ろにあると、しばらくの間にどのようにクリックしても反応しない可能性があります.
2.4、プログラム中のthisは現在の要素を引用し、イベントハンドラでthisを通じて要素の属性と方法にアクセスする.
2.5、イベントフローの発泡段階で処理される.
2.6、削除:btn.onclick=null;

3、DOM 2級事件処理プログラムP 351
3.1、すべてのDOMノードはこの2つの方法を含む.
3.2、addEventListener()によって追加された時間処理プログラムは、removeveveveventListener()のみで削除されます.除去時に入ってきたパラメータは、処理プログラムを追加する時に使用したパラメータと同じです.これは、addEventListener()によって追加された匿名関数が除去されないことを意味する.
3.3、ほとんどの場合、イベントハンドラをイベントフローの発泡段階に追加します.これによって様々なブラウザに最大限に対応できます.イベントが目的に達する前にキャプチャされる場合にのみ、イベントハンドラをキャプチャフェーズに追加する必要があります.特に必要でない場合は、イベントキャプチャフェーズにイベントハンドラを登録することは推奨されません.

4、IEイベントハンドラP 352
4.1、イベントハンドラはグローバルスコープで実行されますので、thisはwindowに等しいです.
4.2、イベントハンドラを削除するのはDOM 2級と同じです.
5、ブラウザをまたぐ

var EventUtil = {
  addHandler: function(element, type, handler){
    if (element.addEventListener) {
      element.addEventListener(type, handler, false);
    }else if (element.attachEvent){
      element.attachEvent("on" + type, handler);
    }else {
      element["on" + type] = handler;
    }
  },

  removeHandler: function(element, type, handler){
    if (element.removeEventListener) {
      element.removeEventListener(type, handler, false);
    }else if (element.datachEvent){
      element.detachEvent("on" + type, handler);
    }else {
      element["on" + type] = null;
    }
  }
//...........
}

三、事件の対象P 355
DOM上のあるイベントをトリガすると、イベントオブジェクトが発生し、このオブジェクトには実践に関するすべての情報が含まれています.
1、DOM中のイベントの対象
1.1、DOM 0級とDOM 2級はいずれもイベント対象に入る.
1.2、HTML特性でイベントハンドラを指定した場合、変数イベントにイベントオブジェクトが保存されています.
1.3、イベントオブジェクトは、その特定のイベントの作成に関する属性と方法を含む.トリガされたイベントの種類は異なり、利用可能な属性や方法も異なります.
1.4、イベントハンドラ内部では、オブジェクトthisは常にcurrentTargetの値に等しく、targetはイベントのタイミングターゲットのみを含む.イベントハンドラを直接ターゲット要素に指定すると、this、currentTarget、targetは同じ値を含む.
         1、イベントエージェント:イベントオブジェクトのタージ属性で、イベントをトリガする要素を得ることができます.イベントがアクティブになると、サルのようにDOMおじさんに沿って傍受ノードからトリガーノードに降りて、それから上に登ってノードを傍受します.つまり、DOMノードを待ち受けているということは、そのすべての後裔ノードに等しいということです.プロキシとは、親ノードのイベントトリガーのみを傍受し、その後のノードの傍受を代行するという意味であり、あなたが必要とするのは、タージ属性を介してトリガ要素を得て応答するだけである.
1.5、特定時間のデフォルト行為を阻止するために、preventDefault()方法を使用することができる.ただし、cancenlable属性のみがtrueに設定されているイベントです.
1.6、STopPropagation()方法は、直ちに時間を停止してDOMレベルで伝播するために使用される.
1.7、イベントオブジェクトのeventPhite属性は、イベントが現在イベントフローのどの段階にあるかを判定するために使用されてもよい.

2、IE中のイベントオブジェクト
2.1、DOM 0級の方法の場合、イベントオブジェクトはwindowオブジェクトの属性として存在します.
var btn=document.getElemenntById(「myBtn」)
btn.onclick=function(){
         varevent=window.event;
         alert(event.type)
｝
2.2、atachEvent()
イベントオブジェクトはパラメータとしてイベントハンドラ関数に入力されます.DOM 0のようにwindow.eventを訪問することもできます.
2.3、HTML特性で指定された時間処理プログラム
イベントという名前の変数でイベントオブジェクトにアクセスする(DOMイベントのタイムモデルと同じ)
2.4、IEのイベントオブジェクトも、その作成時間に関する属性および方法を含む.
2.5、IEでは、event.return Value属性はDOMにおけるpreventDefault()方法に相当する.
2.6、IEの中で、event.ccerBbbleはDOMの中のstopPropagationに等しい()

3、ブラウザをまたぐ

var EventUtil = {
  addHandler: function(element, type, handler){
    if (element.addEventListener) {
      element.addEventListener(type, handler, false);
    }else if (element.attachEvent){
      element.attachEvent("on" + type, handler);
    }else {
      element["on" + type] = handler;
    }
  },

  removeHandler: function(element, type, handler){
    if (element.removeEventListener) {
      element.removeEventListener(type, handler, false);
    }else if (element.datachEvent){
      element.detachEvent("on" + type, handler);
    }else {
      element["on" + type] = null;
    }
  },

  getEvent:function(event){
    return event ? event:window.event;
  },

  getTarget:function(event){
    return event.target || event.srcElement;
  },

  preventDefault:function(event){
    if (event.preventDefault) {
      event.preventDefault();
    }else {
      event.returnValue = false;
    }
  },

  stopPropagation:function(event){
    if (event.stopPropagation) {
      event.stopPropagation();
    }else {
      event.cancelBubblt = true;
    }
  }
};

四、イベントタイプP 366
1、UI
2、焦点時間
3、マウスイベント
4、ローラー事件
5、テキストイベント
6、キーボードイベント
7、合成イベント
8、変動事件
9、変動名称事件

変換:Javascriptはウェブページの中でtableの内容をexcelの中のいくつかの方法にエクスポートすることを実現します.