javascript事件システムの発展史

完全なイベントシステムでは、通常以下の3つのキャラクターが存在します.

イベントオブジェクトは、イベントの状態を格納するために使用される.

イベントソースオブジェクト、現在のイベントは、要素ノード、ドキュメントオブジェクト、windowオブジェクト、XMLHttpRequestオブジェクトなどのオブジェクトを操作しています.

イベントモニターは、イベントソースがイベントオブジェクトを生成すると、対応するコールバック関数を呼び出して動作する.IEでは、イベントオブジェクトは常に全体のプロパティwindow.eventの分身です.

w 3 cがそのDOMモデルをウェブサイトに導入していない時、netscapeとマイクロソフトはもう彼らの熟知している言語の中で関連しているDOMモデルを導入するのに間に合わないように迫られました.これはjavascriptの父が他の言語をコピーするのに忙しいからです.自分の事件システムの建設を無視しました.世界は二つの陣営に分けられました.
DOM 0時代、ここのDOMはw 3 cのDOMを指します.両方とも二つの結合イベントを設計する方法で、侵入式と侵入式がない.インラインとインラインの違いを言ってもいいです.
侵入式は、両方とも同じです.仕方がないです.早く実現しました.その時IEは盗作の分だけあって、まだでたらめに来る勇気がありません.

<input name="ruby" onclick="alert(this.nam)" />

次に無侵襲式であり、これらはそれぞれのDOMモデルを完成し、要素ノードに対するインデックス機構を実現した後のことと推定される.たとえば、次のページの断片があります.

＜input
type=「button」
name="button 1"
value=「aaaa」/>
私たちは上から下に行く必要があります.一歩ずつこの元素のノードを見つけてこそ操作できます.その時はいわゆるdocument.getElemenntByIdがありませんでした.ネットスケープのやり方では、関連する結合コードをscriptタグに入れる:

    <form name="form1">

      <input

        type="button"

        name="button1"

        value="aaaa"/>

    </form>

コードをwindow.onload=function()というコードブロックでくくりたくないなら、このscriptタグをフォーム要素の後に置くべきです.
マイクロソフトにもインデックスのセットがあります.基本的にネットスケープと同じですが、IE 4にはdocument.allとdocument.all.tagsも導入されています.しかし、IEには別の方法があります.

   <script

      for="button1"

      event="onclick"

      language="JavaScript">

        alert("this.aaa")

    </script>

でも、これはthisを使えません.もう一つのscriptタグをbodyの中の一つのラベルに対応するように要求します.本当にもったいないです.最終的に淘汰されてアウトしました.
これはDOM 0のバインディング機構であり、インラインでラベルに書いてあるコードです.実は以下の方式に相当します.

    <p id="aa" onclick="alert('aaaa')">   ↓</p>

    <script type="text/javascript">

      var p = document.getElementById("aa")

      p.onclick = new Function("alert('aaaa')")//   ↓

      p.onclick = function(){alert('aaaa')}

    </script>

これで、イベントシステムの3つのキャラクターが登場しました.インデックス機構によって得られたオブジェクト(元素ノードなど)は、イベントのソースとして、onclick、onmousemooveなどのイベント属性をモニターとして機能し、onclickの後の関数はコールバック関数であり、これは非同期的に実行される.
侵入のない台頭に伴い、web標準において、表現行為構造が分離されるというべきである.ラベルの中にonclickなどを書くと唾棄すべきです.無侵襲式プログラミングは、より多くのコードを書いてほしいという欲求があります.以前はいつも1つのラベルの中に縮めて、いつでも双引用符と単引用符のカバーが嵌め込むことに注意して、多く書きました.書きたくなくなりました.今はこの制限がなくて、手綱を離れた馬のように、より多くのブラウザと新しいアイデアを創造することに対応できるようにします.はい、書いてありますが、同じ元素で二つのonclick事件を結びつけることができますか?

    <script type="text/javascript">

      var p = document.getElementById("aa")

      p.onclick = function(){alert('   ')}

      p.onclick = function(){alert('   ')}

    </script>

