イベント処理プログラムonclickとaddEvent Listener、atachEventを登録します.

10582 ワード

atachEvent

一、HTMLタグの属性を設定するのはイベントハンドラです.
文書要素イベントハンドラの属性を設定するために、対応するHTMLタグの属性を変更することができます.このようにすると、属性値はJavascriptコード文字列であるべきです.このコードは、完全な関数宣言ではなく、イベントハンドラの主体であるべきです.一連のコードをHTMLイベントハンドラの属性の値として指定すると、ブラウザバーバーのコード列は以下のような関数に変換されます.

function(event){
　　with(){
　　　　with(){
　　　　　　with(this){
　　　　　　　　/*          */
　　　　　　}
　　　　}
　　}
}

例:

<form onsubmit="checkform();"></form>

ここのcheckformはイベントハンドラの関数ではなく、実際のイベントハンドラの関数として呼び出されるだけです.完全な関数宣言ではなく、なぜ多くの学生がここでフォームの検証を書いている時に、return falseも常にフォームを提出して、checkform()関数の中のreturn falseが機能しないのですか?イベントハンドラの関数で提出しない役割を果たしたい場合は、

function(event){ 　　with(){ 　　　　with(){ 　　　　　　with(this){ 　　　　　　　　return checkform();/* 这里是代码字符串 */ 　　　　　　} 　　　　} 　　} }
二、javascriptオブジェクトの属性をイベントハンドラに設定する
イベントハンドラを登録する一番簡単な方法は、時間目標の属性を設定することによって、必要なイベントハンドラ関数となります.約束通り、イベントハンドラの属性の名前はonの後にイベント名が付いています.onclick、onchange、onload、onmouseoverなど.これらの属性の名士は大文字と小文字を区別しています.適時イベントの種類は複数の単語からなります.
欠点は、各イベントの種類については、各イベントのターゲットを設定するための設計は、最大1つの処理プログラムのみとなります.

var btn = document.getElementById("myBtn"); btn.onclik = function(){ alert("thanks!"); }

三、addEventListener()とremoveEventListener()は、イベントハンドラの指定と削除を処理するために使用されます.
すべてのDOMノードにはこの2つの方法が含まれており、それらは3つのパラメータを受け入れる.処理するイベント名と、イベントハンドラの関数として、1つのブール値.このブール値のパラメータはtrueで、捕獲段階でイベントハンドラを起動することを表します.falseであれば、泡立ち段階でイベントハンドラを呼び出すという意味です.
ボタンにイベントハンドラを追加するには、下記のコードが使えます.

var btn = document.getElementById("myBtn"); btn.addEventListener("click", function () { alert(this.id); }, false);

DOM 2段法を用いてイベントハンドラを追加する主な利点は、同じオブジェクトに同じイベントタイプの複数の処理プログラム関数を登録することができ、オブジェクト属性がイベントハンドラに上書きされないことである.次の例を見てみます.

var btn = document.getElementById("myBtn"); btn.onclick = function(){alert(this.id)} btn.addEventListener("click", function () { alert(this.id); }, false); btn.addEventListener("click", function () { alert("Hello World"); }, false);

addEventListener()に追加されたイベントハンドラは、removeEventListener()のみを使用して除去されます.除去時に入ってきたパラメータは、処理プログラムを追加する時に使用したパラメータと同じです.これは、以下の例に示すように、addEventListener()によって追加された匿名関数が除去されないことを意味する.

var btn = document.getElementById("myBtn"); btn.addEventListener("click", function () { alert(this.id); }, false); btn.removeEventListener("click", function () {  //  ！
    alert(this.id); }, false);

この例では、addEvent Listener()を使ってイベントハンドラを追加します.removeveveveveveventListener()を呼び出すと同じパラメータを使っているように見えるが、実際には、2番目のパラメータは、addEventListener()に入ってくるものとは全く異なる関数である.removeveveveveveventListener()に入ってくるイベントハンドラ関数は、次の例に示すように、addEventListener()に入ってくるのと同じでなければならない.

var btn = document.getElementById("myBtn"); var handler = function () { alert(this.id); }; btn.addEventListener("click", handler, false); btn.removeEventListener("click", handler, false);  //  ！

