2011-09-14 3 views
1

내가 나중에 코드에서 지금 무슨 일이 일어나고 있는지자바 스크립트

lnk = document.getElementById('lnk1') 
lnk.onclick = function() { do something} 

처럼 같은 앵커 태그에 추가됩니다

<a id='lnk1' onclick='do something' >test</a> 

같은 코드가 가지고 온 클릭 해당 코드의 OnClick 함수의 두 번째 조각 앵커 태그가 덮어 쓰여지고 있습니다. 대신에 첫 번째 onclick 코드가 실행되고 난 후 두 번째 onclick이 실행됩니다.

+0

봐 ['addEventListener'] (https://developer.mozilla.org/en/DOM/element.addEventListener). – Shef

+0

정확히 일치하는 것은 아니지만 도움이 될만큼 충분히 관련되어 있습니다. http://stackoverflow.com/questions/2790583/javascript-append-to-onclick-event – David

+0

@Baszz 아니요, 작동하지 않습니다. 브라우저는 속성의 문자열 값을 본격적인 JavaScript 함수로 변환하므로 추가 코드를 문자열 형식으로 추가하는 것은 의미가 없습니다. – Pointy

답변

3

:

lnk1.addEventListener('click', function() { 
    // do something 
}); 

이 수행해야하므로이, 버전 9 이전에 IE에서 작동하지 않습니다

var handler = function() { 
    // do something 
}; 

if ("addEventListener" in lnk1) { // standards-compliant browsers 
    lnk1.addEventListener('click', handler); 
} else { // Internet Explorer < v9 
    lnk1.attachEvent('onclick', handler); 
} 

이 작업은 작동하며 위의 코드와 HTML 특성에 지정된 원래 함수가 모두 실행됩니다. HOWEVER 같은 장소에서 모든 이벤트 처리기를 정의하는 것이 훨씬 더 좋을 것입니다 : 자바 스크립트. HTML 속성에서 이벤트 처리 논리를 제거하는 것에 대해 열심히 생각하십시오.

JAVASCRIPT

lnk = document.getElementById('lnk1') 
lnk1.onclick = function() { do something} \\ replace lnk1 with lnk 
lnk.onclick = function() { do something} \\ this will work 

당신은 변수로 lnk를 정의하지만이 onclick 이벤트와 lnk1를 호출 :

3

이 작업을 시도 할 수 :

var lnk = document.getElementById('lnk1'); // don't forget var! 

var oldHandler = lnk.onclick; 
lnk.onclick = function(ev) { 
    if (oldHandler) oldHandler(ev); 
    // do something ... 
}; 

그 코드는 기존의 핸들러에 대한 참조를 저장하고, 비어 있지 않다면 그것은 새로운 핸들러가하고 싶어 어떤 다른 일을하기 전에 호출합니다.

새 코드 다음에 이전 처리기 에 전화를 걸거나 섞어 넣을 수 있습니다.

+0

그게 효과가 있다면, 좋은 해결책입니다! –

1
<a id='lnk1' onclick='do something' >test</a> 

자바 스크립트

lnk1 = document.getElementById('lnk1') 
    lnk1.addEventListener('click',function() { do something}, false); 

온 클릭하면 덮어 쓰기 기존하는 속성을 설정하지만, 다음이 확인 될 것입니다 이벤트 리스너를 통해 클릭 할당합니다. 이 작업을 수행하는 매우 간단한 표준을 준수하는 방법이 있습니다

+0

멋지지만 IE8에서 작동하지 않습니다. firefox, chrome, ie9에서 작동합니다. –

0

당신은 당신의 문에 실수가있다. 이것은 잘못된 진술입니다.

<a id='lnk1'>test</a> 

사용의 HTML이 데모를 참조하십시오 :에서 http://jsfiddle.net/tm5cX/

+1

고맙습니다. –