2011-08-10 9 views
1

私のアプリケーションに動的に要素にイベントを適用しようとしています。javascript setAttribute動的に

私がonclickを使用したとき、私はポップアップする警告を受け取ります。

el.setAttribute('onclick', 'alert("hi")',0); 

私はonkeypressを使用しようとすると何も起こりません。

el.setAttribute('onkeypress', 'alert("Hi");',0); 

本当にonkeypressを利用できるようにする必要があります。私が間違っていることがありますか? setAttributeは私がやっていることを達成する最良の方法ではありませんか?もしそうなら、特定の要素にイベントを動的に設定する私の選択肢は何ですか?

UPDATE:

私が行う場合は、下記の質問のいくつかに答えるために:

el.setAttribute('onkeypress','numericOverride(this)',0); 

私はFirebugのソースを見てみると、私は以下を参照してください。

<div id="objSCR" class="txtbox" onmousedown="pfocus(this, '', '');" style="color:#0000FF; width:62px; height:12px; top:76px; left:120px; text-align:right; color:#0000FF;" ptmulti="false" pttype="E" ptlayndx="4" ptdisp="false" ppopup="" plength="12" onchange="numericOverride(this)">4000.00</div> 

しかし、テキストの値を変更すると、この関数から出力されます:

function numericOverride(val){ 
     console.log('hello'); 
} 

私は次の操作を実行しようとすると:

el.onchange = function() { numericOverride(this) } 

何がdiv要素に追加されません取得し、私は関数から何の結果を得るません。

+1

EventListenerはオプションではありませんか?これはあなたの必要としているように見えます... –

+0

属性ではなくDOMプロパティを設定したいとします。属性はHTML(デフォルト状態)で設定されます。 –

+0

@Matt - どのようにDOMプロパティを設定しますか? – webdad3

答えて

2

(そのクロスブラウザ)、これを試してみてください:

function keyPressHandler() { alert("Hi"); }; 

if (el.addEventListener) { 
    el.addEventListener("keypress", keyPressHandler, true); 
} 
else if (el.attachEvent) { 
    el.attachEvent("onkeypress", keyPressHandler); 
} 
else { 
    el.onkeypress = keyPressHandler; 
} 

デモ(jsfiddleはIE 7でうまく再生できませんのでご注意):http://jsfiddle.net/mrchief/BQxWp/2/

Chromeでをテスト済み、FF5、IE7(2回再試行した後)とIE9。

+0

+1、ベストアンサー – Griffin

1

あなたは適切な方法でイベントリスナーを設定する必要があります。

el.onkeypress = function() { alert("HI") } 
2

あなたにイベントハンドラをアタッチしようとしている要素のタイプは何ですか? OnKeyPressイベントは、次のタグでサポートされています。

<a>, <acronym>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, 
<caption>, <cite>, <code>, <dd>, <del>, <dfn>, <div>, <dt>, <em>, <fieldset>, <form>, 
<h1> to <h6>, <hr>, <i>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <object>, <ol>, 
<p>, <pre>, <q>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, 
<tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var> 

http://www.w3schools.com/jsref/event_onkeypress.asp

+0

はい、良い点 – Griffin

+0

@グリフィン - リストは私が今まで使ってきたすべてのHTMLタグのように見えますが... – RoccoC5

1

あなたがevent listenersを使用して検討していますか?

target.addEventListener("click", function() { alert("Hi"); })

+0

これはインターネットでは機能しませんエクスプローラのバージョン9より前のバージョン@ – Griffin

+0

@griffinは、コミュニティのために、あなたのコメントをそのまま残すのではなく、そのギャップを埋めるコードをいくつか用意することをお勧めします。つまり、ドーム0のやり方はより良い(すべての回答が投票され、これはバグのように見えるものが残っている)ので、そうではないようだ。この回答は、Dom 2にもっと柔軟なソリューションを提供します。 – davin

+0

@davin、ギャップを埋めるための数行のコードは、ポスターが与えるリンクにあります。あなたのコメントの残りの部分について話しているものは確信していません。 – Griffin