JavaScript動的イベント処理、未jqueryの

は、ここに私のコードJavaScript動的イベント処理、未jqueryの

<html> 
    <head> 
    <script type="text/javascript"> 
    window.onload = function(){ 
     sel = document.getElementsByTagName('select'); 
     for(i=0;i<sel.length;i++)sel[i].onclick = function(){alert('');} 
    } 
    </script> 
    </head> 
    <body> 
    <div id="ss"></div> 
    <select></select> 
    <input type="button" onclick="document.getElementById('ss').appendChild(document.createElement('select'))"/> 

    </body> 
</html>

「を選択し、」静的タグのために働いたが動的に作成された「選択」のために働いていない「onclickの」イベントです。言い換えれば、私はJavascriptでJQueryの.liveに代わるものが何であるかを知りたがっています。

出典

2012-03-10 user794624

バインドすでにDOMに存在する親要素へのイベント：

document.body.addEventListener('click', function (e) { 
    if (e.target.tagName.toLowerCase() == 'select') { 
    alert('You clicked a select!'); 
    } 
});

JS Fiddle demo。

それはformに「近い」要素にクリックをバインドするためにもう少し賢明だろう、とあなたはむしろgetElementByTagName()よりgetElementById()を使用する場合は番号のインデックスを心配する必要はありませんので、それは、より簡単ですあなたは縛っている。

出典

2012-03-10 19:51:57

ウィンドウがロードされたときにのみonclickを設定しています。あなたがする必要があるのは、現在window.onloadにあるコードを名前付き関数に置き、新しい選択を追加するたびに呼び出すことだけです。ここ

はそれを行うにはダムの方法だ：

<html> 
    <head> 
    <script type="text/javascript"> 

    function update() { 
     sel = document.getElementsByTagName('select'); 
     for(i=0;i<sel.length;i++)sel[i].onclick = function(){alert('');} 
    } 
    window.onload = update; 

    </script> 
    </head> 
    <body> 
    <div id="ss"></div> 
    <select></select> 
    <input type="button" onclick="document.getElementById('ss').appendChild(document.createElement('select'));update();"/> 

    </body> 
</html>

出典

2012-03-10 19:59:49 steve

ごとにonclickのハンドラをバインドする必要はありませんが、あなたが1を追加するたびに選択します。

私はあなたのページ全体を再入力するつもりはありませんが、あなたは、次のスニペットを読むことによって、何が起こっているのかわかります

function handler() { 
    alert('You clicked a select!'); 
} 

window.onload = function(){ 
    sel = document.getElementsByTagName('select'); 
    for(int i= 0; i < sel.length; i++) { 
     sel[i].onclick = handler; 
    } 
} 

function addSelect() { 
    var slt = document.createElement("select"); 
    document.getElementById('ss').appendChild(slt); 
    slt.onclick = handler; 
} 

<input type="button" onclick="addSelect();"/>

出典

2012-03-10 20:10:31 Tom

動的にイベントハンドラを追加するために、以下のようにあなたはクロスブラウザのソリューションを使用することができます

sel = document.getElementsByTagName('select'); 
for(i=0; i<sel.length; i++){ 
    if (sel[i].addEventListener){ 
     sel[i].addEventListener("click", clickHandler, false); 
    } else if (sel[i].attachEvent){ 
     sel[i].attachEvent("onclick", clickHandler); 
    }else{ 
     sel[i].onclick = clickHandler; 
    } 
} 

function clickHandler(event){ 

}

出典

2012-03-10 20:12:41 Diode

SEL [i]とその後も、そのが動的作成された要素のために働いていないとSELを置き換えるが、私はあなたがこの線e = Eを説明してくださいすることができ感謝 – user794624

jQueryのライブ機能は「Event Delegation」を使用して動作します。基本的な考え方は、ページが読み込まれたときに存在することが保証されている親要素にリスナーをバインドすることです。その下の要素（with the exception of some）は、親リスナーが捕捉できるイベントを起動します。そこから、イベントのtarget/sourceElementを取得し、それが気になるものかどうかを判断する必要があります。

このようなものは、クリックを聞くために機能します。追加している新しい要素が適切な親コンテナ内にあることを確認し、残りのクリック可能な要素と区別する属性を持つようにしてください。

<html> 
<head> 
    <script type="text/javascript"> 
     window.onload = function(){ 
      // get the relevant container 
      var eventContainer = document.getElementById("EventContainer"); 

      // bind a click listener to that container 
      eventContainer.onclick = function(e){ 

       // get the event 
       e = e || window.event; 

       // get the target 
       var target = e.target || e.srcElement; 

       // should we listen to the click on this element? 
       if(target.getAttribute("rel") == 'click-listen') 
       { 
        alert("You clicked something you are listening to!"); 
       }// if 
      }; 
     }; 
    </script> 
</head> 
<body> 
<div id="EventContainer"> 
    <input type="button" rel="click-listen" name="myButton" value="Listening to this button." /> 
    <input type="button" name="anotherButton" value="Not listening." /> 
    <p>I'm also listening to this a element: <a href="#" rel="click-listen">listening to this</a></p> 
</div> 
</body> 
</html>

出典

2012-03-10 20:17:34 jeremysawesome

:-)クロスブラウザスクリプトに関する新しい学ぶのを助けます| | window.eventは何ですか？|| mean here here – user794624

これは*ショートサーキット評価と呼ばれます。 http://en.wikipedia.org/wiki/Short-circuit_evaluation '||'は「論理OR」です。最初の真の値または最後の値を返します。 https://developer.mozilla.org/ja/JavaScript/Reference/Operators/Logical_Operators – jeremysawesome

JavaScript動的イベント処理、未jqueryの

答えて

関連する問題