IE에서 setAttribute로 이벤트 생성시 문제 해결방법

출처 : http://ani2life.egloos.com/2192418

요즘들어 이런저런 코드를 가지고 응용해 보곤 하는데...

정말 멋진 분들 많다...라는 생각과 부지런 해야겠다라는 생각을 자주하게 된다...

+++ ------------------------------------------------

아래와 같이 버튼 객체를 하나 생성합니다.

var obj = document.createElement('input');
obj.setAttribute('type','button');

그리고 이 버튼을 클릭시 경고창을 띄우도록 아래와 같이 코딩합니다.

obj.setAttribute('onclick','alert(1)');

IE에서는 동작하지 않습니다. IE7 Beta2 에서도 테스트 해봤지만 고쳐지지 않았습니다.
IE에서는 아래와 같이 코딩하여야 동작합니다.

var obj = document.createElement('<input onclick="alert(1)">');

때문에 IE와 기타 브라우저에서의 객체 생성을 다르게 해주어야 합니다.

그렇다고 navigator.userAgent 를 이용하여 브라우저를 구분하는 방식은 좋지 못한 방식입니다.
이 부분에 대한 자료를 찾지 못해서 직접 다양하게 테스트 해보고 가장 괜찮다 싶은 방법을 찾아냈습니다.

아래의 코드는 IE에서만 'tmp'라는 경고창이 뜨며 다른 브라우저에서는 null 값으로 처리됩니다.

obj["onclick"] = 'tmp';
alert(obj.getAttribute('onclick'));

이 특징을 이용하여 아래와 같은 코딩으로 IE와 기타 브라우저의 객체 생성을 방법을 구분할 수 있습니다.


var obj = document.createElement('input');
obj["onclick"] = 'tmp';

if(obj.getAttribute('onclick')){ //IE전용 객체 새로생성
var obj = document.createElement('<input onclick="alert(1)">');
}
else{ //표준 지키는 멋진 브라우저는 기존 객체에 이벤트만 추가
obj.setAttribute('onclick','alert(1)');
}

//나머지 속성 추가
obj.setAttribute('type','button');



아래와 같은 코드를 생각하시는 분들도 계시리라 생각합니다.

obj["onclick"] = 'alert(1)';

물론 IE에서 obj.getAttribute('onclick')을 통해 속성이 추가됐음을 확인 할 수 있지만 동작은 하지 않습니다. ^^;

언제나 IE는 브라우저들 사이에 왕따인것 같습니다.
코딩할것도 많은데 IE 때문에 이거 해결하느라 시간 다 보냈습니다. ㅠㅠ

setAttribute로 onclick속성을 만들면 이벤트가 실행됩니다.

onclick속성이 어떤 함수를 실행하기를 바란다면

setAttribute의 2번째 인수에는 그 함수의 참조를 넣어줘야 합니다.

그런데 그 함수에 인수까지 넣어줘야 한다면

인수를 넣은 함수를 실행시키는 함수를 만들어 참조를 넣어줘야 합니다.

아래와같습니다.

buttonNode.setAttribute("onclick", function() { deleteItem(count-1); } );

그냥 deleteItem이라는 함수를 실행시킬 경우는

문자열이 아닌deleteItem이라는 참조를 넣어주면 됩니다.

아래와 같습니다.

buttonNode.setAttribute("onclick",deleteItem );

두개를 만들어야 두번째 버튼을 이용해 처음 만들어 진것을 지울 수 있군요 ^^;;