Mozilla 한국 커뮤니티

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

제목 글자수가 적어서 제목을 제대로 못적었습니다.;;

* 이 문서의 코드는 IE 5.5, IE 6, IE 7 Beta2, FireFox 1.5.0.1, Opera 8.5 에서 테스트 하였습니다.

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

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와 기타 브라우저의 객체 생성을 방법을 구분할 수 있습니다.

Code: Select all

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 때문에 이거 해결하느라 시간 다 보냈습니다. ㅠㅠ

Code: Select all

obj.onclick = function (){
alert(1);
}

이 코드는 어떻습니까?

onclick같은 경우, attribute가 아닌 event trigger라서 setAttribute로 접근하는 것은 아니라고 보는데요...

또한 제가 알기로는 이 메쏘드에 대해 명확한 표준이 없기 때문에 그 구현이 브라우저별로 조금씩 다르게 되어있습니다.

IE의 경우에는 attatchEvent(), detatchEvent()로,
FF의 경우에는 addEvent(), removeEvent()로 구현되며,

사실상 좋은 습관은 아니지만 아주 간단하게,
obj.onclick = 펑션포인터
로 크로스브라우징 구현이 가능합니다.

필요하다면, addEvent()와 removeEvent()를 prototype으로 재정의해서 브라우저별로 IE의 경우와 기타 경우를 각각 지원하게 하는 쪽이 나아 보입니다.

eouia wrote:
Code: Select all
obj.onclick = function (){
alert(1);
}
이 코드는 어떻습니까?

onclick같은 경우, attribute가 아닌 event trigger라서 setAttribute로 접근하는 것은 아니라고 보는데요...

저도 왠만하면 콜백함수를 좋아합니다.
그런데 사용할 수 없는 상황이 있습니다.
예를 들면 아래와 같은 상황입니다.

Code: Select all

<input type="button" id="btnTest"/>

<script type="text/javascript">
function Obj(n){
    this.num;
}

Obj.prototype.Alert = new function(){
    alert(this.num);
}

var obj = new Obj(10);

obj.Alert(); //10 경고창이 뜬다.

document.getElementById('btnTest').onclick = obj.Alert; //오류
</script>

onclick시 객체의 메소드를 실행시키고 싶을때 콜백함수로는 동작이 불가능합니다.
범용적이지 않은 스크립트를 작성시에는 위와같은 상황을 피할 여러 방법이 있지만 자동으로 필요한 객체를 생성하고 동작할 이벤트에 대한 코드를 생성시켜주는 스크립트를 작성할때 위와같은 문제를 피하지 못할 경우가 생깁니다.
그럴때를 위한 해결방법입니다.

혹시나 해서 검색해보니, 비슷한 주제의 재밌는 내용이 있네요.
http://www.quirksmode.org/blog/archives ... ecodi.html

eouia wrote:또한 제가 알기로는 이 메쏘드에 대해 명확한 표준이 없기 때문에 그 구현이 브라우저별로 조금씩 다르게 되어있습니다.

IE의 경우에는 attatchEvent(), detatchEvent()로,
FF의 경우에는 addEvent(), removeEvent()로 구현되며,

아쉽게도 이렇게 하여도 부분도 객체의 메소드는 실행시킬 수 없었습니다.
예전에 별 수단을 다 써봤지만 방법이 없더군요.

아, 고민하신 부분이 무엇인지 이제 이해가 되었습니다.

비근한 경우인진 몰라도, 저도 Drag&Drop 라이브러리를 만들면서 비슷한 문제에 처했었던 것 같네요.

Code: Select all

<html>
<head>
<script type="text/javascript">
	
var obj = new OBJ();
obj.init(10);

function init() {
	document.getElementById('test').onclick = function () {
		obj.doSomething1();
	}
}

function OBJ() {
	this.num = 0;
	
	this.init = function(n) {
		this.num = n;
	}
		
	
	this.doSomething1 = function () {
		alert(this.num);
		this.num++;
	}
}

window.onload=init;
</script> 
</head>
<body>
<button id="test">oops!</button>
</body>
</html>

Code: Select all

document.getElementById('test').onclick = function () {
		obj.doSomething1();
	}

급한 대로, 이런 방식을 쓰고 있습니다.

Code: Select all

document.getElementById('test').onclick = obj.doSomething1;

이 안되서요.

eouia wrote:아, 고민하신 부분이 무엇인지 이제 이해가 되었습니다. :)
비근한 경우인진 몰라도, 저도 Drag&Drop 라이브러리를 만들면서 비슷한 문제에 처했었던 것 같네요.

네, 하나의 프로그램에 종속적이게 만든다면 문제가 없는데 범용적인 라이브러리를 만들때 자주 봉착하는 문제인것 같습니다.

이문제때문에 navigator속성으로 구분하고 있었고
event가 동작을 안해서 고민하고 있었는데. 감사합니다....*_*
그런데 navigator로 브라우져를 판단하는게 왜 안좋은 방법인가요??
궁금해서 여쭤봅니다.

Mozilla 한국 커뮤니티

IE setAttribute 이벤트 문제

IE setAttribute 이벤트 문제

Re: IE setAttribute 이벤트 문제