書き換えたこの例は問題ないです.addEventListener()とremoveveveveveventListener()で同じ関数を使うからです.

IEでは、DOMにおけるイベントハンドラの指定および削除に関する動作と同様の2つの方法が実現された.IEイベントモデルはイベントトラッピングをサポートしていないので、この2つの方法は同じ2つのパラメータしか受け付けられない.イベントハンドラ名とイベントハンドラ関数.IEはイベントの泡立ちのみをサポートするため、各国のatachEvent()に追加されたイベントハンドラが泡立ち段階に追加されます.IEにおいてatachEvent()を使用することと、DOM 0レベルの方法を使用することとの主な違いは、イベントハンドラの役割領域にある.DOM 0レベルの方法を使用する場合、イベントハンドラは、その属する元素の作用領域内で実行されます.atachEvent()法を使用する場合、イベントハンドラはグローバルスコープで実行されますので、thisはwindowに等しいです.

var btn = document.getElementById("myBtn"); btn.attachEvent("onclick", function () { alert(this == window); //ture 
})

なお、atachEvent()の最初のパラメータは、DOMのaddEvent Listener()方法の「Click」ではなく、「onclick」である.
addEvent Listener()と同様に、1つの要素に複数のイベントハンドラを追加するためにatechEvent()方法を用いることができる.次の例を見てみます.

var btn = document.getElementById("myBtn"); btn.attachEvent("onclick", function () { alert("Clicked"); }); btn.attachEvent("onclick", function () { alert("Hello World!") ; });

atachEvent()を使ってイベントを追加すると、detachEvent()によって除去できます.条件は同じパラメータを提供しなければなりません.DOM法と同様に、これはまた追加された匿名関数が除去されないことを意味する.ただし、比較的同じ関数の参照をdetachEvent()に伝えることができれば、対応するイベントハンドラを削除することができます.たとえば:

var btn = document.getElementById("myBtn"); var handler = function () { alert("Clicked"); } btn.attachEvent("onclick", handler); btn.detachEvent("onclick", handler);

この例は変数handlerに保存されている関数をイベントハンドラとします.したがって、後のdetachEvent()は同じ関数を使ってイベントハンドラを除去することができます.
ほとんどの場合、イベントハンドラをイベントフローの発泡段階に追加します.これによって様々なブラウザと最大限に互換できるようになります.時間が目標に達する前に、イベントハンドラをキャプチャ段階に追加することが望ましい.特に必要でない場合は、イベントキャプチャ段階でイベントハンドラの登録を推奨しません.
四、イベントハンドラの戻り値(補足)
オブジェクト属性やHTML属性を設定することによって、時間処理プログラムの戻り値が登録されている場合があります.通常、戻り値falseは、ブラウザにこのイベントに関するデフォルトの操作を行わないようにということです.例えば、フォーム提出ボタンのOclickイベントハンドラは、false組織ブラウザに戻ってフォームを提出することができる.(ユーザの入力がクライアント認証に失敗した場合に有用です.)同様に、Officeのユーザが不適切な文字を入力すると、入力領域のonkeyperesイベントハンドラがfalseに戻り、キーボードイベントをフィルタすることができます.
windowオブジェクトのone beforeunloadイベントハンドラの戻り値もとても意味があります.このイベントは、ブラウザが新しいページに移動するときにトリガされます.イベントハンドラが文字列を返すと、現在のページから離れたいかどうかを問い合わせる標準ダイアログに表示されます.
イベントハンドラの戻り値を理解することは、属性によって登録された処理プログラムにのみ意味があるということを理解することが重要です.次に、addEvent Listener()またはatachEvent()を使ってイベントハンドラを登録して、prevent Default()方法を呼び出したり、イベントオブジェクトを設定したりするreturn Value属性を参照します.はっきり言って、return falseはaddEvent Listener()やatachEvent()に役に立たないので、デフォルトの操作を阻止できません.prevent Default()を通じてデフォルトの操作を阻止します.

var form= document.getElementById("myform");
form.addEventListener("submit",function(e){
      //   preventDefault()      
      e.preventDefault();
      // return false   
})

HTML DOM基礎知識