もちろん、alert 2番目しかできません.もちろんいくつかのテクニックでこの目的を達成することもできます.

    <p id="aa" onclick="alert('   ')">          </p>

    <script type="text/javascript">

      var p = document.getElementById("aa")

      var addEvent = function(el,type,fn) {

        var type = "on"+type

        var old = el[type];

        if (typeof el[type] != 'function') {

          el[type] = fn

        }else {

          el[type] = function() {

            old();

            fn();

          }

        }

      }

      addEvent(p,"click",function(){alert('   ')});

      addEvent(p,"click",function(){alert('   ')});

   </script>

>
＜html lang=「zh-ch」＞

＜meta charset=「utf-8」/＞
＜meta content=「IE=8」http-equiv=「X-UA-Comppatible」/>
＜title＞複数のイベントオブジェクトを結びつけるby司徒正美(/title)
＜script type=「text/javascript」＞
window.onload=function(){
var p=document.getElemenntById(「aa」)
var addEvent=function(el,type,fn)｛
var type=on+type
var old=el[type]
if(typeof el[type]!='function'){
l[type]=fn
}else{
l[type]=function(){
old()
fn()
)
)
)
addEvent(p,「click」,function()｛alert('二回目')｝
addEvent(p,「click」,function()｛alert('第三回')｝
)


＜body＞
＜p＿id=“aa”onclick=“alert”>複数の同型関数を結びつけることができます.


実行コード
しかし、ユーザーにはこれをやるべきではないので、ブラウザメーカーはそれらを内蔵にしています.ちなみにイベントフロー、つまりイベントの対象がコントロール間(ラベル)に伝達されるようにしました.IEのAPIのセットはcreateEvent Objectで、atechEvent、dettachEvent、fireEvent、イベントフローは下から上になります.ネットスケープのセットはよく分かりませんが、w 3 cもそのセットから発展したと聞きました.APIは複雑で、createEvent、initEvent、addEvent Listener、removevevevent Listener dispatvent、そのinitEventはまだたくさんのバージョンがあります.addEventListenerは3つのパラメータを持っているが、第3のパラメータは通常イベントエージェントでのみ有用であり、通常はfalseであり、IEと一致しており、下から上の泡が発生する.w 3 cの劣性ルートのため、常にIEと境界線を区切りたいです.最高の泡はwindow(IEはdocument)に着きます.

        event = dom.Event(type);

        args =  [event].concat(args);

        var parent = caller;

        while(!event.isPropagationStopped() && parent){//isPropagationStopped w3c dom     ,

          dom.events.handle.apply( parent,args);     //         

          parent = parent.parentNode || (parent != window) && window;

        }

おかしいのはHTMLのparent Nodeが文書の対象です.捕獲なら面倒ですが、ここでは話をしません.マルチイベントバインディング時の互換性の問題を見てみましょう.例えば上のaddEventは十分です.DE大神のaddEventもDOM 0事件によって作られました.しかし、いくつかのイベントは、DOM 0のようなFFのDOMMouseScrrollイベントは、ODOMMouseScrrollのプロパティがないので、addEventListenerを使用しなければならないが、IE、opera、chromeなどのサポートのmouseweheel.だから、私たちはまだこれらの高級なAPIに離れられません.一般的なaddEvent関数:

var addEvent = (function () {

    if (document.addEventListener) {

        return function (el, type, fn) {

            el.addEventListener(type, fn, false);

        };

    } else {

        return function (el, type, fn) {

            el.attachEvent('on' + type, function () {

                return fn.call(el, window.event);

            });

        }

    }

})();

しかし、まだ問題があります.IEの下でのバインディング・コールバック関数は先導的なものではなく、詳細は『IEと非IEブラウザのイベントバインディングの実行手順問題』を参照してください.これらは次の部分に残して話します.
PSは、このシリーズは「javascriptブラウザを跨ぐイベントシステム」シリーズとは違って、ここで一つのイベントシステムを設計する上で出会うさまざまな問題に焦点を当てて述べています.後者は具体的な解決策を与える.