2011-08-10 3 views
1

내 응용 프로그램에 동적으로 요소에 이벤트를 적용하려고합니다.동적으로 자바 스크립트 setAttribute

onclick을 사용했을 때 나는 팝업 알림을받습니다.

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

onkeypress를 사용하려고하면 아무 일도 일어나지 않습니다.

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

정말 onkeypress를 사용할 수 있어야합니다. 내가 잘못하고있는 것이 있습니까? setAttribute가 내가하는 일을 성취하는 가장 좋은 방법이 아닌가? 그렇다면 특정 요소에 이벤트를 동적으로 설정하는 대안은 무엇입니까?

UPDATE :

내가 할 경우에는 아래의 질문 몇 가지 답변을 그러나

<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> 

: 나는 방화범의 소스를 보면

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

내가 다음을 참조 , 텍스트의 값을 변경하면이 함수에서 출력됩니다 :

function numericOverride(val){ 
     console.log('hello'); 
} 
012 3,516,

나는 다음을 수행하려고 :

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

아무것도 사업부에 추가되지 도착하고 난 함수로부터 결과를 얻을 수 없습니다.

+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/

가 크롬에을 테스트 , FF5, IE7 (두 번 다시 시도한 후) 및 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

관련 문제