イベントバインディング、イベント傍受、イベント依頼

6947 ワード

イベントバインド
JavaScriptがユーザーの操作に応答するためには、まずDOM要素バインディングイベント処理関数が必要です.イベントハンドラクションとは、ユーザ操作を扱う関数であり、異なる操作には異なる名前が対応しています.JavaScriptには、一般的に使用されるバインディングイベントの3つの方法がある.

は、DOM要素に直接結合される.

私たちは、DOM要素にonclick、onmouseover、onmouseout、onmousedown、onmouseup、ondblclick、onkeydown、onkeypress、onkeyupなどをバインドすることができる.もっと多いイベントの種類を確認してください.DOMイベント.



function hello(){
    alert("hello world!");
}

は、JavaScriptコードにバインドされている.

JavaScriptコードの中(すなわちスクリプトラベル内)のバインディングイベントはJavaScriptコードとHTMLタグを分離し、文書構造が明確で、管理と開発に便利です.



document.getElementById("btn").onclick = function(){
    alert("hello world!");
}

バインディングイベント傍受関数.

バインディングイベントの別の方法は、イベント傍受関数をaddEvent Listener()またはatachEvent()でバインドすることである.
事件の傍受
イベント傍受については、W 3 C仕様では3つのイベントフェーズが定義されており、順次 、、 である.最初にNetscapeはJavaScriptのイベント駆動機構(すなわちイベントキャプチャ)を制定した.すぐさまIEも自分の一連のイベント駆動機構(即ち、イベントの泡立ち)を発表した.最後にW 3 Cは二つのイベント機構を規範化し、捕獲段階、目標段階、発泡段階に分けている.IE 8は以前からIEが自分のイベント機構(フロントエンドの人がずっと頭痛している互換性の問題)を堅持しており、IE 9以降もW 3 C仕様をサポートしている.

W 3 C規範文法:

element.addEventListener(event, function, useCapture)

event:(必須)すべてのDOMイベントをサポートするイベント名.function:イベントのトリガをする関数を指定します.useCapture:(オプション)キャプチャまたは発泡段階でイベントが実行されるかどうかを指定します.true、捕獲.false、泡が出ます.デフォルトのfalse

// ：IE8     。


document.getElementById("btn1").addEventListener("click",hello);
function hello(){
    alert("hello world!");
}

IE標準文法:

element.attachEvent(event, function)

event:(必須)イベントタイプ.「on」を追加する必要があります.例えば、Oclick.function:イベントをトリガする関数を指定します.



document.getElementById("btn2").attachEvent("onclick",hello);
function hello(){
    alert("hello world!");
}

イベント傍受のメリット

は、複数のイベントをバインドすることができます.



var btn3 = document.getElementById("btn3");
btn3.onclick = function(){
    alert("hello 1"); //   
}
btn3.onclick = function(){
    alert("hello 2"); //  
}

従来のイベントバインディングは最後のバインディングイベントのみ実行されます.



var btn4 = document.getElementById("btn4");
btn4.addEventListener("click",hello1);
btn4.addEventListener("click",hello2);

function hello1(){
    alert("hello 1");
}
function hello2(){
    alert("hello 2");
}

イベントの傍受方法は二つのイベントを全部実行しました.

は、対応するバインディングを解除することができる



var btn5 = document.getElementById("btn5");
btn5.addEventListener("click",hello1);//   
btn5.addEventListener("click",hello2);//   
btn5.removeEventListener("click",hello2);

function hello1(){
    alert("hello 1");
}
function hello2(){
    alert("hello 2");
}

パッケージイベント



//      
function addEventHandler(target,type,fn){
    if(target.addEventListener){
        target.addEventListener(type,fn);
    }else{
        target.attachEvent("on"+type,fn);
    }
}

//      
function removeEventHandler(target,type,fn){
    if(target.removeEventListener){
        target.removeEventListener(type,fn);
    }else{
        target.detachEvent("on"+type,fn);
    }
}

//  
var btn5 = document.getElementById("btn5");
addEventHandler(btn5,"click",hello1);//    hello1
addEventHandler(btn5,"click",hello2);//    hello2
removeEventHandler(btn5,"click",hello1);//    hello1

イベント依頼
イベント依頼とは、泡が発生する原理を利用して、イベントを父要素や祖先要素に加え、実行効果を触発することです.



var btn6 = document.getElementById("btn6");
document.onclick = function(event){
    event = event || window.event;
    var target = event.target || event.srcElement;
    if(target == btn6){
        alert(btn5.value);
    }
}

上の例ですが、コードはできるだけ簡略化されています.実際のコードの中では、jQueryのライブ()、delegate()、bind()、on()などを使うことができます.イベント依頼の長所は何ですか?

は、JavaScriptの性能を向上させます.イベント依頼は、イベントの処理速度を著しく向上させ、メモリの占有を減少させることができます.実例は、JavaScriptにおけるイベント依頼とイベントバインディングを分析します.

伝統的な書き方


  item1
  item2
  item3



var item1 = document.getElementById("item1");
var item2 = document.getElementById("item2");
var item3 = document.getElementById("item3");

item1.onclick = function(){
 alert("hello item1");
}
item2.onclick = function(){
 alert("hello item2");
}
item3.onclick = function(){
 alert("hello item3");
}

イベント依頼


  item1
  item2
  item3



var item1 = document.getElementById("item1");
var item2 = document.getElementById("item2");
var item3 = document.getElementById("item3");

document.addEventListener("click",function(event){
    var target = event.target;
    if(target == item1){
        alert("hello item1");
    }else if(target == item2){
        alert("hello item2");
    }else if(target == item3){
        alert("hello item3");
    }
})

は、DOM要素を動的に追加し、要素の変化によってイベントバインディングを修正する必要がない.

伝統的な書き方


  item1
  item2
  item3



var list = document.getElementById("list");

var item = list.getElementsByTagName("li");
for(var i=0;i<item.length;i++){
    (function(i){
        item[i].onclick = function(){
            alert(item[i].innerHTML);
        }
    })(i)
}

var node=document.createElement("li");
var textnode=document.createTextNode("item4");
node.appendChild(textnode);
list.appendChild(node);

アイテム1をクリックしてもアイテム3にイベント応答がありますが、アイテム4をクリックしてもイベント応答がありません.従来のイベントバインディングはダイナミックに追加できない要素にダイナミックにイベントを追加します.

イベント依頼


  item1
  item2
  item3



var list = document.getElementById("list");

document.addEventListener("click",function(event){
    var target = event.target;
    if(target.nodeName == "LI"){
        alert(target.innerHTML);
    }
})

var node=document.createElement("li");
var textnode=document.createTextNode("item4");
node.appendChild(textnode);
list.appendChild(node);

アイテム4をクリックすると、アイテム4はイベント応答があります.イベント依頼は新しく追加されたDOM要素に動的にイベントを追加することができます.

飢えた人の谷の任務班TASK 17